Pasar estado a componentes secundarios en React

1. Finalidad del Objeto de Estado
2. Transmitir datos de componentes principales a secundarios
3. Pasar estado a componentes secundarios en React
4. API de contexto para pasar el estado a los componentes secundarios

Los desarrolladores front-end a menudo tienen que configurar un patrón de estado en el lado del cliente para mantener las funciones dinámicas de su aplicación web. Esto es posible sin marcos, pero requiere mucho esfuerzo.

React tiene un sistema de estado interno y elimina muchos dolores de cabeza asociados con la gestión del estado.

Finalidad del Objeto de Estado

En React, usamos el estado para almacenar datos externos, entradas de usuarios y otros valores que pueden cambiar. Por ejemplo, podemos tener una entrada de texto que actualice un valor de estado específico y luego haga referencia y muestre el valor de estado en JSX.

Por lo tanto, la entrada actualiza el estado y luego hacemos referencia al estado para mostrar los valores. Los cambios en los valores del estado activan una nueva representación.

Transmitir datos de componentes principales a secundarios

La forma más común y sencilla de pasar el estado de padres a hijos es hacerlo manualmente usando props. Desde el componente en la parte superior del árbol a sus hijos directos, luego ese hijo lo recibe y lo pasa a través de props a sus propios hijos, y así hasta llegar al destino final.

Veamos un ejemplo:

export default function App() {
  return (
    <div className="App">
      <Box number={11} />
      <Box number={15} />
      <Box number={18} />
    </div>
  );
}
function Box(props) {
  return <div>{props.number}</div>;
}

Hemos transmitido el valor de padres a hijos. En este caso, tenemos que pasarlo hacia abajo solo un nivel: del padre al hijo directo.

Si el componente secundario tenía su propio componente secundario, que tenía sus propios elementos secundarios, podría llevar mucho tiempo pasar los datos del elemento principal al elemento secundario.

En algunos casos, puede pasar datos a componentes secundarios que no usan estos datos. Esto se llama perforación de apoyo.

Si notas que lo haces mucho, debes buscar alternativas.

Pasar estado a componentes secundarios en React

La documentación oficial de React recomienda que los desarrolladores almacenen todos los datos de estado en el componente principal; esta práctica se llama Fuente Única de la Verdad. Un componente secundario puede tener un elemento de entrada, como un cuadro de texto.

React le permite pasar la referencia a la función que actualiza el estado en el componente principal. Puede llamar a la referencia a esta función en el componente secundario para actualizar el estado en el componente principal en función del valor local de este componente secundario.

La mayoría de las veces, las aplicaciones web de React están estructuradas como árboles de componentes. Hay un componente padre con varios hijos.

Cada uno de estos hijos puede tener varios hijos propios y puede haber docenas de niveles en un árbol de componentes. Y la clave es la reutilización de componentes, por lo que un componente puede tener docenas de instancias.

En React, el estado (y otros valores) se transmite de padre a hijo usando el objeto props. Funciona de manera similar a establecer un atributo en un elemento HTML normal.

En cambio, establecer este atributo personalizado en JSX hace que ese valor esté disponible para el componente secundario.

Veamos un ejemplo de pasar una variable de estado a un componente secundario:

import "./styles.css";
import { useState } from "react";
export default function App() {
  const [text, setText] = useState("");
  return (
    <div className="App">
      <input type="Text" onChange={(e) => setText(e.target.value)} />
      <Box paragraph={text} />
    </div>
  );
}
function Box(props) {
  return <div>{props.paragraph}</div>;
}

Demo en vivo

Los componentes secundarios no pueden pasar datos al principal. Este patrón se llama flujo de datos unidireccional.

Los datos de estado se almacenan en el padre y se transmiten a los componentes de los hijos.

En el ejemplo anterior, solo tenemos un padre y un hijo. En árboles de componentes simples como este, tiene sentido usar props; sin embargo, este enfoque se vuelve engorroso cuando hay demasiados componentes secundarios con sus propios hijos.

Afortunadamente, React ofrece una alternativa, que puede usar para hacer que los valores del padre estén disponibles instantáneamente en los componentes de los hijos sin pasarlos a todos los niveles.

API de contexto para pasar el estado a los componentes secundarios

La API de contexto en React permite a los desarrolladores pasar valores de estado a los componentes secundarios sin usar accesorios. Los datos se vuelven accesibles para todos los niños.

Esto es mucho más fácil que pasar individualmente una sola pieza de datos a muchos componentes secundarios.

Imagine que tenemos que pasar estos valores a muchos componentes secundarios. Tendremos que hacer algo como esto:

export default function App() {
  return (
    <>
      <Child darkMode={true} />
      <Child darkMode={true} />
      <Child darkMode={true} />
    </>
  );
}

function Child ({ darkMode }) {
  return (
    <>
      <Text darkMode={theme} />
      <Video darkMode={theme} />
      <Visual darkMode={theme} />
      <Card darkMode={theme} />
    </>
  );
}

En este componente, el componente principal en la parte superior tiene tres componentes <Niño>, que tienen componentes secundarios como <Texto>, <Video>, <Visual>, <Tarjeta> y más . Necesitamos transmitir estos datos a estos niños y a cualquier niño que puedan tener.

Mirando el código, se vuelve obvio que este enfoque es ineficiente.

Los valores de estado como los datos del tema (configuración del modo oscuro) y los datos del usuario (información de autenticación) pueden ser necesarios para personalizar las imágenes y la funcionalidad de los componentes secundarios. En lugar de pasarlo manualmente uno por uno, los desarrolladores de React pueden usar la API de contexto para pasar el estado a los componentes secundarios sin hacerlo a través de “accesorios”.

Use el contexto para pasar el estado a los componentes secundarios

La biblioteca de React contiene un método createContext() que los desarrolladores de React pueden usar para crear contexto. Es más fácil si desglosamos la implementación de Context API en cuatro sencillos pasos:

1. Crear contexto utilizando el método createContext().
2. Envuelva el proveedor de contexto alrededor del árbol de componentes.
3. Establezca la propiedad de valor en el proveedor de contexto igual al valor que desea compartir en todo el árbol de componentes.
4. Acceda al valor de los componentes secundarios utilizando un enlace useContext().

Vamos a crear un código de ejemplo y seguir cada paso.

Primero, definimos un componente funcional, que será el padre de otros componentes. Usamos el método createContext() para crear contexto en este componente principal y almacenar la referencia en la variable dataContext.

import "./styles.css";
import React from "react";
import { useState, useContext } from "react";
const dataContext = React.createContext();

export default function App() {
  const [darkMode, setDarkMode] = useState(true);
  return (
    <dataContext.Provider value={darkMode}>
      <div>
        <Child />
      </div>
    </dataContext.Provider>
  );
}
function Child() {
  return (
    <div>
      <Grandchild />
    </div>
  );
}
function Grandchild() {
  const setting = useContext(dataContext);
  console.log(setting);
  return (
    <div
      style={{
        width: 300,
        height: 300,
        backgroundColor: setting ? "black" : "white",
        color: setting ? "white" : "black"
      }}
    >
      Hello, World
    </div>
  );
}

En el componente principal Aplicación, tenemos un componente secundario que tiene un componente secundario propio.

Envolvemos todo el árbol de componentes en el componente principal con un proveedor de contexto y establecemos el atributo darkMode en el proveedor de contexto. Este valor pasa a estar disponible para todos los niños.

Debemos usar el gancho useContext() en los componentes secundarios. Esto es necesario para usar el valor establecido en el proveedor de contexto en el componente principal.

En este caso, usamos el valor darkMode para establecer estilos condicionales en el componente secundario. Puede intentar cambiar este valor en el componente principal (cambie el valor inicial pasado al enlace useState()).

Además, vaya a la consola y vea la confirmación de que el estado darkMode se transmitió con éxito del padre al hijo a través de la API de contexto.