¿Cómo obtener el estado anterior en el componente funcional ReactJS?

Cuando crea una aplicación React , obtener un estado anterior para un componente es una situación que podemos enfrentar, entonces, ¿cómo hacemos eso profesionalmente y guardamos un cierto valor de un estado en toda la vida del componente?

Antes de profundizar en este tema, hablaría brevemente sobre cómo se procesa el componente React y qué sucede cuando actualizamos un estado. En el primer render, todas las variables y funciones se definen y toman su espacio en la memoria, y en cada actualización en cualquier estado, todas las variables y funciones se redefinen nuevamente. Hablaría de objetos en particular. Cuando un componente se vuelve a renderizar, todos los objetos en el componente se redefinen, los objetos pueden tomar otra dirección en la memoria, y este problema de optimización lo abordaremos más adelante.

Configuración del proyecto:

Paso 1: Cree la carpeta del proyecto y acceda a ella:

mkdir foldername
cd foldername

Paso 2: Al principio, creamos la aplicación de reacción con este comando:

npx create-react-app MyApp

Estructura del proyecto: aquí está la estructura del proyecto:

 

Paso 3: Entonces, ¿hay alguna manera de que pueda acceder al estado anterior sabiendo que en cada renderizado se redefinen todas las variables y funciones? Es sí, puedo acceder al estado anterior a través de setState la función asíncrona como esta en el siguiente ejemplo. MiComponente.jsx

import { useState } from "react";
  
export const MyComponent = () => {
  const [number, setNumber] = useState(0);
  return (
    <div>
      <h5>{number}</h5>
      <button onClick={() => setNumber((previous) => previous + 1)}>
        increment
      </button>
    </div>
  );
};

Paso 4: Ok, pero hay una manera de capturar el estado anterior sobre los componentes y acceder a él en cualquier parte del componente. sí, hay una manera, al usar el gancho useRef puedo guardar el estado anterior, sabemos que el gancho useRef funciona con elementos a través del dom, pero también podemos usarlo en esto. El valor de useRef no cambia cuando el componente se vuelve a renderizar, podemos decir que está como estado excepto que no provoca que se vuelva a renderizar cuando se actualiza, podemos ver esto en el siguiente ejemplo:

import { useEffect, useRef, useState } from "react";
  
export const MyComponent = () => {
  const [number, setNumber] = useState(0);
  const previousValue = useRef(null);
  
  useEffect(() => {
    previousValue.current = number;
  }, [number]);
  
  return (
    <div>
      <h5>number: {number}</h5>
      <h5>previous number: {previousValue.current}</h5>
      <button onClick={() => setNumber((previous) => previous + 1)}>
        increment
      </button>
    </div>
  );
};

Paso para ejecutar la aplicación: para ejecutar la aplicación mientras se encuentra en la misma carpeta de la aplicación en la terminal con este comando:

npm start

Producción: 

 

Y al conocer useEffect cuando se procesa y el ciclo de vida del componente, podemos lograrlo fácilmente.