Crea una cuenta o inicia sesión

¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera

Efectos con useEffect

4/19
Recursos

Aportes 8

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

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

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

  1. El primero, siempre se usa y es una función a ejecutar.

  2. 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.

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>
      <h2>Delete {name}</h2>

      <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>
  );
}

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

El useState Hook de React nos permite rastrear el estado en un componente dentro de una función.

Al igual que con useState, pueden modificar el import de la siguiente forma:

import React, { useEffect } from "react";

y usar useEffect así:

useEffect(() => {
        console.log("Empezando el efecto");

        if (!!loading) {
			setTimeout(() => {
				console.log("Haciendo la Validación");
	
				setLoading(false);
	
				console.log("Terminando la validación");
	
			}, 3000);
		}
        console.log("Terminando");
    }, [loading]);

Que clase mas cool 😎😎😎

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

  1. Array vacio. El código se ejecuta cuando se renderice por primera vez el componente.
  2. 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.
  3. Array con elementos. Los estados que le pasemos al array harán que cuando haya un cambio en ellos se ejecutará la función.