When developing applications in React, it’s common to need to share data between many components. Passing these data manually through props can become complicated and difficult to maintain. To solve this problem, React offers the Context API.
You’ll learn what Context is, for what it’s used and how to implement it step by step in this tutorial.
Context is a functionality that allows sharing data between multiple components without having to manually pass props up each level of the component tree.
It is primarily used for managing global data within an application, such as:
Context provides access to these data from any component that needs it.
Imagine that you have data in a parent component and need to use it in a child component several levels below. Without Context, you would have to pass the data as props through all intermediate components, even if they don’t use it. This process is called prop drilling.
Context allows you to avoid this problem by providing direct access to the data from any component.
The use of Context normally follows three steps:
To create a context, the function createContext is used.
import { createContext } from "react"; export const UsuarioContext = createContext();
This function creates an object that will contain the shared data.
After creating the context, you must wrap the components that need to access this data with a Provider.
import { useState } from "react"; import { UsuarioContext } from "./UsuarioContext";function UsuarioProvider({ children }) { const [usuario, setUsuario] = useState("Ismael"); return ( {children} );}export default UsuarioProvider;
The Provider allows sharing the value defined in the value prop with all child components.
The children parameter represents the components that will be wrapped by the Provider.
To access the context data, you use the Hook useContext.
import { useContext } from "react"; import { UsuarioContext } from "./UsuarioContext"; function Perfil() { const { usuario } = useContext(UsuarioContext); return Welcome {usuario}
; }
This is the way the component can access data directly without receiving props.
Normally, the Provider is placed at a high level of the application, like in the main component.
import UsuarioProvider from "./UsuarioProvider"; import Perfil from "./Perfil"; function App() { return (
All components inside UsuarioProvider can access the context.
The context can share more than one piece of data.
const [usuario, setUsuario] = useState("Ismael"); const [rol, setRol] = useState("admin"); < UsuarioContext.Provider value={{ usuario, rol, setUsuario, setRol }}> {children}
This allows to centralize the management of information related.
The context is useful when data needs to be accessible from many different components and are related to the overall functioning of the application.
Common cases are:
All data does not need to be stored in Context. Excessive use of it can make maintenance and performance harder.
It’s recommended to avoid Context when:
Divide the contexts by responsibilities. It is better to have several small contexts than one very large one.
Avoid storing complex logic inside the Provider. Keep the responsibility clear.
Use personalized Hooks to make access to the context easier.
Ejemplo:
import { useContext } from "react"; import { UsuarioContext } from "./UsuarioContext"; export function useUsuario() { return useContext(UsuarioContext); }
Using the Custom Hook:
const { usuario } = useUsuario();
This improves readability and facilitates reuse.
Every time the value of the Provider changes, all components that consume that context are re-rendered. To avoid performance issues, it is recommended:
