Práctica · Estado
estado derivado
Si puedes calcularlo, no lo guardes
Cada useState es una fuente de verdad independiente. Cuando un valor puede calcularse a partir de otro estado o prop, guardarlo por separado crea dos verdades que tarde o temprano se desincronizan.
El problema
Guardar en estado algo que ya existe en otro estado (o en las props) significa que tienes que mantenerlos sincronizados manualmente — con useEffect o con múltiples setState por evento. Cualquier camino donde olvides actualizar uno introduce un bug silencioso.
La solución
Calcula el valor derivado directamente durante el render. Es una variable normal, no un useState. Si el cálculo es costoso y la lista es muy larga, envuélvelo en useMemo — pero solo si hay evidencia real de lentitud, no de forma preventiva.
Tropiezos comunes
- 01Derivar con useEffect introduce un render extra: el estado viejo se renderiza primero, luego el efecto actualiza el derivado y hay otro render.
- 02No todo lo que parece derivado lo es: si el usuario puede editarlo independientemente del origen, entonces sí necesita su propio estado.
- 03useMemo solo para cálculos costosos — filtrar un array de 20 items no lo justifica.
¿Fue útil?
Inicia sesión para dar feedback