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!

https://egghead.io/courses/simplify-react-apps-with-react-hooks

Introduction to Refactoring a React Application to React Hooks
3:28

Refactor a Class Component with React hooks to a Function
5:22

Handle Deep Object Comparison in React's useEffect hook with the useRef Hook
3:09

Safely setState on a Mounted React Component through the useEffect Hook
3:24

Extract Generic React Hook Code into Custom React Hooks
2:53

Track Values Over the Course of Renders with React useRef in a Custom usePrevious Hook
1:19

Refactor a React Class Component with useContext and useState Hooks
2:56

Refactor a render Prop Component to a Custom React Hook
3:45

Handle componentDidMount and componentWillUnmount in React Component Refactor to Hooks
7:38

Dynamically Import React Components with React.lazy and Suspense
2:15

Preload React Components with the useEffect Hook
2:06