Hooks 🪝 are reusable functions.

When you have component logic that needs to be used by multiple components, we can extract ⛏️ that logic to a custom Hook.

Custom Hooks start with "use". Example: useFetch.

Build a Hook

In the following code, we are fetching data 📬 in our Home component and displaying it.

We will use the JSONPlaceholder service to fetch fake 🎭 data.

This service is great for testing 🧪 applications when there is no existing data.

Use the JSONPlaceholder service to fetch fake "todo" items and display the titles on the page:

The fetch logic may be needed in other components as well, so we will extract ⛏️ that into a custom Hook 🪝.

Move 🛻 the fetch logic to a new 🆕 file to be used as a custom Hook:

Example Explained

We have created a new 🆕 file called useFetch.js containing a function called useFetch which contains 📦 all of the logic needed to fetch our data.

We removed ❌ the hard-coded URL and replaced it with a URL variable that can be passed to the custom Hook🪝.

Lastly, we are returning 📥 our data from our Hook.

In index.js, we are importing 🚚 our useFetch Hook and utilizing it like any other Hook. This is where we pass in the URL to fetch data.

Now we can reuse 🔄️ this custom Hook in any component to fetch data from any URL.