Crea una cuenta o inicia sesión

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

Métodos del ciclo de vida en React.Component

5/19
Recursos

Aportes 7

Preguntas 1

Ordenar por:

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

Para complementar esta clase y por qué hay métodos que se dejaron de usar?
.
Antes React utilizaba muchos más metodos para actualizar el estado (siguiente imagen) pero en algun momento a lo mejor se dieron cuenta que era muy complicado porque introducía mucha mas complejidad, codigo repetido y causaba mucha confusión debido a que habían muchos metodos similares, dejo el ciclo de vida con todos los métodos utilizados anetiormente a continuación:

.

Ahora este ciclo de vida se ha reducido y ya no hay tantos pasos para hacer una actualización de estado, por lo que es sencillo entender mas fácilmente cómo se actualiza React, ya no hay tantos pasos intermedios y ya no tendríamos que escribir tanto código si siguieramos utilizando las clases para escribir código. Ya que se han marcado que ya no se deberían usar algunos métodos. Este es el ciclo de vida que se usa ahora:


.
Ahora bien useEffect() recoge lo que hace componentDidMount(), componentDidUpdate(), y componentWillUnmount(), es decir, que useEffect() se encarga de ejecutar un función cuando nuestro componente se va a mostrar ya sea por una actualización o sencillamente porque es la primera vez que se va a mostrar. Si nos fijamos bien componentWillUnmount() es la encargada de eliminar el componente de nuestra interfaz de usuario pues bien con useEffect() tambien se puede utilizar para ejecutar una función una vez nuestro componente se vaya a eliminar esto es útli para: eliminar eventos, hacer una petición al servidor para guardar algo o limpiar algun temporizador. Aunque no se si sea la historia oficial de React 😛 imagino que eso fue lo que pensaron los ingenieros.
.
Pues bien para hacer una comparación de lo que trabajar con clases y useEffect tenemos tres opciones:
.
componentDidMount() Ejecutar algo una vez el componente se inicializa:

useEffect( () => {
  // Algo que se ejecuta dentro
}, []); //Los corchetes para indicar que se ejecute solo la primera vez

.
componentDidUpdate() Ejecutar algo en alguna actualización del estado:

useEffect( () => {
  // Algo que se ejecuta dentro
}, [dependencia]); //Se ejecuta cada vez que la dependencia cambia

componentWillUnmount() Ejecuta algo cuando el componente se va a dejar de mostrar

useEffect( () => {
 window.addEventListener('mousemove', () => {});

 // Una función que se ejecuta despues de que el componente se elimine
 return () => {
   window.removeEventListener('mousemove', () => {})  //Elimina el evento
 }
}, []); 

.
Por último añadir que no se debería usar useEffect sin el arreglo de dependencias (el que se pone al final). Ya que estaríamos ejecutando todo lo que hay dentro en cada nuevo render por lo que agregaríamos calculos que a lo mejor nos podríamos ahorrar.
.
Eso fue todo, espero que te haya gustado Nunca pares de aprender 💚

Comparar el useEffect hook con los Lifecycle de los class components fue la mejor manera para por fin entender este hook. Excelente clase 😄
.
Les comparto este recurso que me ayudo mucho para complementar mas el contenido de esta clase: Replacing Lifecycle methods with React Hooks


componentDidMount <=> useEffect(() => {}, [])
componentDidUpdate <=> useEffect(() =>{})
componentDisUpdate(prevProps, prevState) <=> useEffect(() =>, [prop1, state1,...])
componentWillUnmount() <=> useEffect(() => { return fn }, [..])

💚 Corazoncito si prefieres UseState 😅.
.
Ya en serio, las clases en React son bastante más difíciles de entender, sin embargo al hacer consultas en internet me he encontrado con muchos sitios donde las usan, así que toca aprenderlas de arriba a abajo.

Les dejo un articulo para comprender mas sobre el ciclo de vida de los componentes y la comparación con los hook (estos le dan el ciclo de vida a los componentes funcionales).
https://midu.dev/react-hooks-use-effect-funcionalidad-en-el-ciclo-vida-componentes/

Aquí una explicación sobre UseEffect, Dan Abramov, vale todo el tiempo que dediques a leerlo.

https://overreacted.io/es/a-complete-guide-to-useeffect/#cada-render-tiene-sus-propios-effect

import React from "react";
import { Loading } from "./Loading";

class ClassState extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      error: true,
      loading: false,
    };
  }

  UNSAFE_componentWillMount() {
    console.log("UNSAFE_componentWillMount");
  }

  componentDidMount() {
    console.log("componentDidMount");
  }

  componentDidUpdate() {
    console.log("Update");

    if(!!this.state.loading) {
      setTimeout(() => {
        console.log("Doing the validation");

        this.setState( { loading: false } );

        console.log("Finishing the validation");
      }, 3000);
    }
  }

  render() {
    return (
      <div>
        <h2>Delete {this.props.name}</h2>

        <p>Please enter the security code</p>

        {this.state.error && (
          <p>Error: Security code is incorrect</p>
        )}

        {this.state.loading && (
          <Loading />
        )}

        <input placeholder="Security Code" />

        <button
          onClick={() => this.setState({ loading: true })}
        >Check</button>
      </div>
    );
  }
}

export {ClassState};
import React from "react";

class Loading extends React.Component {
  componentWillUnmount() {
    console.log("componentWillUnmount");
  }

  render() {
    return (
      <p>Loading...</p>
    );
  }
}

export { Loading };