Contexto en React
Antes de pasar a estudiar el siguiente hook, necesitamos considerar el concepto de contexto en React.
Normalmente pasábamos datos de componentes
padres a hijos mediante
props.
Este método es bueno si tienes pocos
componentes y no necesitas pasar
los props del padre al componente que
necesitas a través de componentes hijos más de
2-3 veces.
Este método también puede volverse extremadamente incómodo y llevar a varios problemas, si estos props no se usan en absoluto en los componentes intermedios (este problema se llama prop drilling), o necesitas pasar los mismos datos a una gran cantidad de componentes.
En estos casos, el contexto puede ayudarnos, ya que permite que los datos del componente padre estén disponibles para cualquier componente hijo, independientemente de su ubicación en el árbol de componentes, sin pasarlos a través de props. En consecuencia, recibirán los datos solo aquellos componentes que los necesiten.
Para usar el contexto,
necesitas crearlo. Primero, creemos un archivo
MyContext.js e importemos la función
createContext en él:
import { createContext } from 'react';
Ahora creemos el objeto de contexto, guardémoslo
en la variable MyContext, que no
olvidemos exportar. En nuestro
caso, establecimos en createContext
el valor inicial null, ya que no es
esencial para nosotros (podríamos haber dejado solo
paréntesis vacíos). El valor predeterminado
aparecerá al leer el contexto, si no se
encuentra ningún otro. Este valor puede
ser de cualquier tipo:
export const MyContext = createContext(null);
En la siguiente lección crearemos una aplicación de varios componentes, ubicados en archivos separados. Si todos los componentes estuvieran en un mismo archivo, entonces para crear el contexto no haríamos un archivo separado y no lo exportaríamos.
Ahora importemos MyContext.js
en el componente vacío App -
en el componente desde el cual vamos a
pasar los datos:
import { MyContext } from './MyContext.js';
Cree un archivo MyContext.js e
impórtelo en el componente vacío
App, como se describe en la lección.
