¿Qué son los efectos en React?

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

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.

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.

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

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

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

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

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!

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 😅

1

9

8

7

6

5

4

3

2