¿Qué es useState() en React?

useState () es un gancho que le permite tener variables de estado en componentes funcionales. así que básicamente useState es la capacidad de encapsular el estado local en un componente funcional. React tiene dos tipos de componentes, uno son componentes de clase que son clases ES6 que se extienden desde React y el otro son componentes funcionales. Los componentes de clase son un Componente y pueden tener métodos de estado y ciclo de vida: la clase Message extiende React. El gancho useState es una función especial que toma el estado inicial como argumento y devuelve una array de dos entradas. UseState encapsula solo el valor singular del estado, ya que múltiples estados necesitan tener llamadas de useState.

Sintaxis: El primer elemento es el estado inicial y el segundo es una función que se utiliza para actualizar el estado.

const [state, setState] = useState(initialstate)

También podemos pasar una función como argumento si se tiene que calcular el estado inicial. Y el valor devuelto por la función se utilizará como estado inicial.

const [sum, setsum] = useState(function generateRandomInteger(){5+7);})

La función anterior es una función de una línea que calcula la suma de dos números y se establecerá como el estado inicial.

Importación: para usar useState, debe importar useState desde reaccionar como se muestra a continuación:

import React, { useState } from "react"

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

Ejemplo: a continuación se muestra la implementación de la función useState().

Aplicación.js

import React, { useState } from "react";
 
function App(props) {
  const [count, setRandomCount] =
    useState(function generateRandomInteger() {
    return Math.floor(Math.random() * 100);
  });
  function clickHandler(e) {
    setRandomCount(Math.floor(Math.random() * 100));
  }
  return (
    <div style={{margin: 'auto', width: 100, display: 'block'}}>
      <h1> {count} </h1>
       
       
<p>
        <button onClick={clickHandler}> Click </button>
      </p>
 
 
    </div>
  );
}
 
export default App

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

npm start

Producción: 

Explicación: la variable Firstcount se inicializa con un número aleatorio usando una función aleatoria y setRandomCount se usa para actualizar el estado del conteo. Cada vez que hacemos clic en el botón onClick, llama a la función clickHandler que establece la variable de recuento nuevamente con un número aleatorio.