ReactJS | Gancho useState

Los componentes funcionales son algunos de los componentes más utilizados en ReactJS. La mayoría de los desarrolladores prefieren usar componentes funcionales en lugar de componentes basados ​​en clases por la sencilla razón de que los componentes funcionales requieren menos codificación (por parte del desarrollador). Sin embargo, dos características principales de la clase se pierden cuando se opta por un componente funcional: un estado dedicado que persiste a través de las llamadas de procesamiento, así como el uso de funciones de ciclo de vida para controlar cómo se ve y se comporta el componente en etapas separadas de su ciclo de vida. 
Desde la versión 16.8, se agregó una nueva característica llamada ganchos a ReactJS que expuso las diversas características de los componentes basados ​​en clases. Los dos ganchos más utilizados son el gancho useState(), que permite que los componentes funcionales tengan un estado dedicado propio, y el useEffect()gancho, que permite que los componentes funcionales manipulen los elementos DOM antes de cada renderizado (casi como uno puede hacerlo en las funciones del ciclo de vida). 
El gancho useState() permite declarar una variable de estado dentro de una función. Cabe señalar que un uso de useState() solo se puede usar para declarar una variable de estado. 
Ejemplo: programa para demostrar el uso básico del gancho useState(). 

Nombre de archivo: App.js: cree una aplicación React y edite el archivo App.js en la carpeta src como:

import React, { useState } from 'react';
 
function App() {
const click = useState('GeeksForGeeks');
return (
    <h1>Welcome to {click}</h1>
);
}
 
export default App;

Producción:

El valor devuelto por useState() consiste en una array con dos valores. El primer valor es el valor inicial (o inicial) de la variable de estado, mientras que el segundo valor es una referencia a la función que se puede usar para actualizar la variable. Siempre se puede usar la desestructuración de arrays para asignar ambos valores a la vez para que puedan usarse en el componente. Por supuesto, también se pueden asignar por separado asignando una variable con useState() y asignando su primer índice a una variable y su segundo índice a otra (la desestructuración lo hace más fácil).
Ejemplo: programa para demostrar el uso de una variable de estado en un componente funcional y cómo actualizarlo en consecuencia. 
 

Nombre de archivo- App.js

import React, { useState } from 'react';
 
function App() {
  const [click, setClick] = useState(0);
  // using array destructuring here
  // to assign initial value 0
  // to click and a reference to the function
  // that updates click to setClick
  return (
    <div>
       
 
<p>You clicked {click} times</p>
 
 
      <button onClick={() => setClick(click + 1)}>
        Click me
      </button>
    </div>
  );
}
 
export default App;

Producción:

El funcionamiento de useState() puede parecer extraño al principio. Después de todo, con cada renderizado, la función que se renderiza es nueva. ¿Cómo persiste entonces el ‘estado’? Detrás de escena, hay un objeto que representa el componente funcional en la memoria, que tiene una pila propia. Cada vez que se usa el gancho useState(), el valor de la variable de estado cambia y la nueva variable se almacena en una nueva celda en la pila. El puntero de pila se incrementa simultáneamente para apuntar hacia la última celda. El valor señalado por este puntero de pila se usa después de cada procesamiento. En una actualización deliberada por parte del usuario, la pila se vuelca y se realiza una nueva asignación en la memoria cuando se procesa el componente. 
Ejemplo: programa para demostrar el uso del último valor mientras se actualiza el valor de la variable ‘estado’. 
Nombre de archivo- App.js

import React, { useState } from 'react';
 
function App() {
  const [click, setClick] = useState(0);
   
 
  return (
    <div>
       
 
<p>You've clicked {click} times!</p>
 
 
       
 
<p>The number of times you have clicked
 is {click%2==0?'even!':'odd!'}</p>
 
 
      <button onClick={() => setClick(click => click + 1)}>
        Click me
      </button>
    </div>
  );
}
 
export default App;

Producción:

Tenga en cuenta que en el ejemplo anterior, estamos usando una función de flecha dentro de setClick() que obtiene el valor anterior de clic y lo usa para actualizarlo con el nuevo valor. Este formulario es útil en los casos en que es necesario realizar manipulaciones de datos en función del valor de la variable de estado. Pasar una función también es útil en los casos en que se captura y cambia uno de los valores más antiguos de la pila en lugar del valor más reciente.
Las variables de estado también pueden ser arrays. Esto es especialmente útil cuando se necesita tratar con múltiples valores sin encontrar la necesidad de declarar múltiples variables de estado usando useState(). 
Ejemplo: Programa para demostrar el uso de arreglos como variable de estado (usando useState()). 
Nombre de archivo- App.js

import React, { useState } from 'react';
 
 
function App() {
  const [click, setClick] = useState([]);
   
  const addNumber = () => {
    setClick([
      ...click,
      {
        id: click.length,
        value: Math.random() * 10
      }
    ]);
  };
   
 
  return (
    <div>
      <ul>
       {click.map(item => (
          <li key={item.id}>{item.value}</li>
       ))}
      </ul>
      <button onClick={addNumber}>
        Click me
      </button>
    </div>
  );
}
 
export default App;

Producción:

useState() funciona de manera diferente a la función setState() (que se usa para cambiar el valor de las variables de estado en componentes basados ​​en clases) cuando se trata de usar arreglos. setClick() no fusiona nuevos valores con los existentes al ser llamado, simplemente los sobrescribe con el nuevo valor. Por lo tanto, es necesario encontrar una solución para agregar los valores existentes, lo que se hace dentro de la función interna addNumber() con la ayuda del operador de propagación. La función crea una nueva variable con una determinada identificación y valor y la agrega a la array existente (cuyos valores se copian en la función mediante el operador de extensión). 
Si uno necesita manejar múltiples tipos de datos a la vez, la mejor manera de hacerlo es con un objeto. Si bien se puede hacer el mismo trabajo con variables de estado separadas, los objetos hacen que el trabajo sea mucho más eficiente a largo plazo (también se puede arreglárselas con menos declaraciones useState()). 
Ejemplo: Programa para demostrar el uso de objetos como variable de estado (usando useState()). 
Nombre de archivo- App.js

import React, { useState } from 'react';
 
function App() {
  const [data, setData] = useState({
    username: '',
    password: ''
  });
  const [form, setForm] = useState({
    username: '',
    password: ''
  });
  const [submit, submitted] = useState(false);
 
  const printValues = e => {
    e.preventDefault();
    setForm({
      username: data.username,
      password: data.password
    });
    submitted(true);
  };
 
  const updateField = e => {
    setData({
      ...data,
      [e.target.name]: e.target.value
    });
  };
 
  return (
    <div>
    <form onSubmit={printValues}>
      <label>
        Username:
        <input
          value={data.username}
          name="username"
          onChange={updateField}
        />
      </label>
      <br />
      <label>
        Password:
        <input
          value={data.password}
          name="password"
          type="password"
          onChange={updateField}
        />
      </label>
      <br />
      <button>Submit</button>
    </form>
     
 
<p>{submit?form.username:null}</p>
 
 
     
 
<p>{submit?form.password:null}</p>
 
 
  </div>
  );
}
 
export default App;

Producción:

En el ejemplo anterior, la variable ‘datos’ se usa para almacenar temporalmente los valores ingresados ​​para los campos de nombre de usuario y contraseña. El operador de propagación se usa nuevamente para copiar el valor existente de los campos y actualizarlo en consecuencia. La variable ‘formulario’ se utiliza para almacenar el valor de los valores enviados a través del formulario utilizado en el componente, que luego se muestra debajo del formulario. Tenga en cuenta que el operador de propagación no se usa con setForm() mientras se actualiza la variable de estado ‘formulario’ por la sencilla razón de que uno no necesita preocuparse por los valores enviados previamente de los campos de nombre de usuario y contraseña.