¿React useState Hook se actualiza inmediatamente?

¿Cómo podemos usar el gancho useState en React?

useState es una API/Hook introducida en las versiones recientes de React. Como es un enlace, nos permite conectarnos a la función React y, para ser precisos, la función de estado que proporciona React.

En las versiones anteriores de React, si queremos dar un estado a cualquier componente, necesitamos convertir ese componente en el componente basado en clases, pero con useState hook, podemos dar un estado en nuestro componente funcional. Sin embargo, el gancho useState no se puede usar en una clase y no se debe usar en las funciones normales de JavaScript para un uso de prueba completo. Usamos el enlace useState de la siguiente manera y extraemos el estado y la función que actualiza el estado. Lo único que requiere useState es el estado inicial.

React realiza un seguimiento de los estados poniéndolos en cola en el orden en que se llaman. Reaccione a la cola de todos los cambios que se realizarán y actualice una vez que el componente vuelva a renderizar, lo que no es inmediato. Así es como React sabe qué valor corresponde a qué estado. Va según la cola cada vez que el componente intenta volver a renderizar.

Creando la aplicación React:

• Paso 1: Cree una aplicación React usando el siguiente comando:

  npx create-react-app foldername

• Paso 2: después de crear la carpeta de su proyecto, es decir , el nombre de la carpeta , acceda a ella con el siguiente comando:

  cd foldername

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Nombre de archivo: App.js

import React, { useState } from "react"
  
export default function App() {
  
  // State for username
  const [name, setName] = useState("jon doe");
  
  // Function to change name
  function changeName(e) {
    setName(e.target.value);
  }
  
  return (
    <div>
      <h1>Your agent name is :</h1>
      <h2>{name}</h2>
      <input value={name} onChange={changeName} ></input>
      <button>change</button>
    </div>
  )
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Explicación: Como puedes ver para actualizar el estado hemos usado el método setState , el cual se extrae del hook useState . Así que para actualizar no hemos usado this.name ni nada parecido a this.setname . 

Es posible que se pregunte si no hay un componente basado en clases o si esto implica saber cómo reacciona. Nos referimos a qué estado, ya que habrá tantos estados en el código como a continuación:

const [name, setName] = useState("jon");
const [surname, setSurname] = useState("doe");
const [age,setAge] = useState(23);

React no se actualiza inmediatamente, aunque a primera vista parece inmediato. React realiza un seguimiento de los estados poniéndolos en cola en el orden en que se llaman. Reaccione a la cola de todos los cambios que se realizarán y actualice una vez que el componente vuelva a renderizar, lo que no es inmediato. Así es como React sabe qué valor corresponde a qué estado. Va según la cola cada vez que el componente intenta volver a renderizar.

Ejemplo: si nuestro componente actualiza el estado en algún orden como nombre , apellido y edad, entonces coloca esos cambios en la cola y no actualiza esos estados inmediatamente como se encontraron. Una vez que el componente funcional termina, vuelve a renderizar el componente y actualiza el estado en el orden en que los puso en la cola. De esta forma, React mantiene la integridad del estado y nos permite usar el estado en nuestro componente funcional usando el enlace useState . 

setName("James");    // First state on queue
setSurname("Bond");     // Second state on queue
setAge(23);             // Third state on queue

// End of the component function

// After that re-render happens and state actually updates

Referencias: https://reactjs.org/docs/hooks-rules.html