Reusable State and Effects with React Hooks

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