• Inicio
  • Iniciar sesión
  • Crear cuenta
  • Explorar cursos
  • Bootcamps
  • Precios
  • Blog

¡Califica el Curso Profesional de React!

Selecciona la calificación de 1 a 5 estrellas

Reporta un error

Curso Curso Profesional de React

Video Efectos secundarios

Tipo de error

Algo salió mal al cargar el vídeo

El vídeo no pudo cargarse, hemos enviado un reporte al equipo de desarrollo, para poder solucionarlo a la brevedad.

Mientras solucionamos el problema, intenta lo siguiente para solucionar el error:

  • Recarga la página
  • Intenta reiniciar tu navegador y luego vuelve a reproducir el vídeo
  • Vacía el caché de tu navegador
  • Intenta reproducir con las extensiones del navegador deshabilitadas
  • Intenta con un navegador distinto
  • Si el problema persiste contáctanos en Discord
home Ir al inicio report_problem Reportar falla star Valorar curso

En programación, llamamos efectos secundarios a las modificaciones que alteran el estado de nuestro programa. Vamos a verlo en términos prácticos comparando dos funciones:

(x,y)=>  x + y 

nombre = “”;
(value)=> nombre = value;

Decimos que la primera función no produce efectos secundarios, porque la ejecución de la misma no altera nada fuera del alcance de esta función, podemos ejecutar esta función cuantas veces queramos, y nada cambiará.

Por otro lado, la segunda función cambia una variable fuera de la ejecución de la función, alterando el estado de la app. Este es un efecto secundario.

Cuando hablamos de React, si el componente ejecuta una operación que altera el estado global de la app, estaríamos produciendo un efecto secundario, en general, un componente debe hacer operaciones que alteren al componente mismo, y no más. Por supuesto que hay muchas excepciones, sin embargo, hay que tener en cuenta que el código que no produce efectos secundarios es menos impredecible y más fácil de debuggear.

Algunos ejemplos de efectos secundarios en un componente pueden ser, realizar peticiones a un servidor con AJAX, alterar el DOM manualmente, conectarse a una websocket, etc.

En un componente funcional, estas operaciones no se pueden ejecutar, ya que las funciones de un componente, no producen efectos secundarios.

Para poder ejecutar operaciones que produzcan efectos secundarios, podemos usar el hook useEffect.

Como aprendiste en el vídeo anterior, useEffect nos permite enviar una función que se ejecutará luego del render de una función, esta función puede producir efectos secundarios, de ahí el nombre del hook useEffect.

En términos prácticos, useEffect es el lugar perfecto para:

  • Ejecutar código como parte del ciclo de vida del componente
  • Hacer peticiones AJAX
  • Actualizar el DOM directamente, por ejemplo para reproducir un vídeo
  • Logging de cambios

useEffect recibe como segundo argumento después de la primer función un arreglo. En este arreglo puedes pasar variables que se usarán para determinar si el efecto debe ejecutarse o no. En la documentación de React podemos ver un muy buen ejemplo:

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

function Example() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  },[count]); // Solo se ejecuta si count cambió entre un render y otro

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Cuando pasamos un arreglo vacío, useEffect sólo se ejecutará una vez luego del primer render.

Por último, si una función se retorna del efecto, ésta se ejecutará luego del último render una vez que el componente desaparezca de la interfaz.

Continuemos.

  • check_circle_outline
    Módulo 1 | 4 clases

    Introducción

    expand_more
  • check_circle_outline
    Módulo 2 | 7 clases

    JSX - Templates

    expand_more
  • check_circle_outline
    Módulo 3 | 10 clases

    Componentes

    expand_more
    • done_all

      Clase 1

      Introducción a los componentes

    • done_all

      Clase 2

      Definiendo componentes

    • done_all

      Clase 3

      El render

    • done_all

      Clase 4

      Introducción a las props

    • done_all

      Clase 5

      Props en práctica

    • done_all

      Clase 6

      Qué es el state

    • done_all

      Clase 7

      Ejercicios con el state

    • done_all

      Clase 8

      Ciclo de vida de un componente

    • done_all

      Clase 9

      Eventos

    • done_all

      Clase 10

      Efectos secundarios

  • check_circle_outline
    Módulo 4 | 3 clases

    Formularios

    expand_more
  • check_circle_outline
    Módulo 5 | 4 clases

    Code splitting

    expand_more
  • check_circle_outline
    Módulo 6 | 4 clases

    React context

    expand_more
  • check_circle_outline
    Módulo 7 | 3 clases

    Cómo funciona React

    expand_more
  • check_circle_outline
    Módulo 8 | 7 clases

    Componentes de clase

    expand_more
  • check_circle_outline
    Módulo 9.-

    Examen del curso

    expand_more
    • done_all

      Examen

      Examen final del curso

3 comentario(s)

Víctor Izquierdo

03 Diciembre 21

more_vert
  • Resuelta
Esta frase no me es clara  " si una función se retorna del efecto, ésta se ejecutará luego del último render una vez que el componente desaparezca de la interfaz." Se refiere al ejercicio donde al clickar desaparecía el contador?
Ver respuestas (1)

Camiilo Sosa

29 Octubre 21

more_vert
  • Resuelta
¡Excelente!

Franklin Ticona

10 Febrero 20

more_vert
  • Resuelta
Cuando en vez de pasar un arreglo vacío, pasamos count al arreglo y se presiona el botón "Click me" se ejecuta en realidad todo lo que haya dentro de useEffect(), cómo se explica este comportamiento?
Ver respuestas (2)

Efectos secundarios

arrow_back Siguiente arrow_forward
Curso Profesional de React