Working with custom Hooks

Hooks are a way to use React features for creating local state or to watch for updates in that state using life cycles. But Hooks are also a way to reuse logic that you create for your own React application. This is a pattern that is popular among a lot of libraries that create functionalities for React, such as react-router.

Note

Before React introduced Hooks themselves, it was a popular pattern to create Higher-Order Components (HOCs) to reuse logic. HOCs are advanced features in React that focus on the reusability of components. The React documentation described them as follows: "A higher-order component is a function that takes a component and returns a new component."

In the first part of this section, we'll create our first custom Hook, which uses logic to retrieve data from the data source that we created in the previous section.

Creating custom Hooks

We already saw that we can reuse components in React, but the next step...