import React from 'react';
import useFetch from './useFetch'; // Ensure correct import path
function UserList() {
const { data, loading, error } = useFetch('https://jsonplaceholder.typicode.com/users');
if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error.message}</p>;
return (
<ul>
{data.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}
export default UserList;
- Reusability: The
useFetch hook can be used across different components and applications, reducing code duplication and simplifying API interaction. - Loading and Error States: Automatically manages loading and error states, providing a consistent way to handle asynchronous operations.
- Cleanup Handling: Prevents state updates on unmounted components, reducing potential memory leaks and ensuring stability.