El hook useEffect en React permite encapsular la lógica pesada o asíncrona de un componente para que solo se ejecute cuando realmente se necesita, evitando que cada render dispare llamadas costosas a una API o cálculos lentos. Es una herramienta clave para cualquier desarrollador frontend que busque optimizar la experiencia de usuario y el rendimiento de su aplicación.

Por qué necesitas useEffect en tus componentes de React

Cada vez que cambia un estado, React vuelve a renderizar el componente y reejecuta toda su lógica interna. El problema aparece cuando dentro de esa lógica hay procesos que tardan segundos, como una consulta a un backend o un cálculo pesado.

Sin protección, esos procesos se repiten en cada render, aunque solo deban correr una vez. Aquí entra useEffect, el hook que aísla esa parte costosa y la ejecuta bajo tus reglas.

¿Qué hace useEffect en React? Encapsula lógica que no debe correr en cada render, como llamadas a una API o procesos asíncronos, y la ejecuta solo cuando tú decidas: una vez al inicio, o cuando cambien ciertos valores específicos.

Cómo se comporta useEffect frente al orden de ejecución [01:50]

Un experimento sencillo con tres console.log lo deja claro. Si tienes Log 1, Log 2 y Log 3 en orden, pero envuelves el Log 2 dentro de un useEffect, el navegador imprime Log 1, Log 3 y al final Log 2.

Es decir, lo que vive dentro de un useEffect no respeta el orden lineal del código. React lo guarda y lo ejecuta después de procesar el resto de la lógica del componente.

Cuál es la sintaxis básica del hook

La estructura es directa: llamas a React.useEffect y le pasas una función como primer argumento. Dentro de esa función va la lógica que quieres proteger.

js React.useEffect(() => { console.log('Log 2'); });

Con solo esto, el efecto corre después de cada render, pero al final del flujo, no en línea con los demás.

Para qué sirve el segundo argumento de useEffect

El segundo argumento es un array de dependencias y es la clave para controlar cuándo se ejecuta el efecto. Tienes tres escenarios posibles según lo que pongas dentro.

• Sin segundo argumento: el efecto se ejecuta después de cada render.
• Array vacío []: el efecto se ejecuta una sola vez, en el primer render.
• Array con dependencias [totalTodos]: el efecto se ejecuta cuando cambia ese valor específico, sin importar qué otros estados se muevan.

Qué pasa con un array vacío [04:30]

Al enviar [] como segundo argumento, el contenido del efecto corre solo en el primer render. Si después escribes en un input y cambia el estado searchedValue, el componente se vuelve a renderizar, pero el console.log dentro del useEffect no aparece de nuevo.

Eso es exactamente lo que necesitas para una llamada a una API que solo debe ocurrir al montar el componente.

Qué pasa cuando envías un estado al array [06:00]

Si pasas un estado derivado como totalTodos dentro del array, el efecto se reactiva únicamente cuando ese valor cambia. Otros cambios de estado provocarán renders, pero no dispararán el efecto.

¿Cuándo se ejecuta useEffect con dependencias? Solo cuando cambia alguno de los valores listados en el array. Si modificas otros estados del componente, el efecto se queda quieto.

Cómo aplicar useEffect a una llamada asíncrona real

Imagina un componente TodoMessage que muestra un mensaje obtenido desde una función API con await. Esa función es asíncrona y puede tardar cinco segundos en responder.

Sin useEffect, cada render dispararía una nueva llamada y el usuario vería la pantalla en blanco esperando. La solución combina tres piezas: un estado inicial vacío, un useEffect con array vacío y un render condicional.

• Inicializas el estado como un objeto vacío {}.
• En el JSX preguntas si existe la propiedad message; si no, muestras un texto de cargando.
• Dentro del useEffect haces el llamado a la API y, cuando responde, actualizas el estado con la información recibida.

De esta forma, el usuario ve cargando desde el primer instante, la API se consulta una sola vez, y cuando termina, el estado cambia y el componente muestra el mensaje real.

Cómo viaja un efecto por la fábrica de render

React tiene un guardián de los efectos que intercepta cada efecto antes de pasar por la fábrica de render. Lo aparta, deja que el resto de la lógica se ejecute, y después le da paso al efecto.

Cuando ese efecto actualiza el estado, se dispara un nuevo render. Pero como tiene un array vacío, el guardián lo reconoce y le dice que ya cumplió su trabajo. El componente se actualiza con la nueva información, sin volver a llamar a la API.

Qué ganas al usar useEffect correctamente

Dos beneficios claros cambian la calidad de tu aplicación.

• Mejor experiencia para el usuario, porque ve estados intermedios como cargando en lugar de pantallas vacías.
• Mejor rendimiento, porque los procesos pesados solo se ejecutan cuando son estrictamente necesarios.

En la siguiente etapa puedes aplicar este mismo patrón para crear estados de carga y de error mientras consultas datos desde local storage o cualquier otra fuente asíncrona.

¿Ya tienes claro en qué parte de tu app vas a meter tu primer useEffect? Cuéntame en los comentarios qué llamada asíncrona vas a optimizar primero.