Scenario: Fetching Data
Instead of repeatedly writing code for data fetching in every component, you can encapsulate that logic in a custom hook. This makes your code cleaner, reusable, and easy to maintain. Let’s walk through a simple example.
1. Create a Custom Hook for Data Fetching
import { useState, useEffect } from 'react';
// Custom hook to fetch data
function useFetch(url) {
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);
if (!response.ok) {
throw new Error('Failed to fetch data');
}
const result = await response.json();
setData(result);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
};
fetchData();
}, [url]);
return { data, loading, error };
}
export default useFetch;
2. Use This Hook in Your Components
Now, you can use useFetch in any component to handle API data fetching:
import React from 'react';
import useFetch from './useFetch';
function UserList() {
const { data, loading, error } = useFetch('https://jsonplaceholder.typicode.com/users');
if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error}</p>;
return (
<ul>
{data.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}
export default UserList;
Why This is Useful:
- Separation of concerns: The logic for fetching data is separated from the component itself.
-
Reusability: You can use
useFetchin multiple components without duplicating code. - Clarity: Components focus on rendering UI, making them simpler to understand.
🔨🤖🔧 Pro Tip: Custom hooks can do much more than just fetching data! You can use them for handling form inputs, subscriptions, or even implementing debouncing logic!
Top comments (0)