Lifting State Up: cómo los componentes infantiles de React se comunican con los padres

React utiliza un flujo de datos unidireccional de padre a hijo, nunca de hijo a padre. Pero, ¿qué sucede cuando un niño necesita comunicarse con sus padres?

Aprenda cómo levantar el estado para permitir que un componente secundario envíe datos a un componente principal.

Componentes en reaccionar

React organiza los componentes en una jerarquía donde los componentes secundarios se anidan dentro de los componentes principales. Esta jerarquía forma los componentes básicos de la interfaz de usuario de la aplicación.

</ParentComponent>

Cada componente secundario recibe datos, conocidos como accesorios, de su componente principal. Los accesorios de React pueden contener varios tipos de datos, como matrices, objetos, cadenas o incluso funciones. El componente secundario no puede manipular directamente estos datos.

Considere el siguiente componente, llamado Botón contador:

const CounterButton = () => {
const [count, setCount] = useState(0)
const handleIncrement = () => {
 setCount(count + 1)
 }
return (
Increment</button>
 )
}

El componente mantiene un valor de estado llamado contar que aumenta cada vez que un usuario hace clic en el botón.

Supongamos que anidó el componente CounterButton dentro de otro componente llamado Inicio:

const Home = () => {
return (

 )
}

Si desea mostrar el valor de recuento del Botón contador componente dentro del componente Inicio, se encontraría con un desafío.

Como se mencionó, React impone un flujo de datos unidireccional de padre a hijo. Por lo tanto, el componente CounterButton no puede compartir directamente el valor del estado de conteo con el componente Inicio.

Para solucionar esto, es necesario levantar el Estado.

Cómo elevar el estado para compartir datos entre componentes

Elevar el estado se refiere a mover el estado de un componente más arriba en el árbol de componentes, a un componente principal. Una vez que levante el estado, puede pasarlo a los componentes secundarios como valores de propiedad.

En el ejemplo contrario de antes, necesitarías mover el estado de conteo y el manejarIncremento función al componente Inicio. Luego deberá pasar la función handleIncrement al componente CounterButton como accesorio.

const Home = () => {
const [count, setCount] = useState(0)
const handleIncrement = () => {
 setCount(count++)
 }
return (

{count}</p>
 )
}

A continuación, debe modificar el componente CounterButton para aceptar la función handleIncrement y llamarla cuando un usuario hace clic en el botón.

const CounterButton = ({handleIncrement}) => {
return (
Increment</button>
 )
}

El levantamiento del estado centraliza los datos y transfiere la responsabilidad de administrando el estado del niño al padre.

Además de ayudarlo a mostrar datos en el componente principal, eliminar el estado puede ayudarlo a sincronizar datos entre múltiples componentes.

Supongamos que tiene un componente de encabezado y pie de página anidado dentro del componente principal y cada uno de estos componentes también muestra el recuento compartido. Para compartir este valor, puede pasarlo a estos componentes como accesorios.

const Home = () => {
const [count, setCount] = useState(0)
const handleIncrement = () => {
 setCount(count++)
 }
return (



 )
}

Sin embargo, hay que tener cuidado al levantar el estado para no terminar en una situación conocida como perforación de puntal.

El desafío de la perforación de puntal

A medida que su aplicación crece, es posible que descubra que varios componentes más profundos en el árbol de componentes necesitan acceso a un estado compartido. Para que este estado compartido esté disponible para los componentes anidados, deberá pasar accesorios a través de componentes intermediarios. Este proceso puede conducir a la perforación de puntal.

La perforación de apoyo dificulta el seguimiento de cómo fluyen los datos. y puede generar código difícil de mantener.

Para mitigar la perforación de hélice pero aún así compartir datos de todos los componentes, considere usar el contexto de React. El contexto de React le permite centralizar el estado para que esté disponible en toda la aplicación.

Compartir datos en React usando accesorios

Cuando necesite compartir datos de un componente secundario con su componente principal, eleve el estado al componente principal y luego pase la función que actualiza el estado al componente secundario como accesorios.

En los casos en que el componente secundario esté profundamente anidado en el árbol de componentes, utilice una herramienta de administración de estado como React Context o una herramienta de terceros como React Redux para evitar la perforación de accesorios.