¿Cómo modelarías estado derivado para evitar duplicidad y fallos de sincronización?

"¿Cómo modelarías estado derivado para evitar duplicidad y fallos de sincronización?" toca un punto muy concreto de React: cómo tomar decisiones de gestión de estado sin esconder el problema bajo una abstracción vistosa.

La respuesta mejora cuando explicas qué parte del problema resuelves ahora con gestión de estado en React para "Cómo modelarías estado derivado para evitar duplicidad y fallos de sincronización", qué dejas derivado en estado derivado y cómo detectarías pronto que la solución empieza a quedarse corta.

Qué evalúa el entrevistador

• Si distingues qué parte de "Cómo modelarías estado derivado para evitar duplicidad y fallos de sincronización" pertenece a gestión de estado y cuál debería resolverse en estado derivado.
• Si conviertes la respuesta en criterios observables: límites claros, impacto en el mantenimiento y forma de detectar regresiones.
• Si identificas la fuente de verdad, el estado derivado y los puntos donde podría aparecer sincronización manual o duplicada.

Respuesta sólida

• Nombra primero la fuente de verdad y deja claro qué datos deberían derivarse en vez de almacenarse dos veces.
• Explica dónde viviría cada pieza de estado: local si solo afecta a una interacción, compartido si cruza componentes y remoto si depende del servidor.
• Añade cómo evitarías sincronizaciones manuales, renders accidentales y errores por datos obsoletos.

Compromisos y errores comunes

• Duplicar estado entre store, formularios, URL o caché acaba generando inconsistencias que son difíciles de reproducir.
• Mover demasiado pronto una preocupación al estado global hace visible el problema, pero no lo arregla.

Ejemplo de código

No se trata de memorizar esta implementación, sino de enseñar cómo ordenar el flujo de gestión de estado en React sin mezclar responsabilidades ni perder de vista estado derivado.

import { memo, useMemo, useState } from 'react';

const ProductList = memo(function ProductList({ products }: { products: string[] }) {
  return <ul>{products.map((product) => <li key={product}>{product}</li>)}</ul>;
});

export function SearchPanel({ products }: { products: string[] }) {
  const [query, setQuery] = useState('');
  const visibleProducts = useMemo(
    () => products.filter((product) => product.toLowerCase().includes(query.toLowerCase())),
    [products, query],
  );

  return (
    <>
      <input value={query} onChange={(event) => setQuery(event.target.value)} />
      <ProductList products={visibleProducts} />
    </>
  );
}

En entrevista yo usaría un ejemplo de este tamaño para "Cómo modelarías estado derivado para evitar duplicidad y fallos de sincronización": suficiente para demostrar criterio y lo bastante pequeño como para discutir riesgos y variantes sin perderse.

Ejemplo o caso real

Yo lo bajaría a un escenario reconocible de React: una pieza donde "Cómo modelarías estado derivado para evitar duplicidad y fallos de sincronización" aparece de forma recurrente, ya ha dejado señales en revisión o en soporte y mezcla gestión de estado con estado derivado. Si la decisión mejora claridad, observabilidad y velocidad de cambio en ese trozo, entonces merece escalarla; si no, la dejaría local y documentada.

Frase corta de entrevista

Primero aclaro qué problema resuelvo con gestión de estado y luego elijo la técnica; no al revés.