React es una popular biblioteca JavaScript utilizada para construir interfaces de usuario. Proporciona a los desarrolladores una amplia gama de herramientas, incluidos los Ganchos, para que crear aplicaciones sea más fácil y eficiente.

Uno de los ganchos más utilizados es useState, que permite a los desarrolladores añadir estado a los componentes funcionales.

En este artículo, repasaremos en profundidad el gancho useState, sus usos y las mejores prácticas para su implementación.

¿Qué Es el Gancho useState?

Antes de sumergirnos en los detalles de useState, definamos primero qué son los Ganchos y en qué se diferencian de los componentes de clase tradicionales.

Un Gancho es una función que te permite utilizar el estado y otras características de React en componentes funcionales.

A diferencia de los componentes de clase, los componentes funcionales no tienen una forma integrada de almacenar el estado. Los Ganchos como useState resuelven este problema permitiéndote añadir estado a los componentes funcionales.

El Trasfondo del gancho useState

Antes de la introducción del gancho useState en React 16.8, los componentes funcionales no podían mantener su propio estado. En su lugar, los desarrolladores tenían que utilizar componentes de clase o bibliotecas externas de gestión de estado como Redux para gestionar el estado en sus aplicaciones.

Aunque los componentes de clase y las bibliotecas externas de gestión de estado siguen siendo opciones viables, la introducción del Gancho useState facilitó mucho a los desarrolladores añadir estado a sus componentes funcionales y simplificó la API de React en general.

Con el Gancho useState, los desarrolladores pueden ahora utilizar componentes funcionales para la mayoría de los casos de uso, reduciendo la cantidad de código repetitivo necesario y facilitando la evaluación del estado en sus aplicaciones.

Componentes de la sintaxis useState

El Gancho useState toma como argumento un valor de estado inicial y devuelve una matriz que contiene dos elementos: el valor de estado actual y una función que actualiza el valor de estado.

Ésta es la sintaxis:

const [state, setState] = useState(initialState);
  • state: El valor del estado actual.
  • setState: Una función que actualiza el valor de estado.
  • initialState: El valor inicial de la variable de estado que se está declarando. Es opcional. Cuando no se proporciona ningún valor (no es aconsejable), se establece automáticamente en undefined.

Es importante tener en cuenta que al utilizar el Gancho useState, React volverá a renderizar automáticamente tu componente cada vez que cambie el valor de estado.

Cómo Utilizar el Gancho useState

Para implementar useState, llama a la función y pasa un valor inicial como argumento. La función devuelve un array que contiene el valor de estado actual y una función para actualizar el estado.

Aquí tienes un ejemplo de uso de useState para gestionar un contador sencillo:

import { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

En este ejemplo, inicializamos el estado count a 0 utilizando el Gancho useState. A continuación, mostramos el valor de recuento actual y un botón. Al hacer clic en el botón, el valor del recuento se incrementará porque hemos añadido una función de flecha con la función setCount.

<button onClick={() => setCount(count + 1)}>Click me</button>

Cuando utilices el Gancho useState, es importante que recuerdes importarlo de la biblioteca React. Si te olvidas de importarlo, es probable que te encuentres con errores al intentar utilizar el Gancho. A continuación te explicamos cómo importar useState:

import { useState } from 'react';

Al incluir useState en la declaración de importación, le estás diciendo a React que quieres utilizar el Gancho useState en tu componente.

Uso de Distintos Tipos de Datos con el Gancho useState en React

El Gancho useState en React no se limita a gestionar sólo tipos de datos de cadena o numéricos. También puedes utilizarlo para gestionar estados de distintos tipos de datos, como matrices, objetos y booleanos.

Utilizar matrices con el gancho useState

Puedes utilizar el Gancho useState para gestionar un array en React. Por ejemplo, si tienes una matriz de frutas, puedes inicializar su estado con la matriz:

import { useState } from 'react';

function App() {
  const [list, setList] = useState(['apple', 'banana', 'orange']);

  const addToList = () => {
    const newItem = 'grape';
    setList([...list, newItem]);
  };

  return (
    <div>
      <ul>
        {list.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
      <button onClick={addToList}>Add Item</button>
    </div>
  );
}

export default App;

En este ejemplo, estamos utilizando useState para gestionar un array llamado list. El estado inicial de list se establece en un array que contiene tres elementos: apple, banana y orange.

También creamos una función addToList que copia todos los elementos de la matriz con el operador de propagación (...) y luego añade un nuevo elemento grape a la matriz list cada vez que se pulsa el botón «Añadir elemento».

Esta vez, no vamos a actualizar el estado en línea utilizando una función de flecha porque es más apropiado crear esta operación como una función independiente y llamarla a través del método onClick añadido al botón Add item.

Utilizar objetos con el gancho useState

También puedes utilizar el Gancho useState para gestionar un objeto en React. Aquí tienes un ejemplo:

import { useState } from 'react';

function App() {
  const [user, setUser] = useState({ name: 'John', age: 30 });

  const handleClick = () => {
    setUser({ ...user, age: user.age + 1 });
  };

  return (
    <div>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
      <button onClick={handleClick}>Increase Age</button>
    </div>
  );
}

export default App;

En este ejemplo, estamos utilizando useState para gestionar un objeto llamado usuario. El estado inicial de user es un objeto que contiene dos propiedades: name y age.

También tenemos una función handleClick que copia todos los datos del objeto con el operador de propagación (...) y también aumenta la edad del usuario en 1 cada vez que se pulsa el botón Increase age.

Es importante que sepas que puedes asignar este objeto a una variable y luego inicializar la variable. Esto es útil cuando tienes un objeto o matriz grande y quieres escribir un código fácil de entender:

import { useState } from 'react';
// Declare data
let userData = {
    name: 'John',
    age: 30,
};

function App() {
    const [user, setUser] = useState(userData);

    const handleClick = () => {
        setUser({ ...user, age: user.age + 1 });
    };

    return (
        <div>
            <p>Name: {user.name}</p>
            <p>Age: {user.age}</p>
            <button onClick={handleClick}>Increase Age</button>
        </div>
    );
}

export default App;

Utilizar booleanos con el gancho useState

También puedes utilizar el Gancho useState para gestionar un valor booleano en React. Aquí tienes un ejemplo:

import { useState } from 'react';

function App() {
  const [isOn, setIsOn] = useState(false);

  const toggleSwitch = () => {
    setIsOn(!isOn);
  };

  return (
    <div>
      <p>The switch is {isOn ? 'on' : 'off'}</p>
      <button onClick={toggleSwitch}>Toggle Switch</button>
    </div>
  );
}

export default App;

En este ejemplo, estamos utilizando useState para gestionar un valor booleano llamado isOn. El estado inicial de isOn se establece en false. También tenemos una función toggleSwitch que alterna el valor de isOn cada vez que se pulsa el botón Conmutar.

Esta función puede utilizarse para gestionar la alternancia de los modos oscuro y claro en tus proyectos.

Antes de terminar, vamos a explorar un uso más avanzado del Gancho useState con formularios.

El Gancho useState y los Formularios

Para manejar los datos de los formularios y la entrada del usuario en React, se utiliza state. Éste se utiliza para hacer un seguimiento de los valores actuales de los elementos del formulario. Realiza un seguimiento de todas las interacciones del usuario, como teclear una entrada de texto o seleccionar una opción de un desplegable, y finalmente actualiza el estado con el nuevo valor.

Aquí tienes un ejemplo de uso de useState para crear un formulario sencillo:

import { useState } from 'react';

let formStateData = {
    firstName: '',
    lastName: '',
    email: '',
};

function Form() {
    const [formData, setFormData] = useState(formStateData);

    const handleInputChange = (event) => {
        const { name, value } = event.target;
        setFormData({ ...formData, [name]: value });
    };

    const handleSubmit = (event) => {
        event.preventDefault();
        console.log(formData);
    };

    return (
        <form onSubmit={handleSubmit}>
            <input
                type="text"
                name="firstName"
                value={formData.firstName}
                onChange={handleInputChange}
            />
            <input
                type="text"
                name="lastName"
                value={formData.lastName}
                onChange={handleInputChange}
            />
            <input
                type="email"
                name="email"
                value={formData.email}
                onChange={handleInputChange}
            />
            <button type="submit">Submit</button>
        </form>
    );
}

export default Form;

En este ejemplo, primero creamos un objeto para los datos que se recogerán con el formulario con valores por defecto para los campos FirstName, name y email. A continuación, inicializamos el estado formData utilizando useState.

let formStateData = {
    firstName: '',
    lastName: '',
    email: '',
};

const [formData, setFormData] = useState(formStateData);

A continuación, definimos una función handleInputChange que actualiza el estado formData cada vez que se modifica un campo del formulario.

const handleInputChange = (event) => {
    const { name, value } = event.target;
    setFormData({ ...formData, [name]: value });
};

Por último, definimos una función handleSubmit que registra los datos actuales del formulario en la consola cuando se envía el formulario.

const handleSubmit = (event) => {
    event.preventDefault();
    console.log(formData);
};

Las Mejores Prácticas de useState

Al utilizar el Gancho useState, es importante seguir las mejores prácticas para evitar errores comunes y garantizar un rendimiento óptimo. Aquí tienes algunos consejos a tener en cuenta:

  • Evita anidar profundamente el estado: En lugar de almacenar datos de estado complejos en un único objeto, considera la posibilidad de dividirlos en trozos más pequeños para facilitar su gestión.
  • Utiliza actualizaciones funcionales: Cuando actualices el estado basándote en el estado anterior, utiliza actualizaciones funcionales para evitar condiciones de carrera y asegurarte de que se actualiza el estado correcto.
  • Evita actualizaciones de estado excesivas: Actualizar el estado puede ser costoso, así que intenta minimizar el número de actualizaciones que realizas. Considera la posibilidad de utilizar el Gancho useEffect para realizar actualizaciones por lotes y optimizar el rendimiento.
  • Evita redistribuciones innecesarias: React volverá a renderizar un componente cada vez que cambie su estado o sus accesorios. Para evitar redistribuciones innecesarias, utiliza la función memo.

Resumen

En este artículo, hemos explorado en profundidad el Gancho useState y hemos aprendido a utilizarlo para añadir estado a componentes funcionales. También hemos hablado de cómo utilizar useState con formularios, matrices y objetos, y hemos tratado las mejores prácticas para un rendimiento óptimo. Si sigues estas prácticas recomendadas, te asegurarás de que tus aplicaciones React sean eficientes, escalables y fáciles de mantener.

¿Buscas la solución de alojamiento ideal para tus aplicaciones React? ¡Prueba gratis el alojamiento de aplicaciones de Kinsta!