State And Lifecycle: Comprendiendo el State y Ciclo de vida de los componentes en React.js

¿Qué aprenderás?

• Comprenderás el manejo del state en componentes de clases o class components
• State en componentes funcionales o functional components
• Veremos las características del state y su implementación
• Aprenderás a manipular el estado y el uso de Hook setState, aunque no profundizare en el tema de Hooks, será el primero que veamos.

Repositorio:

• Este capitulo lo puedes descargar clonando el repositorio con la siguiente línea de código.
• Y solo debes cambiarte a la rama de nombre "state-lifecycle"
• Si no estas familiarizado con Git, descarga el código aquí.
• Recuerda que cada capítulo estará en una rama diferente para llevar un orden

git clone https://github.com/EWebik/react-js.git

Como siempre tenemos que definir algunos conceptos para que comprendas que es lo que estas utilizando al desarrollar, iniciamos con el State y vamos avanzando poco a poco.

¿Qué es el State en React JS?

El State en React es un objeto con el que podemos representar el estado actual del componente y si este State cambia, el componente también cambiará en reacción a dicho cambio.

¿Complicado? Pareciera, pero en verdad es algo muy simple de comprender y es la razón del que no mezcle propiedades y estado en el vídeo anterior.

¿Para qué utilizamos el State en React?

En esencia utilizamos el estado para hacer cambios sobre nuestro componente, si recuerdas en la clase anterior, podemos hacer cambios cobre un componente en React al modificar sus propiedades de entrada.

No obstante, si necesitamos hacer cambios desde dentro del componente, no podemos utilizar las propiedades, ya que son de solo lectura.

Aquí es donde entra al juego el estado, ya que, si necesitamos cambiar algo en nuestro componente, ya sea, por un evento, por la variable tiempo, o cualquier otra cosa, podemos utilizar el estado y hacer modificaciones sin que tengamos que modificar sus propiedades.

Bien, creo que te estoy confundiendo ¿Cierto? Recuerda que todo esto lo explico y te muestro un ejemplo en el vídeo, te recomiendo que lo veas y te suscribas a mi canal para darme apoyo, por lo pronto te dejo algunas características que debes recordar.

Características del State en React

Lo importante con lo que te debes de quedar es que:

• El estado puede ser un objeto (Por lo regular es un JSON) o variable.
• Podemos utilizarlo para realizar cambios desde dentro de los componentes.
• Si el estado cambia, los componentes reaccionan a este cambio modificando algo en si mismos, que prácticamente siempre será un cambio en la DOM.
• El estado también puede ser modificado desde fuera del componente y dicho componente reaccionará de la misma manera al cambio.

¿Cómo podemos implementar el State?

Bien, el estado lo podemos usar en:

• Componentes funcionales
• Y en componentes de clases

Y aunque los efectos en ambos componentes es el mismo, su uso y sintaxis cambia en cada uno de ellos, veamos unos ejemplos de cada uno.

Uso del State en componentes de clases (class component)

Para acceder y manipular el estado dentro de un componente de clase debemos hacer uso de this, veamos un ejemplo de como podemos inicializar nuestro state.

Inicializando el State en un componente de clase

Tomando el ejemplo que realizamos en el vídeo, podemos declarar el estado de la siguiente forma dentro del constructor de la clase

class Hijo1 extends React.Component{
  constructor(props){
    super(props);
      this.state={
      titulo:"Hijo 1",
      subtitulo:"Contador",
      cuenta:1
    }
    ...
  }
}

La segunda manera es declararlo fuera del constructor, cuando haces esta opción te recomiendo usar funciones de flecha, solo recuerda que si no usas create-react-app deberás configurar Babel manualmente.

class Hijo1 extends React.Component{
    state={
      titulo:"Hijo 1",
      subtitulo:"Contador",
      cuenta:1
    ...
  }
}

Modificar el State en un componente de clase

La manera correcta de actualizar y manipular el estado en este tipo de componentes es a través de setState, por ejemplo:

class Hijo1 extends React.Component{
    ...
  aumentar=()=>{
    this.setState({
      ...this.state,
      cuenta:this.state.cuenta + 1
    });
  }
    ...
}

En el vídeo implementamos el método aumentar, el cual incrementa la cuenta en el estado cada vez que el usuario da clic.

Uso del State en componentes funcionales (functional component)

Para el manejo del State en componentes funcionales introduciremos algunos conceptos como los son los Hooks, no profundizare en este tema solo utilizaré el que corresponde al estado, en otra clase hablare de este tema en particular.

Inicializando el State en un componente funcional

Tomando el código que vimos en el vídeo te dejo el siguiente ejemplo, recuerda que debes ver el vídeo y descargar el código para que comprendas correctamente este post.

function Hijo2 (props){

//Inicializando el State con useState
const [state, setState] = useState({
    titulo:"Hijo 2",
    subtitulo:"Contador",
    cuenta:1
  });

...

}

Viendo el código anterior, observamos:

• Con useState, creamos un state en un componente funcional
• state, almacena el estado
• Con setState podemos modificar el estado

En este punto tanto state como setSate puedes nombrarlos como tu desees.

Modificar el State en un componente funcional

Para modificar el estado solo debemos usar la función que declaramos en el código anterior setSate 

 const aumentar = ()=>{
    setState({
      ...state,
      cuenta:state.cuenta + 1
    });
  }

Recuerda que en este tipo de componente no existe this.

Ciclo de vida en los componentes

Este es un tema muy importante, ya que en muchas aplicaciones necesitarás hacer uso de los llamados Métodos de ciclo de vida:

• componentDidMount
• componentWillUnmount

Estos métodos nos permiten lanzar una acción al momento en que se monta un componente y otra acción cuando se desmonta.

Ejemplo de componentDidMount y componentWillUnmount

class Hijo extends React.Component{

  //Si lo declaras de esta forma
  //Recomiendo utilizar funciones de flecha
  state={
    titulo:"Hijo 1",
    subtitulo:"Contador",
    cuenta:1
  }

  intervalo = null;

  //Inicializa un intervalo después de que el componente es montado
  componentDidMount(){
    console.log("componentDidMount")
    this.intervalo = setInterval(()=>{
      this.setState({
        cuenta:this.state.cuenta + 1
      })
      console.log(this.state)
    },1000)
  }

  //Elimina el intervalo cuando el componente es desmontado
  componentWillUnmount(){
    console.log("componentWillUnmount")
    clearInterval(this.intervalo);
  }

  render(){
    return(
      <div className="componente">
        <h2>{this.state.titulo}</h2>
        <p>{this.state.subtitulo}</p>
        <p>{this.state.cuenta}</p>
      </div>
    );
  }
}

El código anterior en esencia crea un setInterval durante el montaje del componente y lo elimina cuando el componente es desmontado, con esto no dejas procesos basura que consuman recursos innecesariamente.

En lo personal son los que mas he usado en los proyectos, existen algunos otros métodos como, por ejemplo:

Métodos de ciclo de vida en un componente de clase

Cuando creas un componente de clase y este extiende de React.Component, hereda algunos métodos de ciclo de vida, por ejemplo:

Para el montaje del componente se heredan:

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()

Actualización, esto hace referencia a los cambios en el componente, recuerda un cambio puede ser por un cambio de estado o propiedades, durante una actualización, se lanzan algunos métodos en el siguiente orden:

• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

Y durante el Desmontaje del componente se lanza el siguiente método.

• componentWillUnmount()

En el ciclo de vida, existen algunos métodos que nos ayudan con el manejo de errores durante el renderizado:

• static getDerivedStateFromError()
• componentDidCatch()

📌 Nota: Como puedes observar todo lo de ciclo de vida lo hemos referencia a componentes de clases, por el momento te recomiendo que aprendas este concepto de esta manera.

En otros capítulos, veremos aplicados estos conceptos en componentes funcionales, solo que hay algunas cosas que tenemos que revisar primero, para no crear una confusión y se entienda mejor.