React
Explica cómo mover estado al ancestro común para sincronizar componentes y mantener una única fuente de verdad sin duplicar datos relacionados.
Cuando dos componentes deben mantenerse sincronizados, mueve el estado al ancestro común más cercano y distribuye datos y eventos mediante props.
function TemperatureCalculator() {
const [temperature, setTemperature] = useState("");
return (
<>
<TemperatureInput value={temperature} onChange={setTemperature} />
<Preview value={temperature} />
</>
);
}Cada dato mutable debe tener un propietario claro. No significa que todo el estado deba ser global, sino que cada pieza tenga una única fuente autoritativa.
Un componente es controlado cuando su valor importante llega por props y los cambios se comunican mediante callbacks.
function Toggle({ checked, onChange }: ToggleProps) {
return (
<button onClick={() => onChange(!checked)}>
{checked ? "Activo" : "Inactivo"}
</button>
);
}Mantén estado local cuando ningún otro componente lo necesita. Elevarlo innecesariamente aumenta acoplamiento y renders.
Eleva el estado para coordinar, no para centralizar todo. El propietario debe ser el ancestro común más cercano que necesita controlar el dato.
Cuando dos componentes necesitan coordinar el mismo dato, busca el ancestro común más cercano que deba tomar decisiones sobre él.
ProductPage
/ \
FilterPanel ProductResults
\ /
query stateSi FilterPanel modifica la búsqueda y ProductResults la consume, ProductPage puede poseer query y distribuir valor y callback.
function ProductPage() {
const [query, setQuery] = useState("");
return (
<>
<SearchField value={query} onChange={setQuery} />
<ProductResults query={query} />
</>
);
}Cada dato mutable necesita una autoridad clara, pero una aplicación puede tener muchas fuentes de verdad:
La pregunta es quién tiene la última palabra para ese dato, no dónde centralizar toda la aplicación.
function Parent() {
const [selectedId, setSelectedId] = useState<string | null>(null);
return <Child initialSelectedId={selectedId} />;
}function Child({ initialSelectedId }: Props) {
const [selectedId, setSelectedId] = useState(initialSelectedId);
}Ahora existen dos valores que pueden divergir. El prefijo initial es correcto solo si el hijo crea un borrador independiente. Si deben permanecer sincronizados, el hijo debería ser controlado.
type AccordionProps = {
value: string | null;
onValueChange: (value: string | null) => void;
};Ventajas:
Costes:
<Accordion defaultValue="details" />El componente administra su estado y expone configuración inicial. Es útil cuando nadie externo necesita controlar el valor.
Una API puede ofrecer ambos modos, pero debe definir claramente:
value controla.defaultValue solo inicializa.Mover cada hover, input o toggle a App crea acoplamiento y trabajo amplio.
Mantén local:
Eleva solo cuando otro componente necesita leer, modificar o persistir el dato.
<Layout sidebar={<UserMenu user={user} />} />Evita que niveles intermedios conozcan props que solo necesitan pasar.
Adecuado cuando muchas ramas necesitan una dependencia compartida. No elimina la necesidad de definir ownership.
Filtros, página, orden o tabs compartibles pueden vivir en search params.
Aporta cuando múltiples ramas independientes necesitan suscripciones y selectores.
function Toggle({ checked, onChange }: Props) {
function handleClick() {
onChange(!checked);
}
return <button onClick={handleClick}>{checked ? "Activo" : "Inactivo"}</button>;
}No guardes una copia local y uses un effect para avisar después. El evento ya conoce la intención y evita un render intermedio.
function OrdersPage({ orders }: { orders: Order[] }) {
const [selectedId, setSelectedId] = useState<string | null>(null);
const selectedOrder = orders.find((order) => order.id === selectedId) ?? null;
return (
<div>
<OrderList
orders={orders}
selectedId={selectedId}
onSelect={setSelectedId}
/>
<OrderDetails order={selectedOrder} />
</div>
);
}Solo se guarda el ID. El objeto seleccionado se deriva, evitando conservar una copia que podría quedar obsoleta si cambia orders.
Elevar state amplía la región que puede renderizar. Antes de memoizar todo, revisa si el propietario está más alto de lo necesario.
Pero no dupliques state únicamente para reducir renders. Primero conserva una fuente correcta; después mide y crea fronteras mediante composición, componentes separados o stores selectivas.
Cuando dos controles se desincronizan:
Estado derivado y datos redundantes enseña a reducir state antes de elegir dónde colocarlo.