The hooks pattern

We’ve now covered what might be considered legacy patterns in React – render props and higher-order components.

You’ll note that the React documentation page about higher-order components has the following disclaimer: “Higher-order components are not commonly used in modern React code.”

Additional reading

The React documentation for useState and useEffect hooks:

useState: https://react.dev/reference/react/useState

useEffect: https://react.dev/reference/react/useEffect

So, what we know so far is that hooks allow us to do what we did with render props and that higher-order components are not recommended any more. This is because hooks provide a way to access all the React primitives, including state and the component life cycle.

React provides built-in hooks. The two we’ll focus on are useState and useEffect. One key feature of hooks is that we can write custom hooks that build on top of React built-in hooks...