El hook useState es un hook fundamental de React que permite a los componentes funcionales tener un estado. Proporciona una forma de declarar y actualizar variables de estado dentro de un componente.

Sintaxis:

Para utilizar el hook useState, se llama y se pasa el estado inicial (initialState) como argumento. Devuelve un arreglo con dos elementos: el valor actual del estado (state) y una función (setState) para actualizar el estado.

const [state, setState] = useState(initialState);

• Se puede elegir cualquier palabra como nombre para una variable de state. Se recomienda utilizar un nombre de variable que describa con precisión qué estado se está almacenando o actualizando, como inputValue, page, number, name, entre otros;

• De manera similar, al usar la función setState, existe flexibilidad para elegir el nombre de la función. Sin embargo, seguir un patrón específico es una convención estándar: el nombre de la función setState debe comenzar con "set" seguido del nombre de la variable de estado correspondiente. Por ejemplo, si la variable de state es mail, la función setState correspondiente normalmente se llamaría setMail.

Nota

Cuando se llama a setState, React vuelve a renderizar el componente y actualiza el estado con el nuevo valor. Es importante tener en cuenta que al usar useState, la variable de estado no necesita ser un objeto. Puede ser un valor primitivo (como un número, cadena o booleano) o un valor complejo (como un arreglo u objeto).

Ejemplo 1:

Construyamos el componente Counter, que mantendrá su propio estado. Cuando se haga clic en el botón Incrementar, actualizaremos el estado y provocaremos un nuevo renderizado del componente.

import React, { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

En este ejemplo, el hook useState se utiliza para declarar una variable de estado count con un valor inicial de 0. La función setCount se utiliza para actualizar la variable count cada vez que se hace clic en el botón.

Explicación línea por línea:

• Línea 1: Se importa el hook useState de la librería React para utilizar su funcionalidad;
• Línea 3: Se define el componente Counter utilizando la sintaxis convencional de función;
• Línea 4: Se inicializa el estado utilizando el hook useState;

1. count representa el valor del contador. Su valor inicial es 0, especificado dentro de los paréntesis de useState(0);
2. setCount es la función que actualiza el estado cuando sea necesario.

• Líneas 6-8: Esta función flecha de JavaScript gestiona la lógica para actualizar el estado. Se ejecuta cuando se hace clic en el botón "incrementar". Dentro de la función, se utiliza la función setCount para actualizar el estado;
• Líneas 10-15: Renderiza el marcado del componente. En la línea 12, se muestra el valor actual del estado (count). El botón en la línea 13 utiliza el atributo onClick para definir la función que se ejecutará al hacer clic. En este caso, se pasa la función increment.

Código completo de la aplicación:

Ejemplo 2:

Construyamos el componente Form con su estado independiente. Solicitamos al usuario que ingrese su nombre en el campo de entrada y, dependiendo de su entrada, modificaremos el contenido mostrado.

import React, { useState } from "react";

const Form = () => {
  const [userName, setUserName] = useState("");

  const handleChange = (event) => {
    const inputValue = event.target.value;
    setUserName(inputValue);
  };

  return (
    <div>
      <input
        type="text"
        value={userName}
        onChange={handleChange}
        placeholder="Your name"
      />
      <p>Hello, {userName}!</p>
    </div>
  );
};

En este ejemplo, el hook useState se utiliza para declarar una variable de estado userName con un valor inicial de cadena vacía. La función setUserName actualiza la variable userName cada vez que sea necesario.

Explicación línea por línea:

• Línea 1: Importamos el hook useState de la librería React para utilizar su funcionalidad;
• Línea 3: Definimos el componente Form usando la sintaxis estándar de función;
• Línea 4: Establecemos el estado inicial utilizando el hook useState;

1. userName representa el valor del campo de entrada, inicialmente definido como una cadena vacía (""), especificada dentro de los paréntesis de useState("");
2. setUserName es la función que nos permite actualizar el estado cuando sea necesario.

• Líneas 6-9: Esta función flecha de JavaScript gestiona la lógica para actualizar el estado. Se activa cuando el usuario escribe algo en el campo. Obtenemos el valor de entrada dentro de la función usando event.target.value. Luego utilizamos la función setUserName para actualizar el estado con el valor del campo de entrada;
• Líneas 11-21: Se renderiza el marcado del componente.

1. En la línea 15, asignamos userName como el valor inicial para el campo de entrada usando el atributo value;
2. En la línea 16, usamos el atributo onChange para especificar la función que se llamará cuando haya un cambio en el campo de entrada.

Código completo de la aplicación: