Efectos y ciclo de vida en componentes React con useEffect

Clase 4 de 19 • Curso de React.js: Manejo Profesional del Estado

Clase anteriorSiguiente clase

Catherine Mejias

student•

Yo si quiero un curso de optimización de render en react 🙋🏾‍♀️

Mauro Brandan Valdez

student•

Estaría muy bueno!! :hand:

JOSIMAR JOSUE BONILLA VICTORIA

student•

super yo también

Max Andy Diaz Neyra

student•

React.useEffect es un método con 2 parámetros:

El primero, siempre se usa y es una función a ejecutar.
El segundo, opcional e importante, nos indica cuando se va a ejecutar nuestro primer parámetro. Los posibles valores de este parámetro son:
1. Ningun valor:
  esta función se ejecutará cada vez que nuestro componente haga render (es decir, cada vez que haya cambios en cualquiera de nuestros estados).
2. Arreglo vacio:
  nuestro efecto solo se ejecuta una vez, cuando recién hacemos el primer render de nuestro componente.
3. Arreglo no vacio: O también podemos enviar un array con distintos elementos para decirle a nuestro efecto que no solo ejecute en el primer render, sino también cuando haya cambios en esos elementos del array.

Luis Alejandro Vera Hernandez

student•

Esta bueno tu aporte, muchas gracias

Ronaldo Delgado

student•

buen aporte!

Pedro Alvarado Garcia

student•

El React.useEffect recibe dos parámetros: el primer argumento es una función y el segundo argumento nos dice cuando se va a ejecutar el primer argumento.

React.useEffect(() => {}, []);

Valores del segundo argumento

Array vacio. El código se ejecuta cuando se renderice por primera vez el componente.
Ningún valor. El código se ejecuta cada vez que se haga render de nuestro componente o, dicho de de otra forma, cada vez que se modifique un estado.
Array con elementos. Los estados que le pasemos al array harán que cuando haya un cambio en ellos se ejecutará la función.

Rubén Vega

student•

Gracias por las notas, muy útiles.

Ronaldo Delgado

student•

excelente data

Max Andy Diaz Neyra

student•

Resumen de la clase

Ahora trabajaremos con los efectos en funciones y con su equivalente en React.component que son los métodos de ciclo de vida.
En esta clase nos enfocaremos en los efectos del componente UseState

Situacion

Queremos que después de 2 segundos que nuestro estado loading cambie a true por el botón vuelva a ser false.
No podemos simplemente escribir if(loading) setLoading(false) pues el código se va a ejecutar siempre que React haga un render del componente.
El render del componente se va activar con el cambio de cualquier cambio de estado.
Cuando se vuelve a renderizar, los estados vuelven a ser creados pero no serán el valor inicial sino el ultimo estado definido con los actualizadores

Solución Para poder ejecutar nuestro código no en cada render sino bajo ciertas condiciones utilizamos el React.useEffects

David Gustavo Lopez Figueroa

student•

Que clase mas cool 😎😎😎

José Gregorio Estrada Meneses

student•

import React from "react";

function UseState({ name }) {
  const [error, setError] = React.useState(true);
  const [loading, setLoading] = React.useState(false);

  React.useEffect(() => {
    console.log("Starting the effect");

    if(!!loading) {
      setTimeout(() => {
        console.log("Doing the validation");

        setLoading(false);

        console.log("Finishing the validation");
      }, 3000);
    }

    console.log("Finishing the effect");
  }, [loading]);

  return (
    <div>
      <h3>Delete {name}</h3>

      <p>Please enter the security code</p>

      {error && (
        <p>Error: Security code is incorrect</p>
      )}
      {loading && (
        <p>Loading...</p>
      )}

      <input placeholder="Security Code" />

      <button
        onClick={() => setLoading(true)}
      >Check</button>
    </div>
  );
}

Jason Francisco Macas Mora

student•

También pueden usar async/await, para hacer el código más legible:

    useEffect(() => {
        const fetching = async () => {
            console.log("Iniciando validación");
            await sleep(1000);
            setLoading(false);
            console.log("Terminando validación");
        }
        if(!!loading){
            fetching();
        }
    }, [loading]);

Donde la función sleep es:

const sleep = async (ms) => {
    return new Promise(resolve => setTimeout(resolve, ms));
}

Jesús Juárez

student•

Muy buen ejemplo, esto simula una petición a alguna Api :D

Andrés Felipe Barreto Guio

student•

Pueden probar este código para revisar mas ciclos de vida, si vienen de class components o de otros framework como Angular o Vue depronto puedan relacionarlo así. Cómo aporte adicional, como pueden ver estoy retornando una array function, esta se ejecutara cuando el componente se desmonte y cuando pase al siguiente render respectivamente. Creo que implementando el codigo y tratando de revisarlo en la consola puede quedar mas claro.

useEffect(() => {
    console.log('on component mount');
    return () => {
      console.log('on component unmount');
    }
  }, []);
  useEffect(() => {
    console.log('on component update/render');
    return () => {
      console.log('on component update/render unmount');
    }
  });

Andrés Felipe Barreto Guio

student•

Que por cierto, estoy desestructurándolo en la importación y por eso se ve así. Lo importe de esta forma.

import { useState, useEffect } from 'react';

Alejandro Calderón

student•

Porque cada vez que se monta un componente hay que desmontarlo <❔>

Fernando de Leon Gil

student•

Wow me parecio genial esta clase la forma de explicarla y los ejemplos, creo que no se me olvidará cómo usar este hook, si se olvida es venir a la clase y recordar jeje.

Bryan David Arteaga Satian

student•

¿Por qué me aparecen muchos mensajes? ¿acaso se hacen más renders de los que codifico?, ¿tiene algo que ver el navegador?

Así tengo mi código:

React.useEffect(() => {
        console.log('Empezando el UseEffect');
        setLoading(true);
        setTimeout(() => {
            console.log("Haciendo la validación");
            setLoading(false);
            console.log("Terminando la validación");
        }, 2000);

        console.log('Terminando el UseEffect');
    }, []);

Pero me aparece así en la consola:

Bryan David Arteaga Satian

student•

Estuve investigando y yo mismo me respondo xD, por si acaso a alguien le pasa lo mismo: La respuesta es por el React.StrictMode, ya que hace más invocaciones a ciertas funciones para evitar posibles errores.

  <React.StrictMode>
    <App />
  </React.StrictMode>

Yohesky Pimentel

student•

en caso de que en el useEffect se llame un actualizador de estado y modifique la dependencia del mismo useEffect estariamos creando un bucle infinito? porque entiendo que al haber cambios se volveria a llamar el useEffect

Juan Castro

teacher•

Yep, exactamente. La forma de prevenir eso es con condicionales que validen cierta condición antes de volver a actualizar el estado dentro del mismo efecto.

Fidel Parabacuto

student•

El useEffect es un hook que realiza efectos secundarios o side effects. Un efecto secundario es una acción externa al código que se ejecuta: llamadas a API, suscripciones a eventos, actualización del DOM.

Recibe dos argumentos:

la función a ejecutar
un array de dependencias que determina cuándo se va a ejecutar nuestro efecto. O puede no recibir nada 2.1) Si no recibe nada se ejecuta al primer y cada renderizado de nuestra app 2.2) Array vacío: en el primer renderizado de nuestra app 2.3) Array con dependencia: se ejecutará cuando se modifique dicha dependencia

Kevin Figuera

student•

3️⃣ Efectos con useEffect

Ahora trabajaremos con los efectos en funciones y con su equivalente en React.component que son los métodos de ciclo de vida

En esta clase nos enfocaremos en los efectos del componente UseState

Situacion

Queremos que después de 2 segundos que nuestro estado loading cambie a true por el botón vuelva a ser false.

No podemos simplemente escribir:

if(loading){
    setLoading(false);
}

Pues el código se va a ejecutar siempre que React haga un render del componente.
El render del componente se va activar con el cambio de cualquier cambio de estado. Cuando se vuelve a renderizar, los estados vuelven a ser creados pero no serán el valor inicial sino el ultimo estado definido con los actualizadores

Solución

Para poder ejecutar nuestro código no en cada render sino bajo ciertas condiciones utilizamos el React.useEffects

React.useEffect es un método con 2 parámetros:

React.useEffect(() => {
    //...
},[]);

El primero, siempre se usa y es una función a ejecutar.
El segundo, opcional e importante, nos indica cuando se va a ejecutar nuestro primer parámetro. Los posibles valores de este parámetro son:
- Ningun valor: esta función se ejecutará cada vez que nuestro componente haga render (es decir, cada vez que haya cambios en cualquiera de nuestros estados).
- Arreglo vacio: **[]** nuestro efecto solo se ejecuta una vez, cuando recién hacemos el primer render de nuestro componente.
- Arreglo no vacio: [state,error] O también podemos enviar un array con distintos elementos para decirle a nuestro efecto que no solo ejecute en el primer render, sino también cuando haya cambios en esos elementos del array.

Jeisson Felipe Rodriguez Prieto

student•

El modo estricto en React (Strict Mode) se utiliza para ayudar a identificar problemas potenciales en la aplicación. Cuando desarrollas en este modo, React ejecuta los efectos y componentes dos veces en desarrollo, pero solo en el primer render. Esto es intencional y ayuda a detectar efectos secundarios no deseados, como actualizaciones de estado inesperadas.

Este comportamiento no ocurre en producción. Si ves el mensaje dos veces, es probable que estés utilizando efectos que no están correctamente manejados. Asegúrate de revisar tu lógica de efectos y estado.

Puedes seguir explorando el manejo de efectos y sus interacciones en la clase de "Efectos con useEffect" de tu curso de React.js.

Xavier Flores

student•

y en que momento lo desmontamos del useEffect?

Juan Castro

teacher•

Con el return, mira: https://legacy.reactjs.org/docs/hooks-effect.html#effects-with-cleanup

Andrés Muñoz

student•

Por qué usas !!loading, con doble signo de exclamación para validar? ¿Cuál es la ventaja?

Nicolás Sañudo

student•

Existen valores truthy y falsy, que vendrian a ser valores de otros tipos de datos que son equivalentes a los valores booleanos: Por ejemplo:

El número 0 es falsy, por lo que es equivalente a false; mientras que cualquier número mayor a 0 es truthy.
Un array vacío [] es falsy, y un array con al menos un valor dentro es truthy.

Por lo que evaluar algo como:

let numero;
if ( numero ) {
	// Código
}

..es evaluar si numero es truthy o falsy. El mismo caso aplica a un array o a cualquier dato que utilices.

El uso del signo ! antes de una variable, cambia su estado de truthy/falsy por el opuesto:

let numero = 20;
/*
	numero es truthy por ser un numero mayor a 0 (cero)
	!numero sería su opuesto: falsy
*/
if ( !numero ) {	//
	// Código
}

Y el opuesto de !numero es !!numero, por lo que:

let numero = 20;
/*	
	si !numero es falsy
	!!numero es truthy de nuevo
*/
if ( !!numero ) {	//
	// Código
}

CHRISTIAN OLIVER SOLANO NUÑEZ

student•

termine el código tal cual pero me renderiza dos veces es normal??

Juan Castro

teacher•

Yep, en un siguiente curso de optimización de render y debugging podemos entrar más a detalle en estudiar cómo funcionan los renders y re-renders (y cuándo son buenos o malos) en React. :D

IRIDIAN GUADALUPE CARRERA MONDRAGÓN

student•

Asombroso, por fin pude entender a useEffect y como mandar o no a llamar la lógica que hay dentro de el.

Gracias Maestro :D

Jose Tellez

student•

Creo que ahora le entiendo mejor el uso a los effects. Ejecutar un bloque de codigo solo cuando cambia una variable

Juan Daniel Valderrama

student•

yo quiero también un curso de optimización de render

Efectos y ciclo de vida en componentes React con useEffect

Introducción

Manejo Avanzado del Estado en React.js

Estado y ciclo de vida con React.Component

Creación de Proyectos React y Manejo de Estado con Hooks y Clases

Diferencias entre Componentes de Clase y Función en React

Efectos y ciclo de vida en componentes React con useEffect

Métodos del ciclo de vida en componentes de clase React

Estados independientes y compuestos

Diferencias entre estados simples y compuestos en React

Actualización de estados en interfaces de usuario con React

Estados Compuestos en Componentes de Clase con React

Estados Compuestos con React.UseState: Manejo y Actualización Eficiente

Código imperativo y declarativo en React

Programación Imperativa vs Declarativa: Implementación en React

Programación Declarativa: Simplificación y Abstracción de Estados

Uso de UseReducer para manejar el estado en React

Creación de Reducers: If, Switch y Reducer Objects en React

Manejo de estados con useReducer en React

Manejo de Action Types y Action Creators en React Reducers

Manejo del estado en TODO Machine

Manejo de Estados Derivados en React con useState

Migración de UseState a UseReducer en React

Optimización de Custom Hooks en React sin UseReducer

Próximos pasos

Manejo Profesional del Estado en React con Hooks y Reducers