Antipatrones de UseState en React Js
Escribir código de React limpio requiere una gestión de estado inteligente. Los malos patrones de estado provocan errores y código complejo.
Evita estos cuatro errores comunes:
- Agrupa datos relacionados
No crees hooks de estado separados para valores que cambian juntos.
En lugar de:
- const [x, setX] = useState(0);
- const [y, setY] = useState(0);
Usa un objeto:
- const [position, setPosition] = useState({ x: 0, y: 0 });
Esto mantiene tus actualizaciones limpias y organizadas.
- Evita estados conflictivos
Cuando múltiples booleanos rastrean el mismo proceso, creas errores.
En lugar de tener:
- isSubmitting
- isSubmit
Usa una única cadena de estado:
- status: 'TYPING'
- status: 'SUBMITTING'
- status: 'SUBMITTED'
Deriva la lógica de tu UI de esta única fuente de verdad.
- Elimina el estado redundante
Si puedes calcular un valor durante el renderizado, no lo pongas en el estado.
No almacenes:
- firstName
- lastName
- fullName
Solo almacena el nombre y el apellido. Calcula el nombre completo sobre la marcha:
- const fullName = firstName + " " + lastName;
Además, nunca almacenes props en el estado. El estado solo se inicializa una vez. Si tu prop cambia, el estado no se actualizará. Usa la prop directamente.
- Deja de duplicar datos
No almacenes los mismos datos en dos estados diferentes.
Si tienes una lista de tareas y una tarea seleccionada, no almacenes el objeto de la tarea completo en ambos lugares. Esto dificulta las actualizaciones.
En su lugar:
- Almacena la lista de tareas.
- Almacena solo el
selectedTaskId. - Busca la tarea en la lista usando ese ID durante el renderizado.
Esto garantiza que la tarea seleccionada siempre coincida con los datos más recientes de tu lista.
Fuente: https://dev.to/kkr0423/reactjs-usestate-antipatterns-58i9