En los proyectos React, a menudo usamos useEffect por reflejo, pero este enfoque puede a veces complicar tu código innecesariamente. En este artículo, veremos casos donde no necesitas useEffect y cómo optimizar tu código evitando usarlo incorrectamente.
Entender el papel de useEffect
El hook useEffect es útil para manejar efectos secundarios como suscripciones u operaciones que deben ejecutarse fuera del flujo principal de renderizado. Sin embargo, algunos casos de uso comunes pueden simplificarse sin useEffect.
1. Inicializar el estado sin useEffect
A menudo quieres inicializar un estado basado en props o valores iniciales al montar el componente. En lugar de usar useEffect para definir este estado, puedes hacerlo directamente con useState, lo que hará tu código más claro y prevendrá llamadas innecesarias.
Mala práctica con useEffect:
Buena práctica sin useEffect:
Aquí, podemos simplemente inicializar el estado greeting usando una función en useState:
Este enfoque hace el código más conciso y evita añadir un efecto superfluo que podría ralentizar tu aplicación.
2. Calcular valores derivados
Si necesitas calcular un valor en función del estado o las props, intenta usar una variable derivada o un memo en lugar de useEffect.
Ejemplo con useEffect (a evitar):
Solución sin useEffect:
Aquí, el valor total puede calcularse directamente durante el renderizado, sin depender de useEffect:
Este método no solo es más limpio, sino que elimina la necesidad de manejar estados adicionales.
3. Usar useMemo para cálculos pesados
Para cálculos costosos o dependientes de varias variables, usa useMemo para evitar reejecutar la lógica en cada renderizado, sin necesidad de useEffect para manejar el estado.
Ejemplo con useEffect:
Enfoque optimizado con useMemo:
Aquí, useMemo permite memorizar el resultado sin tener que manejar un efecto, lo que hace el componente más predecible y eficiente.
4. Sincronizar las propiedades de un componente controlado
Para manejar entradas controladas, no necesitas usar useEffect para sincronizar los valores de los inputs con el estado del componente padre. Simplemente usa las props y las funciones de callback para manejar este estado eficientemente.
Ejemplo con useEffect (innecesario):
Solución sin useEffect:
El uso directo de las props simplifica el código y mejora el rendimiento al reducir el número de actualizaciones de estado innecesarias.
5. Manipular el DOM directamente en el renderizado
Si quieres aplicar estilos o clases basados en el estado, a menudo es innecesario usar useEffect. React maneja muy bien este tipo de sincronización durante el renderizado.
Ejemplo con useEffect:
Solución sin useEffect:
Conclusión
Evitar useEffect permite a menudo simplificar tu código y mejorar el rendimiento de tu aplicación React. Al reevaluar las razones para usar un efecto, podrás crear componentes más claros y evitar errores relacionados con dependencias mal configuradas. La clave está en identificar los casos donde el estado, los valores derivados o useMemo son suficientes para satisfacer tus necesidades sin efectos secundarios.
