efectos innecesarios
useEffect no es un ciclo de vida
useEffect existe para sincronizar con sistemas externos (APIs, DOM, timers). Usarlo para transformar datos o calcular estado en respuesta a otro estado es el patrón más común que causa renders dobles, bugs de sincronización y código difícil de seguir.
Cuándo NO usar useEffect
Si el código dentro del efecto solo lee props o estado y actualiza otro estado, no necesita un efecto. Hazlo durante el render: calcula el valor derivado directamente como una variable. El resultado es el mismo pero sin el render extra que produce el efecto al ejecutarse después del primer render.
Cuándo SÍ usar useEffect
Reserva useEffect para sincronización real con el mundo exterior: fetch, suscripciones a eventos del DOM o APIs externas, manipulación directa de un nodo DOM, o integración con librerías de terceros que operan fuera del árbol de React.
Tropiezos comunes
- 01useEffect con setState siempre produce al menos un render extra: el inicial con el estado vacío y otro cuando el efecto actualiza.
- 02Encadenar efectos (un efecto actualiza estado que dispara otro efecto) es casi siempre una señal de que la lógica debería estar en el render o en un manejador de evento.
- 03fetch en useEffect sin cleanup puede actualizar estado de un componente ya desmontado — siempre retorna una función que cancela la petición o ignora la respuesta.