setState y prevState en React

Introduciremos setState y prevState y los usaremos en React.

setState y prevState en React

setState() y prevState() son ganchos useState que se utilizan para cambiar el estado en un componente de clase React.

setState() indica que este componente y sus componentes secundarios han cambiado y deben volver a renderizarse con el estado actualizado. setState es el método principal utilizado para actualizar la interfaz de usuario en respuesta a los controladores de eventos y las respuestas del servidor.

prevState() es lo mismo que setState pero la única diferencia entre ellos es que si queremos cambiar el estado de un componente en función del estado anterior de ese componente, usamos this.setState(), que nos proporciona el prevState.

Veamos un ejemplo de una aplicación de contador. Eso puede incrementar, disminuir, restablecer números.

En primer lugar, crearemos un nuevo archivo, Counter.js. En Counter.js vamos a import React from "react"; y crea una función llamada Counter().

En Counter() inicializaremos nuestras constantes initialNum, num y setNum

# react
import React from "react";

function Counter() {
  const initialNum = 0;
  const [num, setNum] = React.useState(initialNum);
}

Devolveremos el HTML con botones y una pantalla de contador. Entonces, Counter.js se verá como a continuación.

# react
import React from "react";

function Counter() {
  const initialNum = 0;
  const [num, setNum] = React.useState(initialNum);

  };

  return (
    <div>
      <p>Counter: {num}</p>
      <button onClick={() => setNum(initialNum)}>Reset</button>
      <button onClick={() => setNum(num + 1)}>Increment</button>
      <button onClick={() => setNum(num - 1)}>Decrement</button>
    </div>
  );
}
export default Counter;

Incluyamos Counter.js en App.js y agreguemos su componente. App.js se verá como a continuación.

# react
import "./styles.css";
import Counter from "./Counter.js";

export default function App() {
  return (
    <div className="App">
      <Counter />
    </div>
  );
}

Ahora, probemos nuestro contador.

Producción:

Agreguemos otro botón que incrementará el contador en cinco.

# react
 <button onClick={IncrementByFive}>Increment By 5</button>

Vamos a crear una función IncrementByFive.

# react
const IncrementByFive = () => {
    for (let i = 0; i < 5; i++) {
      setNum(num + 1);
    }
  };

Esta función se repetirá cinco veces para incrementarla en 5.

Ahora, probemos nuestra aplicación de contador.

Producción:

Cuando hacemos clic en el botón Increment By 5, solo incrementa el contador en 1.

Es porque en setNum(num + 1); hay varias llamadas setNum, por lo que React agrupó todas estas llamadas y actualiza el estado solo en la última llamada de setNum, y porque en la última llamada setNum aún no se actualiza y aún tiene el mismo valor, por lo que solo lo incrementa en 1.

Ahí es cuando prevState se vuelve útil y resuelve nuestros problemas como un campeón. Ahora, reescribamos nuestra aplicación de contador usando prevState.

Básicamente, en lugar de pasar un valor de la nueva variable de estado, pasamos una función que tiene acceso al valor de estado anterior. Entonces, ahora cambiaremos la función IncrementByFive cambiando setNum(num + 1); a setNum(prevNum => prevNum + 1);.

Entonces, nuestra función se verá como a continuación.

# react
const IncrementByFive = () => {
    for (let i = 0; i < 5; i++) {
      setNum(prevNum => prevNum + 1);
    }
  };

Ahora, probemos nuestra aplicación de contador.

Producción:

En el resultado anterior, cuando hacemos clic en Increment By 5, lo incrementa en 5.

Corrijamos nuestros otros botones también usando prevState.

Counter.js se verá como a continuación.

# react
import React from "react";

function Counter() {
  const initialNum = 0;
  const [num, setNum] = React.useState(initialNum);

  const IncrementByFive = () => {
    for (let i = 0; i < 5; i++) {
      setNum((prevNum) => prevNum + 1);
    }
  };

  return (
    <div>
      <p>Counter: {num}</p>
      <button onClick={() => setNum(initialNum)}>Reset</button>
      <button onClick={() => setNum((prevNum) => prevNum + 1)}>
        Increment
      </button>
      <button onClick={() => setNum((prevNum) => prevNum - 1)}>
        Decrement
      </button>
      <button onClick={IncrementByFive}>Increment By 5</button>
    </div>
  );
}
export default Counter;

Entonces, en esta guía, aprendimos sobre los problemas que se pueden resolver usando prevState, y también creamos una aplicación de contador básica en React usando setState y prevState.