Seguimiento del valor del último estado en React.js — Amit Merchant — Un blog sobre PHP, JavaScript y más

Al trabajar con estados en React.js, llega un momento en el que es posible que deba diferenciar entre el estado actual y el estado anterior. "Estado" de un estado

Por ejemplo, escribió un evento que solo debería activarse si la diferencia entre el estado actual y el estado anterior es un valor determinado.

Mira este sencillo ejemplo.

import { useState } from "react";

export default function App() {
  const [name, setName] = useState("Amit");

  return (
    <>
      <h1>Current name: {name}</h1>
      <button onClick={() => setName("Cherika")}>Click Me!</button>
    </>
  );
}

Aquí en este componente, el estado inicial para name es amigo". Ahora cuando el "¡Haz click en mi!" se hace clic en el botón, el estado de name estarán "Cherika".

Como puede ver, actualmente no tenemos forma de verificar el estado anterior de name ya que hacemos un seguimiento de la misma.

Para resolver este problema, podemos utilizar el useRef gancho para crear una variable de instancia. Esto se puede utilizar además para almacenar el estado anterior siempre que el estado de name se actualiza usando useEffect gancho como este.

import { useState, useRef, useEffect } from "react";

export default function App() {
  const [name, setName] = useState("Amit");
  const prevName = usePrevious(name);

  return (
    <>
      <h1>Current name: {name}</h1>
      <h1>Previous name: {prevName}</h1>
      <button onClick={() => setName("Cherika")}>Click Me!</button>
    </>
  );
}

function usePrevious(value) {
  const ref = useRef();

  useEffect(() => {
    ref.current = value;
  });
  
  return ref.current;
}

Como puede ver, podemos crear un gancho personalizado llamado usePrevious que sostiene la lógica para mantener el estado anterior de la "árbitro" objeto aquí es un contenedor genérico cuyo current La propiedad es editable y puede contener cualquier valor, similar a una propiedad de instancia en una clase.

Podemos mutar el current propiedad de "árbitro" en el interior de useEffect enganche con el nuevo estado (que seguiría siendo el estado anterior cuando se haga clic en el botón). Y por lo tanto, podemos realizar un seguimiento de los estados anteriores y actuales.

¡Aquí está poniendo todo junto!

Si quieres conocer otros artículos parecidos a Seguimiento del valor del último estado en React.js — Amit Merchant — Un blog sobre PHP, JavaScript y más puedes visitar la categoría Código.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas