Rewrite a React Component Class to use the useState Hook Instead of Local State

Create a Custom Hook in React by Wrapping useState

Use React Hooks Correctly by Following The Two Rules of Hooks

Use the useEffect React Hook Instead of the componentDidMount Lifecycle Method

Pass Data Between React Components with the useContext Hook

Use a Reducer in a Functional Component with the useReducer Hook in React

Cache Computed Values for Better Performance with the useMemo React Hook

Get a Reference to a DOM Element in React with the useRef Hook

React Hooks in Function Components

Instead of multiple `useState` hooks, you can use a single `useReducer` hook to manage multiple pieces of data in a React component.

This will feel very similar to Redux, but it will be defined for only a single component.

This can trade off some of the complexity of using multiple `useState` hooks, but it just moves that complexity into the reducer function - so using `useReducer` vs multiple `useState` calls is mostly just a code style choice.

Use a Reducer in a Functional Component with the useReducer Hook in React

Share this video with your friends

Course

React Hooks in Function Components