Elevar el estado y compartir datos

Coloca cada porción de estado en el ancestro común más cercano para compartir datos entre varios componentes sin duplicarlos.

7 min · 3 preguntas

Dos componentes hermanos necesitan mostrar los mismos datos: un campo de búsqueda y la lista que filtra, por ejemplo. Un estado local en cada uno no puede funcionar, porque no pueden verse entre sí. La solución es elevar el estado hasta su ancestro común más cercano: el padre posee los datos y los devuelve hacia abajo a través de props.

import { useState } from "react";

function ProductPage({ products }) {
  const [query, setQuery] = useState("");

  return (
    <>
      <SearchBar query={query} onChange={setQuery} />
      <ProductList products={products} query={query} />
    </>
  );
}

Los hijos se convierten entonces en componentes controlados: reciben el valor de solo lectura y, para cambiarlo, llaman a la función de callback proporcionada por el padre. Los datos fluyen hacia abajo a través de props, las solicitudes de cambio fluyen hacia arriba a través de funciones. Este flujo unidireccional hace que el comportamiento de la aplicación sea fácil de seguir.

function SearchBar({ query, onChange }) {
  return (
    <input
      value={query}
      onChange={(e) => onChange(e.target.value)}
      placeholder="Search for a product"
    />
  );
}

function ProductList({ products, query }) {
  const visible = products.filter((p) =>
    p.name.toLowerCase().includes(query.toLowerCase())
  );
  return (
    <ul>
      {visible.map((p) => <li key={p.id}>{p.name}</li>)}
    </ul>
  );
}

Cada dato debe tener una única fuente de la verdad. Si dos componentes almacenan cada uno su propia copia del mismo estado, las copias acabarán divergiendo: una se actualiza, la otra no, y la interfaz se vuelve inconsistente. Elevar el estado elimina ese riesgo. Cuando los datos deben atravesar muchos niveles, la composición (próxima lección) y luego el contexto aligeran el paso de props.

Prueba de conocimientos

Comprueba que has retenido los puntos clave de esta lección.

1. ¿Dónde deberías colocar un estado que necesitan dos componentes hermanos?
   • En el primero de los dos hermanos, que se lo pasa al otro
   • En su ancestro común más cercano
   • En una variable global declarada fuera de React
   • En cada uno de los dos hermanos, sincronizados a mano
2. ¿Cómo puede un componente hijo modificar un estado que posee su padre?
   • Modificando directamente la prop recibida
   • Llamando a una función de callback pasada como prop por el padre
   • Usando useState con el mismo valor inicial que el padre
3. ¿Por qué evitar almacenar el mismo dato en dos porciones de estado distintas?
   • Consume demasiada memoria
   • React prohíbe dos llamadas a useState con el mismo valor inicial
   • Las dos copias acaban desincronizándose y la interfaz se vuelve inconsistente