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 18

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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.

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.

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

Que clase mas cool 馃槑馃槑馃槑

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

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

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:

  1. la funci贸n a ejecutar
  2. 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

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(() => {
    //...
},[]);
  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:
    • 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.
yo quiero tambi茅n un curso de optimizaci贸n de render

Que bueno esta vez lo entendi perfectamente!! muchas gracias

Lo que realic茅 fue agregar una funci贸n para cuando se presione clic en el bot贸n de comprobar el loading se vuelva true y dentro de useEffect agregue el callback de setTimeout en 2s para modificar el loading a false y el error a true para que muestre como falso, pero agregue un nuevo setTimeout de 3s para volver a colocar al error a false y todo quede como al principio. 馃槈

import React, { Fragment, useEffect, useState } from 'react';

function UseState(props){
  const [error, setError] = useState(false);
  const [loading, setLoading] = useState(false);

  const handleClick = () => {
    setLoading(true)
  }

  useEffect(() => {
    console.log('ejecutando useEffect')
      loading ?
      setTimeout(() => {
        setLoading(false);
        setError(true)
        setTimeout(() => {
          setError(false)
        }, 3000);
      }, 2000) :
      console.log('Validacion Finalizado.')
  }, [handleClick]);
  
  return (
    <Fragment>
      <h2>Eliminar {props.name}</h2>
      <p>Por favor, escribe el codigo de seguridad.</p>
      <input type="text" placeholder='Codigo de seguridad' />
      <button
        onClick={() => handleClick()}
      >
        Comprobar</button>
      {loading && <p className='bg-success'>Validando ...</p>}

      {error && <p className='bg-danger text-white'>Error: el codigo no es valido.</p>}
    </Fragment>
  );
}

export { UseState };

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

Presente mi primera entrevista y me preguntaron sobre optimizacion de render en react

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

Buen repaso