GitHub link for the code below: https://github.com/prakash118/react-context
Let's start by looking at a common approach before diving into the Context API.
The typical process for fetching and rendering a list of users within a component consists of these steps:
- Retrieve/Fetch user data when the component mounts.
- Store the retrieved data in the component's local state.
- Update the state, causing the component to re-render and display the user list.
export default function Users() {
const [users, setUsers] = useState<User[]>([]);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(false);
useEffect(() => {
const getAllUsers = async () => {
try {
const response = await fetch('/api/users');
const data = await response.json();
setUsers(data);
} catch (err) {
console.log(err);
setError(true);
} finally {
setIsLoading(false);
}
};
getAllUsers();
}, []);
if (isLoading) return <div>Loading...</div>;
if (error) return <div>Error</div>;
return (
<ul>
{users.map((user) => (
<li key={user.id}>Name: {user.fullname}</li>
))}
</ul>
);
}
The React code presented uses three states to manage data fetching: data, loading, and error. The useEffect hook handles the fetching process and updates the appropriate state accordingly. If the fetch is successful, the user list is displayed. If an error occurs, an error message is shown. While the request is in progress, a loading message is displayed to the user.
Although this component will function as expected and represents a typical implementation, there are inherent limitations to this approach.
Limitations
-
Unwanted data fetching: A potential issue is unwanted data fetching in this child component whenever the parent re-renders.
-
Inefficient Data sharing / Prop drilling: A significant drawback of this approach is the need to pass data through multiple layers of components via props when deeply nested components require access to the data fetched in this component.
-
Unnecessary refactoring: When a child component needs data, it can be provided through props. If sibling components require the same data, the data fetching logic should be moved to their shared parent component or container. This approach necessitates unnecessary refactoring should the data be required by another component in the future. This approach is similar to Hardcoding.
The Context API provides a way to address some of the issues we've discussed. Let's explore its implementation.
Context API
React's Context API, a core feature that has been available for some time, provides a mechanism for sharing data between components without the overhead of passing props down through multiple levels, thus eliminating prop drilling.
Using the Context API involves three core components: the context, which holds the data; the provider, which makes the data available; and the consumer, which accesses the data. The Context API involves these steps:
- Create a context using
createContext. - Wrap the component with the context's provider.
- Nested components within the provider can now access the context's value.
Code example
// create context
const UserDataContext = createContext<UserDataContextProps | undefined>(
undefined
);
// provider
<UserDataContext.Provider value={{ data }}>
{children}
</UserDataContext.Provider>
// consumer (used before the hook was introduced)
<UserDataContext.Consumer>
{ (value) => (
...
)}
</UserDataContext.Consumer>
// or consumer with hook (recommended)
const context = useContext(UserDataContext);
We will refactor the Users component to utilize the Context API, following these steps:
- Create the context and export its provider as the default component.
- Relocate the data fetching logic from the Users component to the context provider.
- Wrap the Users component with the context provider in its parent component.
- Access the user data from the context within the Users component using the context hook.
user-data-context.tsx (UserData context)
const UserDataContext = createContext<UserDataContextProps | undefined>(
undefined
);
export default function UserDataProvider({
children,
}: {
children: ReactNode;
}) {
const [users, setUsers] = useState<User[]>([]);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
const getUsers = async () => {
// Data fetching logic here
};
getUsers();
}, []);
return (
<UserDataContext.Provider value={{ users, isLoading, error }}>
{children}
</UserDataContext.Provider>
);
}
export function useUserDataContext() {
const context = useContext(UserDataContext);
if (!context) {
throw new Error(
'useUserDataContext must be used within a UserDataProvider'
);
}
return context;
}page.tsx (Parent component)
import UserDataProvider from '@/contexts/user-data-context';
import Users from './components/users';
export default function Home() {
return (
<UserDataProvider>
<Users />
</UserDataProvider>
);
}users.tsx (Users component)
import { useUserDataContext } from '@/contexts/user-data-context';
export default function Users() {
const { users, isLoading, error } = useUserDataContext();
if (isLoading) return <div>Loading...</div>;
if (error) return <div>Error</div>;
return (
<ul>
{users.map((user) => (
<li key={user.id}>Name: {user.fullname}</li>
))}
</ul>
);
}Looks much better!
In this implementation, the data fetching logic has been extracted into a UserDataProvider component. A context, named UserDataContext, is created with an initial value of undefined. The UserDataProvider component encapsulates the data fetching logic and accepts child components as props, wrapping them within the context's provider. By utilizing the Context API in this method, we achieve a more centralized and manageable approach to data fetching.
A custom hook is implemented to provide a convenient way to access the context data, throwing an error if used outside the scope of the provider. This custom hook design also obviates the need to export the UserDataContext directly.
Although the user experience is consistent with the previous implementation, the developer experience has been substantially enhanced. This new approach grants developers increased freedom to relocate components within the provider and build more specialized components within its context without the need for prop drilling.
If we require a component to display the total number of users, we can create a UserCount component. This component would be placed in the same parent as the Users component and would utilize the context hook to retrieve and display the user count from the context provider.
user-count.tsx (UserCount component)
import { useUserDataContext } from '@/contexts/user-data-context';
export default function UserCount() {
const { users, isLoading } = useUserDataContext();
if (isLoading) return <div>...</div>;
return (
<div>
<span>Total users: {users.length}</span>
</div>
);
}page.tsx (Parent component)
import UserDataProvider from '@/contexts/user-data-context';
import Users from './components/users';
import UserCount from './components/user-count';
export default function Home() {
return (
<UserDataProvider>
<UserCount />
<Users />
</UserDataProvider>
);
}Conclusion
While these examples may not directly apply to your specific scenario, they illustrate the creation and use of the Context API. The Context API is most beneficial when sharing data globally within an application, eliminating the need for manual prop drilling (passing props through multiple component levels). This effectively "teleports" data to where it's needed.
Benefits of using the Context API:
- Eliminates boilerplate associated with passing props down the component tree.
- Reduces tight coupling between components.
- Improves component maintainability when adding, removing, or moving components within the tree.
- Simplifies state management.
Common Use Cases:
- Theme management (light/dark mode)
- User authentication status
- User preferences (language, currency)