Estado derivado y cómo evitar renderizados adicionales

El estado derivado son valores calculados a partir del state o las props existentes (por ejemplo, fullName, totales y filtros). Mantenga una única fuente de verdad para reducir errores y re-renders.

• Derive el valor si puede volver a calcularse a partir de otros datos.
• Almacene únicamente la entrada del usuario o los datos del servidor que no pueda calcular.
• Memorice los valores derivados pesados.

Evite sincronizar estados duplicados. Este ejemplo mantiene fullName en el state y lo actualiza en un effect; es fácil que se desincronicen y provoca renders adicionales.

Calcule fullName a partir de first/last. No necesita sincronización y hay menos re-renders. Utilice useMemo si combinar los datos requiere mucho trabajo.

Para valores derivados pesados (por ejemplo, ordenar o dar formato), utilice useMemo para que el resultado solo se vuelva a calcular cuando cambien las entradas.

Evite el estado duplicado y los effects de sincronización. Prefiera los valores derivados y memorice el trabajo pesado. Mantenga precisos los arrays de dependencias para evitar datos obsoletos.

Repaso: mantenga una única fuente de verdad. Calcule fullName, los totales y los filtros a partir de los datos existentes. Memorice el trabajo pesado para omitir renders innecesarios.