No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Aprende Inglés, Programación, AI, Ciberseguridad y más a precio especial.

Antes: $249

Currency
$209
Suscríbete

Termina en:

1 Días
22 Hrs
49 Min
56 Seg
Curso de React.js

Curso de React.js

Juan David Castro Gallego

Juan David Castro Gallego

¿Qué son los efectos en React?

18/34
Recursos

Aportes 26

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

PROBLEMA: LOGICA PESADA

Hay partes de la logica de nuestros componentes que son mas complejas o pesadas. Podemos tener momentos donde partes de esa logica pueden demorarse algunos segundos (consultas a API, condicionales, etc).

Al tener que volver a renderizar nuestro componente, toda la logica, incluso la complicada tiene que volver a renderizarse y por tanto repetir esa logica pesada.

Si esa logica solo teniamos que aplicarla una vez, la primera renderizada, lo mejor es no tener que volverla a realizar.

SOLUCION: EFECTOS EN REACT

Los efectos son una herramienta que nos permite encapsular una logica pesada o demorada y protegerlos para que unicamente se ejecuten cuando lo necesitamos.

Al iniciar la pagina por primera vez se ejecutan todas las funciones, pero al cambiar el estado no siempre se va a volver a correr el codigo dentro del useEffect, sino que este se volver a correr unicamente cuando cambie un estado especifico que le digamos.

  • Ejemplo usando console.log

    Tenemos dentro de la logica de nuestro componente estas tres funciones de ejemplo. Una dentro de el useEffect y dos por fuera.

    console.log(1)
    React.useEffect(()=>{
    		console.log(2)
    })
    console.log(3)
    

    Los tres log aparecen, pero el ultimo en aparecer es el log 2. Al encapsularlo en el efecto: se ejecuta al final.

React.useEffect recibe como primer argumento una funcion que es la logica pesada. Como segundo argumento recibe un Array, si le pasamos un Array vacio y actualizamos cualquier estado no va a volver a correr ese codigo al renderizar. Si por otro lado el Array contiene un estado o varios estados, entonces la logica se volvera a correr unicamente cuando el render sea ocasionado por cambios en esos estados que especificamos dentor del Array.

Puede ser cualquier estado, bien sea un estado como tal o un estado derivado.

CUAL ES EL USO DEL EFECTO?

Por ejemplo si tenemos un componente que debe cargar una informacion mediante una API de manera asincrona, esta informacion tarda en llegar y mientras tanto, que pasa con nuestro componente? El usuario que observa? un mensaje cargando, un icono?

En cambio, si usamos el efecto podemos encapsular el llamado a la API, para que ocurra al final una vez se ha cargado por primera vez nuestro componente y llame un re-renderizado para que cambie nuestro mensaje temporal de cargando…. por la informacion necesaria.

Ademas al pasarle el Array vacio no haremos nuevos llamados innecesarios a la API

Que son los efectos en React?
Es una función que actúa como una tarea secundaria después que el componente se haya renderizado esto es perfecto para realizar peticiones a una API que sabemos que tardaran unos algunos segundos en traerse los datos para luego montarlos en un componente para ser renderizados. También se utiliza para otras cosas como actualizar el estado de un componente, suscribirse a eventos o manipular el DOM.

El efecto (en React el hook se llama useEffect) recibe dos parametros:

  1. Una función que define el efecto a realizar
  2. Una lista de dependencias que determinan cuándo se debe volver a ejecutar el efecto. Esta lista especifica las variables que el efecto depende y si y solo si alguna de estas variables cambia entre renderizaciones, el efecto se ejecutará de nuevo. Es importante recalcar que SI NO HAY ninguna variable en la lista de dependencias, el efecto se ejecutará en cada renderización. SPOILER: React estalla XD

Un ejemplo

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

function ExampleComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count is ${count}`;
  }, [count]);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment Count</button>
    </div>
  );
}> 

En este ejemplo, useEffect se utiliza para actualizar el título de la página con el valor actual del contador. La función de efecto se ejecuta después de cada renderizado del componente porque se ha especificado [count] como la lista de dependencias para el useEffect. Esto significa que el efecto solo se ejecutará si el valor de count ha cambiado desde la última renderización.

Cada vez que el usuario hace clic en el botón “Increment Count”, el valor de count se incrementa en 1 y se llama a la función setCount para actualizar el estado del componente. Como resultado, se vuelve a renderizar el componente y se ejecuta la función de efecto, lo que actualiza el título de la página con el nuevo valor del contador.

Este tipo de clases y profesores nos muestran como Platzi tiene muy en cuenta esa frase que dice “Se mejor 1% cada día”.
He aqui los resultados de los esfuerzos de Platzi por ser cada vez más buenos en lo que mejor saben hacer.
Nunca parar de Enseñar.
.
Con cada nuevo curso se nota la dedicación y el esfuerzo que hace el equipo completo, mis respetos y felicitaciones por ese gran empeño en lo que hacen. Sin palabras.

Básicamente es una función que se ejecuta cada vez que se hace un cambio en el componente, en alguna de las etapas de “creación”, “actualización” y “eliminación” .

Todos los efectos se ejecutaran en la creación de un componente.

React.useEffect(async ()=>{
	 const response = await fetch(API);
	 const data = await JSON.parse(response)
});
  • Lo anterior, se ejecutara en cualquiera de las 3 fases del componente
React.useEffect(async ()=>{
	 const response = await fetch(API);
	 const data = await JSON.parse(response)
},[]);
  • Lo anterior se ejecutara solo en la creación del componente
React.useEffect(async ()=>{
	 const response = await fetch(API);
	 const data = await JSON.parse(response)
},[dataState]);
  • Lo anterior se ejecutara cada que se actualice el estado especificado en el array

Aquí les dejo un dato importante para los que están migrando de los class component a los hooks de react. Los equivalentes para los ciclos de vida del componente serian los siguientes utilizando el useEffect.

For componentDidMount

useEffect(() => {
  // Your code here
}, []);

For componentDidUpdate

useEffect(() => {
  // Your code here
}, [yourDependency]);

For componentWillUnmount

useEffect(() => {
  // componentWillUnmount
  return () => {
     // Your code here
  }
}, [yourDependency]);


jajajaj

Aqui esta una implementacion basica del codigo de la API y el useEffect, use la api de chuck norris como referencia:

import { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  const [message, setMessage] = useState({});

  async function API(url) {
    const response = await fetch(url);
    const data = await response.json();
    return data;
  }

  useEffect(() => {
    async function fetchData() {
      const data = await API("https://api.chucknorris.io/jokes/random");
      setMessage(data);
    }

    fetchData();
  }, []);

  return <p>{message.value || "Cargando"}</p>;
}

Hola Comunidad Platzi! Primero agradecerle al profe Juan y su equipo, excelentes las animaciones y la explicación interactiva. Segundo les dejo mi aporte, un pdf recopilando diferentes conceptos y ejemplos de la comunidad platzi para explicar el useEffect: https://drive.google.com/file/d/1-MV-MOaHVdqBFyWxZiP_RtryiNNjpPIa/view?usp=sharing.
Espero les sea de ayuda!

Esta imagen sirve para ver como es el flujo de renderizado ;D ignoren el useLayourEffect 😄

Los efectos son una herramienta, específicamente un react hook que nos permiten ejecutar cierta parte del código de nuestros componentes para que no se ejecuten cada vez que hacemos render de nuestro componente, sino, dependiendo de ciertas condiciones.

el react hook llamado “React.useEffect” ejecuta el código que le enviemos no después de renderizar el componente sino justo antes, cuando react ya tiene todo preparado para renderizar. Si queremos ejecutarlo después de que se hizo el render usamos “React.useLayoutEffect” (en caso de eventos, event listeners o cosas por el estilo).
Se ejecuta antes de hacer el render, de transformar react a html cuando ya react termino de hacer todos sus cálculos internos.

  • Podemos enviar un array vacío para decirle a nuestro efecto solo se ejecute una vez, cuando recién hacemos el primer render de nuestro componente.
  • O también podemos enviar un array con distintos elementos para decirle a nuestro efecto que no solo ejecute el efecto en el primer render, sino también cuando haya cambios en esos elementos del array.
  • Si no enviamos ningún array como segundo argumento de nuestro efecto, esta función se ejecutará cada vez que nuestro componente haga render (es decir, cada vez que haya cambios en cualquiera de nuestros estados).

Muy buena explicación de este hook, sin embargo falto un detalle y es que si se retorna algo en el useEffect, este se ejecutará una vez que el hook se resuelva (Esto varia si se pasa Array vacío o con valores). Es usado para realizar acciones de desmonte. El conocido DidMount | No sabia esto hasta que me lo preguntaron en una entrevista 😅

aqui explica un poco alternatva a useEffects parece ser que no se aconseja mucho ya en react , que opinais ? <https://react.dev/learn/you-might-not-need-an-effect>
muuy teso la explicacion muy buena graciass
**Problema: Pensar Mucho en Algo Complicado** Cuando creamos aplicaciones, a veces hay cosas difíciles o que llevan tiempo. Puede ser como hacer una pregunta a la computadora o decidir qué hacer a continuación. Imagina que estás jugando a un juego y cada vez que quieres intentarlo de nuevo, debes volver a empezar desde el principio. ¡Sería agotador hacer las cosas difíciles una y otra vez! **Solución: Magia de Computadora en React** Aquí es donde entra la magia de React, llamada "efectos". Los efectos son como hechizos mágicos que nos ayudan a guardar esas partes difíciles y solo hacerlas cuando realmente las necesitamos. Cuando iniciamos nuestra aplicación (como cargar un juego), todos los hechizos se lanzan una vez. Pero, cuando cambiamos algo, no siempre necesitamos hacer esos hechizos de nuevo. Solo los hacemos cuando algo específico cambia. **Ejemplo usando console.log** Imagina que nuestro juego tiene tres cosas que hacemos: dos cosas fuera de un hechizo y una dentro de él. javascriptCopy code`console.log(1`) `React.useEffect(() =>` { ` console.log(2`) }, \[]) `console.log(3`) Las tres cosas se muestran, pero la última es la cosa del hechizo (log 2). Este hechizo se lanza al final. **Cómo Funciona el Hechizo:** 1. **useEffect:** Es como decirle a la computadora que aquí hay algunas cosas complicadas. 2. **() => {...}:** Aquí ponemos todas las cosas difíciles que queremos hacer. 3. **\[],:** Si ponemos una lista vacía, significa que no queremos hacer esas cosas difíciles otra vez cuando cambiamos algo. Si ponemos algo en la lista, solo hacemos esas cosas difíciles cuando eso cambia. Este truco es útil cuando esperamos algo en nuestro juego, como recibir un mensaje. Con el hechizo, podemos hacer que el juego se actualice solo cuando llega el mensaje, ¡así no nos aburrimos esperando!

1

9

8

7

6

5

4

3

2

Sería genial que implementaran estas animaciones en todos los cursos de Platzi. Me encantaría ver cosas así en los frameworks de Python (FastAPI, Django, Flask) y en ML y DL.
Por qué usa el estado así: [as, asSet] = React.useState(); Y no así: [as, asSet] = useState();