Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

egghead.io

Reusable State and Effects with React Hooks

via egghead.io

Overview

Previously, in order to add state or side-effects in React you had to create a Class Component. However, with the introduction of the Hooks proposal, you can now add state and effects to a Function Component. In addition, you can extract your hook logic and create a custom hook that can be shared across your app.
As I introduce the concepts of React hooks, I'll apply those concepts in various demos to see how they apply in different scenarios. I'll be converting Class Components to Function Components so you can see how they relate to each-other.
By the end of this course, you'll learn how to:
Run (and Skip) side-effects with the useEffect hook
Write a custom hook to share logic in your app
Simplify the Context API with the useContext hook
Update state with dispatch actions using the useReducer hook
Optimize Components with useMemo

Syllabus

  • Introduction to Reusable State and Effects with React Hooks
  • Environment Setup for React Hooks
  • Add State with the useState Hook to a React Function Component
  • Add Linting to Help Enforce Rules when Using React Hooks
  • Add a Lifecycle Event with the useEffect Hook to a React Function Component
  • Use the React useRef Hook to Reference a DOM Element or Simulate an Instance Variable
  • Write Custom Hooks to Share Logic Between React Function Components
  • Leverage an Existing Community Hook in Your React Function Component
  • Use the useReducer Hook and Dispatch Actions to Update State
  • Use the useContext Hook to Wire-up the React Context API
  • Simulate PureComponent with a React Function Component
  • Leverage the React useMemo Hook for Expensive Operations
  • Convert a Render Props Component using a Custom React Hook

Taught by

Elijah Manor

Reviews

4.6 rating at egghead.io based on 493 ratings

Start your review of Reusable State and Effects with React Hooks

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.