¿No necesitas useEffect? El plugin ESLint que hace que el código sea más limpio

¡Hola! Esto Kodik — tu guía en el mundo de la programación. No solo analizamos nuevas herramientas, sino que también compartimos trucos en nuestro Canal de Telegram — entra, ya hay más de 1500 desarrolladores discutiendo nuevas características y compartiendo experiencias.

Problema de usoEffect excesivo

React nos dio el gancho useEffect hace mucho tiempo, y se ha convertido en una «navaja suiza» universal para los efectos secundarios. Pero hay un efecto secundario: los desarrolladores a menudo lo usan donde no se necesita en absoluto.

👉 Como resultado, el código se convierte en un desastre: un montón de suscripciones, renderizaciones innecesarias, dependencias que te rompen la cabeza.

👉 Pero en muchos casos, puedes prescindir de cálculos simples o memorización.

¿Qué hace el plugin?

El plugin ESLint eslint-plugin-you-might-not-need-an-effect apareció como una cura para el hábito de «meter todo en useEffect».

Analiza tu código y te dice cuándo useEffect es redundante. Por ejemplo:

❌ Uso innecesario de useEffect solo para calcular el valor → mejor useMemo.

❌ Actualización del estado dentro del efecto sin dependencia → ¡hola, ciclo infinito!

❌ Efectos secundarios que se pueden llevar directamente al render o a la devolución de llamada.

A continuación se describen ejemplos de reglas:

Ejemplo 1: useEffect innecesario

// Malo
useEffect(() => {
  setValue(a + b);
}, [a, b]);

// Bien
const value = a + b;

Ejemplo 2: memorización en lugar de efecto

// Malo
useEffect(() => {
  const filtered = items.filter(fn);
  setFiltered(filtered);
}, [items, fn]);

// Bien
const filtered = useMemo(() => items.filter(fn), [items, fn]);

¿Cómo ayuda esto?

1. El código se convierte en más limpio y predecible.

2. Menos renderizaciones innecesarias → mayor rendimiento.

3. Empiezas a entender mejor donde realmente se necesita un efecto secundario, y donde está la «muleta».

useEffect es una herramienta poderosa, pero su reutilización conduce al caos. El plugin you-might-not-need-an-effect ayuda a «darse la mano» y aprender a escribir componentes React más fácilmente.

Intenta ponerlo en tu proyecto y verás cómo el código se vuelve más limpio.

Más análisis de este tipo en nuestro Canal de Telegram — allí discutimos nuevos complementos, compartimos cursos y analizamos las últimas tendencias en desarrollo.