This content originally appeared on Bits and Pieces - Medium and was authored by FardaKarimov
A comprehensive guide (with code example) to building a custom React hook for data fetching using the useEffect() hook.
React hooks have become very popular among React developers in recent times. One of the most useful hooks is the useEffect() hook. This hook allows us to perform side effects, such as data fetching, in functional components. In this article, we will explore how to build a custom React hook for data fetching using the useEffect() hook.
What is a Custom React Hook?
A custom React hook is a JavaScript function that starts with the word “use” and allows us to reuse stateful logic across our application. Custom hooks can encapsulate complex logic and make it easy to share it between components. Custom hooks can also help us to abstract the implementation details of a functionality so that we can use it easily in other components without worrying about how it works internally.
The useEffect() Hook
The useEffect() hook is a React hook that allows us to perform side effects, such as data fetching, in functional components. The useEffect() hook takes two arguments: a function that performs the side effect and an array of dependencies that tells React when to re-run the side effect.
The syntax of the useEffect() hook looks like this:
useEffect(() => {
// side effect logic goes here
}, [dependency1, dependency2]);The first argument is the function that performs the side effect. The second argument is an array of dependencies. If any of the dependencies change, the side effect function will be re-run. If the array is empty, the side effect function will only be run once when the component mounts.
Building a Custom React Hook for Data Fetching Now that we have an understanding of what custom hooks and the useEffect() hook are, let’s build a custom hook for data fetching.
Our custom hook will have the following features:
- It will accept a URL and an optional options object as arguments.
- It will return an array containing the data and a loading flag.
- It will handle errors and return an error flag if an error occurs.
- It will use the useEffect() hook to perform the data fetching.
Here’s the code for our custom hook:
import { useState, useEffect } from 'react';
const useDataFetching = (url, options = {}) => {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch(url, options);
const json = await response.json();
setData(json);
setLoading(false);
} catch (error) {
setError(error);
setLoading(false);
}
};
fetchData();
}, [url, options]);
return [data, loading, error];
};
export default useDataFetching;Let’s go through the code line by line.
- We import the useState() and useEffect() hooks from React.
import { useState, useEffect } from 'react';2. We define our custom hook, useDataFetching, that takes a URL and an optional options object as arguments.
const useDataFetching = (url, options = {}) => {3.We initialize three state variables using the useState hook: data, loading, and error.
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
4. We use the useEffect() hook to perform the data fetching. We define an async function, fetchData, that uses the fetch API to fetch data from the URL.
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch(url, options);
const json = await response.json();
setData(json);
setLoading(false);
} catch (error) {
setError(error);
setLoading(false);
}
};
fetchData();
}, [url, options]);The useEffect() hook has two arguments: the function that performs the side effect and an array of dependencies. The dependencies in our case are the URL and options object. If either of these dependencies change, the useEffect() hook will re-run, and the fetchData function will be called again.
Inside the fetchData function, we use the fetch API to make a request to the specified URL. We then parse the response as JSON and use the setData and setLoading functions to update the state variables with the received data and set the loading flag to false.
If an error occurs during the data fetching, we use the setError and setLoading functions to update the state variables with the error and set the loading flag to false.
Finally, we return an array containing the data, loading, and error state variables.
💡 Note: If you find yourself using the useDataFetching() hook over and over, you can use an open-source toolchain such as Bit to publish, version, and reuse it across all of your projects with a simple npm i @bit/your-username/useDataFetching. Learn more here.
Find out more:
How to reuse React components across your projects
Using the Custom Hook
Now that we have our custom hook, let’s see how we can use it in our components.
Here’s an example of how we can use our custom hook to fetch data from the GitHub API:
import React from 'react';
import useDataFetching from './useDataFetching';
const GitHubUser = ({ username }) => {
const [data, loading, error] = useDataFetching(
https://api.github.com/users/${username}
);
if (loading) return <p>Loading...</p>;
if (error) return <p>{error.message}</p>;
return (
<div>
<h1>{data.name}</h1>
<img src={data.avatar_url} alt={${data.name} avatar} />
</div>
);
};
export default GitHubUser;
In this example, we pass the URL for the user’s GitHub profile to our custom hook. The useDataFetching hook will handle the data fetching and state management for us.
We then use the loading and error state variables to display a loading message or an error message if an error occurs.
If the data is successfully fetched, we can use it to render the user’s name and avatar image.
Conclusion
In this article, we learned how to build a custom React hook for data fetching using the useEffect() hook. We saw how custom hooks can encapsulate complex logic and make it easy to reuse stateful logic across our application.
We also saw how to use the useDataFetching custom hook in a component to fetch data from an external API and display it to the user.
Custom hooks can help us to abstract the implementation details of a functionality and make it easy to share it between components. They can also help us to write more reusable and maintainable code.
I hope this article has been helpful in understanding how to build a custom React hook for data fetching. Happy coding!
Build React Apps with reusable components, just like Lego
Bit’s open-source tool help 250,000+ devs to build apps with components.
Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.
Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:
→ Micro-Frontends
→ Design System
→ Code-Sharing and reuse
→ Monorepo
Learn more:
- Creating a Developer Website with Bit components
- How We Build Micro Frontends
- How we Build a Component Design System
- How to reuse React components across your projects
- 5 Ways to Build a React Monorepo
- How to Create a Composable React App with Bit
Building a Custom React Hook for Data Fetching was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by FardaKarimov
FardaKarimov | Sciencx (2023-03-30T02:17:13+00:00) Building a Custom React Hook for Data Fetching. Retrieved from https://www.scien.cx/2023/03/30/building-a-custom-react-hook-for-data-fetching/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.