Advanced React: Optimizing Hooks
Published by O'Reilly Media, Inc.
How to use and optimize React Hook
React.js hooks enable function components to have state and side effects, thereby eliminating the need to use classes or rely on the “this” keyword. React hooks come with their challenges, but using them generally forces you to write better code. We’ll explore how in this training.
What you’ll learn and how you can apply it
By the end of this live, hands-on, online course, you’ll understand:
- How function components work with React hooks and the role of JS closures
- How to use the various types of React hooks and how to make them work together
- How to extract stateful logic into custom React hooks
And you’ll be able to:
- Use built-in and custom React Hooks for state and side effects
- Analyze and optimize all types of React Hooks
- Lint and debug errors related to React Hooks
This live event is for you because...
- You’re a React developer and want to become an expert on React hooks
- You work with React classes, and want to simplify your code
Prerequisites
- Familiarity and comfort with the basics of React and JavaScript
Recommended preparation:
- Review “All the React Fundamentals in One Place”
- Read “Introducing Hooks” in the React documentation
Recommended follow-up:
- Read “React hooks” in React Design Patterns and Best Practices, second edition (book)
- Watch “Chapter 26. React Hooks” in React - The Complete Guide (video course)
Schedule
The time frames are only estimates and may vary according to how the class is progressing.
Using React Hooks (60 minutes)
- Presentation: Hooks Why/What
- Demo: The useState Hook
- Demo: The useEffect Hook
- Presentation: The rules of hooks and using ESLint to enforce them.
- Exercise: Convert a stateful class component into a function one
- Discussion: Is this a better approach? What is the role of closures? How can this be buggy?
- Demo: The useRef and how it replaces the need for “this”
- Demo: Using custom hooks
- Demo: State management with useReducer/useContext hooks
- Exercise: Implement an action that requires global state access
- Q&A
- Break (5 minutes)
Analyzing and Optimizing React hooks (55 minutes)
- Presentation: Hooks cleanup, diffing, and skipping
- Demo: Lazy loading and the updater functions
- Demo: Count the number of generated functions
- Demo: Memoizing hooks and callbacks
- Demo: Splitting hooks responsibilities. Data Fetching.
- Demo: Debugging, previous props/state, useDebugValue
- Exercise: Identify bug in code example
- Q&A
Your Instructor
Samer Buna
Samer Buna has extensive experience in software development, including web and mobile applications, APIs, system administration, and scalability. Samer is the author of several technical books and online courses on topics such as Node.js, React, and GraphQL.