𝗣𝗿𝗶𝗻𝗰𝗶𝗽𝗶𝗼𝘀 𝗱𝗲 𝗹𝗼𝘀 𝗥𝗲𝗮𝗰𝘁 𝗛𝗼𝗼𝗸𝘀
Deja de usar useEffect para todo. Muchos desarrolladores hacen un mal uso de este hook. Esto crea errores y hace que el código sea difícil de leer.
Limita el uso de useEffect.
Intenta usar un solo useEffect por página. Usar muchos hooks para el mismo estado causa confusión. Pierdes el rastro de qué hook actualiza qué estado.
Deja de usar useEffect para eventos de usuario.
No uses useEffect para clics o toques. En su lugar, utiliza manejadores de eventos.
- Mal: Usar useEffect para actualizar el estado después de un clic.
- Bien: Usar una función como onClickBar para actualizar el estado.
Tipos de eventos que deberías conocer:
- Navegación de página y renderizados iniciales.
- Cambios en la conexión de red.
- Actualizaciones de WebSocket o del servidor en tiempo real.
Las acciones de usuario como los clics no pertenecen a useEffect. Utiliza manejadores de eventos directos para estas acciones.
Divide los componentes por props.
Si usas una prop booleana para cambiar la lógica, divide tu componente. No construyas un único componente que gestione tanto la creación como la actualización de datos.
Un solo componente con muchas sentencias "if" crece demasiado. Esto hace que la aplicación sea difícil de mantener.
- Mal: Un componente con una prop "isAdd" que cambia los campos del formulario.
- Bien: Crear un "RegisterComponent" y un "UpdateComponent".
Los componentes pequeños son más fáciles de probar. Se ejecutan más rápido. Se mantienen limpios.
Fuente: https://dev.to/kkr0423/reactjs-the-principle-of-the-hook-3c31