¿Cómo actualizar el estado para volver a renderizar el componente en ReactJS?

El gancho useState() en reaccionar nos permite declarar una variable de estado que persiste durante los ciclos de renderizado. Si queremos volver a renderizar el componente, podemos hacerlo fácilmente llamando a la función setState() que se obtiene al desestructurar la array devuelta como resultado de llamar al gancho useState(). Cada vez que actualizamos el estado usando el método setState(), vuelve a representar el componente actual y sus componentes secundarios.

Sintaxis:

const [state, setState] = useState(initialState)

Cuando llamamos a la función setState, recibe la última instantánea de estado. Luego podemos usarlo dentro de la función setState() y devolver el nuevo valor al que queremos actualizar el nuevo valor de estado. 

Sintaxis:

setState((latestState) => {
    // code logic
    return newState;
})

configuración del proyecto

Para crear el nuevo proyecto de reacción, use el siguiente comando en la línea de comandos

npx create-react-app name_of_project

Después de ejecutar este comando, se creará un nuevo proyecto y la estructura de su proyecto se verá como se muestra a continuación.

import { useState } from 'react';
  
function App() {
  const [counter, setCounter] = useState(0);
  
  const handleIncrease = () => {
    setCounter((prev) => prev + 1);
  };
  
  const handleDecrease = () => {
    setCounter((prev) => prev - 1);
  };
  
  console.log('Rendering!!!');
  
  return (
    <div>
      <button onClick={handleDecrease}>
         decrease
      </button>
      <span> {counter} </span>
      <button onClick={handleIncrease}>
         increase
      </button>
    </div>
  );
}
  
export default App;

Paso para ejecutar la aplicación: para iniciar su aplicación, use el siguiente comando en la línea de comandos.

npm start

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

Explicación: Cuando hacemos clic en el botón de aumento o disminución, se llama a las funciones handleIncrease o handleDecrease. Dentro de estas dos funciones, actualizamos el estado mediante la función setState(), por lo que nuestro componente de la aplicación se representa nuevamente e imprime un mensaje en la consola.