Hi there! 👋
Do you like the course? If so, you can encourage new users to have a look at it by telling them what you thought about it.
It would help us a lot!
Course outline
Lessons
- 1. Store a local state with
useState - ↳1. Creating and updating a local state
- ↳2. More about the initial state
- ↳3. Alternative syntax to update the state
- ↳4. State updates are not synchronous
- ↳5. Exercise & next step
- 2. Trigger side effects with
useEffect - ↳1. Meet
useEffect - ↳2. Handling asynchronous effects and clean up
- ↳3. Making HTTP requests
- ↳4. Async functions
- ↳5. What to include in the dependencies array?
- ↳6. Comparison with class components
- ↳7. Exercise & next steps
- 3. Custom hooks and classic async pattern
- ↳1. Handling asynchronous operations
- ↳2. Creating custom hooks
- ↳3. Good practices with custom hooks
- ↳4. About testing custom hooks
- ↳5. Exercise & next steps
- 4. What are hooks anyway?
- ↳1. How React renders a component without hooks
- ↳2. How React renders a component with a local state
- ↳3. How React renders a component with effects
- ↳4. Rules for hooks
- ↳5. Next steps
- 5. Debugging hooks
- ↳1. Using the plain old
console.log - ↳2. Using React Devtools
- ↳3. Debugging custom hooks
- ↳4. Next steps
- 6. Get the current state when dealing with async code
- ↳1. Update the state based on its current value
- ↳2. Read the state’s current value using a ref
- ↳3. Exercise & next steps
- 7. Solving infinite loops when using
useEffect - ↳1. No dependencies array
- ↳2. States updating each other
- ↳3. Array and object states
- ↳4. Next steps
- 8. Optimizing performance with
useMemoanduseCallback - ↳1. Memoization with
useMemo - ↳2. Memoize callbacks with
useCallback - ↳3. Callbacks for dynamic lists or table rows
- ↳4. Next steps
- 9. Debouncing a user input
- ↳1. Basic implementation without debouncing
- ↳2. Debouncing the input with another state
- ↳3. A custom hook for debouncing
- ↳4. Another debouncing implementation
- ↳5. Next step
- 10. Using contexts to share values between components
- ↳1. The provider/consumer pattern
- ↳2. Updating a context value
- ↳3. Next steps
- 11. Simplify state update logic with reducers
- ↳1. Meet
useReducer - ↳2. Example with a reducer
- ↳3. Should I use
useStateoruseReducer? - ↳4. Bonus: reimplement Redux with contexts
- ↳5. Exercise & next steps
- 12. Custom hooks to use the browser’s APIs
- ↳1. Access the local storage
- ↳2. Exercise: Access the local storage
- ↳3. Get an element’s size
- ↳4. Exercise: Get an element’s size
- ↳5. Get the user’s geolocation
- ↳6. Exercise: Get the user’s geolocation
- 13. From render-props and high-order components to hooks
- ↳1. Render-props components to hooks
- ↳2. High-order components to hooks
- 14. Better hooks with TypeScript
- ↳1. Typing local states
- ↳2. Typing contexts
- ↳3. Typing reducers and actions
- ↳4. Typing custom hooks