Advanced React: Optimizing Hooks
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 training course 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
- Review “All the React Fundamentals in One Place”
- Read “Introducing Hooks” in the React documentation
- 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)
About your instructor
The timeframes 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
- 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