En esta ocasión, exploraremos una funcionalidad que React nos ofrece para almacenar información y acceder a ella desde cualquier punto de nuestra aplicación. Esto nos ayuda a evitar un problema común conocido como “prop drilling”, que ocurre cuando pasamos props a través de varios niveles de componentes. Esto puede resultar en que los componentes intermedios reciban props que no necesitan para su lógica, lo que puede forzar su renderización innecesaria y aumentar el costo de la aplicación.
Hoy nos enfocaremos en la utilidad de ContextAPI. Esta característica nos permite crear un estado global donde podemos almacenar información y hacer que esté disponible para cualquier componente a lo largo de la aplicación.
El primer paso para crear un estado global es establecer un contexto, lo cual se realiza de la siguiente manera:
estado: string,
setEstado: () => void
}
export const MiPrimirContext = createContext<IEstado>({
estado: ”,
setEstado: () => {}
});
En este código, creamos un contexto utilizando el método createContext. Le proporcionamos un objeto con dos propiedades: estado y setEstado, que serán los valores por defecto del estado global. Este contexto se asigna a la constante MiPrimerContext.
Una vez que hemos creado el contexto, el siguiente paso es crear un nuevo componente llamado MiPrimerProvider. Este componente será responsable de establecer el proveedor del contexto que creamos anteriormente.
export const MiPrimirProvider = ({children}: {children: ReactNode})=> {
const [estado, setEstado] = useState(‘primier Estado‘)
return (
<MiPrimirContext.Provider value={{estado, setEstado}}>
{children}
</MiPrimirContext.Provider>
)
}
En este fragmento de código, observamos el uso del hook useState, el cual nos ayuda a gestionar el estado. Este componente actuará como un “HOC” (Componente de Orden Superior), lo que significa que cualquier componente anidado dentro de él tendrá acceso al estado definido.
import { MiPrimerProvider } from “./providers/MiPrimerProvider“;
import Dashboard from “./components/dashboard“;
function App() {
return (
<div className=“relative“>
<MiPrimerProvider>
<Dashboard />
</MiPrimerProvider>
</div>
);
}
export default App;
En este código de la aplicación principal (App), se utiliza el MiPrimerProvider para envolver el componente Dashboard, asegurando así que Dashboard y sus componentes hijos tengan acceso al estado global proporcionado por MiPrimerProvider.
import { MiPrimirContext } from “../providers/MiPrimirContext“;
export default function Dashboard() {
const { estado, setEstado } = useContext(MiPrimirContext);
return (
<>
{estado}
<button onClick={()=> setEstado(‘update State‘)}> updateState</button>
</>
);
}
Aquí podemos observar que el componente Dashboard está utilizando el contexto que creamos. Es tan simple como utilizar el hook useContext, pasándole como parámetro el contexto que creamos (MiPrimirContext). De esta manera, obtenemos acceso a los valores mantenidos por el contexto, que en este caso son estado y setEstado. Con esto, ya podemos hacer uso de ellos en nuestro componente.
