Empleo del State en React

¿Qué es el state en React?

En React los estados (states) almacenan los datos al igual que los props (si desea conocer más sobre sobre props le recomendamos que lea nuestro artículo Empleo de Props en React). Su diferencia con estos últimos consiste en que los datos almacenados pueden modificarse ante diferentes cambios. Estos no son más que objetos escritos en JavaScript plano, por lo que pueden contener datos o códigos, representar la información que se desee modelar. Los datos de los objetos se pueden almacenar de manera encapsulada en un paquete de objetos, lo que facilita su estructura y acceso. Si desea conocer más sobre la programación orientada a objetos en JavaScript le sugerimos este artículo: Object-oriented JavaScript for beginners.

Inicialización del state y accesibilidad

La inicialización del state puede llevarse a cabo dentro del constructor de un componente definido como clase ES6. Esta se realiza mediante la declaración this.state = {}. Presentamos lo expuesto en este ejemplo.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { usuario: "ana" };
  }
  render() {
    const { usuario } = this.state;
    return <div>{usuario}</div>;
  }
}     

En este otro ejemplo podemos ver la declaración del state con un mayor grado de complejidad:

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      contador: 0,
      estados: false,
      btn: false,
      lista: [],
      usuario: "Julio"
    };
  }
  render() {
    const { contador } = this.state;
    return <div>{contador}</div>;
  }
}   

A partir de la versión 16 de React la inicialización del state puede realizarse fuera del constructor. De hecho, el constructor puede desaparecer del componente, aunque, este presente states y métodos. Para los métodos se puede eliminar el .bind(this) de la inicialización y su implementación se realizaría como se observa en el ejemplo.

import React, { Component } from "react";

class App extends Component {
  state = { estado: false }

  intercambiarEstado = () => {
    this.setState(prevState => ({ estado: !prevState.estado }));
  }

  render() {
    const toggle = this.state.toggle;

    return (
      <div>
        <button onClick={this.intercambiarEstado}>
          {toggle ? "ENCENDIDO" : "APAGADO"}
        </button>
      </div>
    );
  }
} 

Como podemos apreciar en los ejemplos anteriores, se accede al state dentro del método render con el uso de this.state.nombre-variable.

Actualizando el state

La actualización del state se realiza con el uso del método setState(). En el siguiente ejemplo se ha creado un método para actualizar el nombre del usuario. Este método recibe como argumento el nuevo nombre que actualiza el state.

class App extends Component {
  constructor() {
    super();
    this.state = { nombre: "Ana" };
  }

  handleInputChange(n) {
    this.setState({ nombre: n });
  }

  render() {
    return (
      <div>
        <div>
          <input
            type="text"
            value={this.state.nombre}
            onChange={event => this.handleInputChange(event.target.value)}
          />
        </div>
        <p>Tu nombre es {this.state.nombre}</p>
      </div>
    );
  }
}

El método setState() pone en cola las modificaciones que se realizan en el state e informa que este componente y sus hijos deben volver a representarse con el state actualizado. Este es el método principal que utiliza para actualizar la interfaz de usuario en respuesta a los controladores de eventos y las respuestas del servidor.

React puede agrupar varias llamadas en una sola actualización (asíncronas) para mejorar el rendimiento. Esto hace que setState() no siempre actualice inmediatamente el componente y pueden crearse errores en los valores cuando se lea el state justo después de llamar a setState(). En su lugar, use componentDidUpdate o una devolución de llamada setState (setState (updater, callback)), los cuales garantizan que se activará después de que se haya aplicado la actualización. En caso de que sea necesario establecer el state en base al state anterior este último se puede pasar a través del argumento updater en setState como se muestra en el siguiente ejemplo.

this.setState(function(prevState){
  return {contador: prevState.contador + 2};
});