Hace unas semanas, al revisar la newsletter de TLDR Dev, me encontré con el artículo de Alvin Sng en Twitter, que habla de cómo en Factory han prohibido el uso de useEffect(). Al principio lo empecé a leer con escepticismo, pero profundizando vi que hasta la propia documentación de React tiene una guía al respecto.
Según la documentación oficial, deberíamos usar useEffect solo para cosas muy específicas:
- Sincronizar con sistemas externos: Para conectar nuestros componentes con elementos que React no controla.
- Ejemplos: Manipular el DOM directamente, integrar bibliotecas de terceros (como un mapa), o establecer suscripciones a redes (como un WebSocket).
- Ejecutar lógica “detonada” por la aparición del componente: Para código que debe ejecutarse exclusivamente porque el componente se mostró en la pantalla.
- Ejemplo: Enviar un evento de analíticas (como registrar una visita o acción).
- Obtener datos: Para pedir datos a un servidor.
- Ejemplo: Hacer una petición a una API cada vez que cambian los parámetros de búsqueda. (Nota: React aclara que esto es válido, pero hoy en día recomiendan usar herramientas especializadas para el fetching de datos).
Y la verdad es que solemos (me incluyo el primero) usar el useEffect() por encima de nuestras posibilidades, más allá de para lo que fue pensado. Es una herramienta súper útil, pero al usarla para todo provocamos una serie de errores que van desde loops infinitos hasta re-renderizados que no son necesarios y me propuse mejorar un pequeño proyecto que tengo.