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

egghead.io

Simplify React Apps with React Hooks

via egghead.io

Overview

With the massive improvements to function components in React via hooks and suspense, you may be interested in seeing how to refactor a typical class component to a simpler function component that uses React Hooks features. In this course, Kent will take a modern React codebase that uses classes and refactor the entire thing to use function components as much as possible. We’ll look at state, side effects, async code, caching, and more!
Want a primer on hooks and suspense? Watch Kent's React Hooks and Suspense Playlist!

Syllabus

  • Introduction to Refactoring a React Application to React Hooks
  • Refactor a Class Component with React hooks to a Function
  • Handle Deep Object Comparison in React's useEffect hook with the useRef Hook
  • Safely setState on a Mounted React Component through the useEffect Hook
  • Extract Generic React Hook Code into Custom React Hooks
  • Track Values Over the Course of Renders with React useRef in a Custom usePrevious Hook
  • Refactor a React Class Component with useContext and useState Hooks
  • Refactor a render Prop Component to a Custom React Hook
  • Handle componentDidMount and componentWillUnmount in React Component Refactor to Hooks
  • Dynamically Import React Components with React.lazy and Suspense
  • Preload React Components with the useEffect Hook

Taught by

Kent C. Dodds

Reviews

4.6 rating at egghead.io based on 1126 ratings

Start your review of Simplify React Apps 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.