UseState Hook de ReactJS: una guía para principiantes

Introducción

ReactJS, una popular biblioteca de JavaScript para crear interfaces de usuario, presenta ganchos para simplificar y mejorar la lógica de los componentes. Uno de los ganchos más utilizados en React es el gancho useState, que gestiona el estado de un componente. Comprender cómo funciona esto puede ayudarte a desbloquear todo el potencial de React.

En esta guía para principiantes, exploraremos qué son los ganchos, cómo inicializar y actualizar el estado con useState y profundizaremos en cómo mantener y actualizar varios tipos de estado. Al final, podrá administrar con confianza el estado dentro de sus componentes. ¡Vamos a entrar!

¿Qué son los ganchos?

Ganchos en reaccionar

Los ganchos son funciones que te permiten usar estado y otras características de React sin escribir un componente de clase. Antes de los ganchos, administrar el estado de los componentes solo era posible dentro de los componentes de la clase. Con enlaces como useState, puedes agregar estado a componentes funcionales, haciéndolos más versátiles.

React proporciona varios ganchos, como:

• useState: para gestionar el estado.
• useEffect: para efectos secundarios como obtener datos.
• useContext: para gestionar el contexto dentro de su aplicación.

Los ganchos simplifican la gestión del estado y reducen la necesidad de componentes complejos basados ​​en clases. La belleza de los ganchos radica en su capacidad de proporcionar la funcionalidad que necesita mientras mantiene un código más limpio y legible.

Cómo inicializar useState

Inicialización básica

Inicializar useState en un componente funcional es simple. Comienza importando el gancho de React y llamándolo dentro de su componente. La sintaxis se ve así:

import React, { useState } from 'react';

function Counter() {
  // Declare state variable and its updater function
  const [count, setCount] = useState(0);

  return (
    

      
You clicked {count} times
       setCount(count   1)}>
        Click me
      
    
  );
}

Descomponer:

• useState(0) inicializa el estado con un valor inicial de 0.
• count es la variable de estado y setCount es la función utilizada para actualizar este estado.
• Cada vez que se hace clic en el botón, el estado se actualiza y el componente se vuelve a representar con el nuevo valor.

Cómo leer el estado

Accediendo al estado actual

Leer el estado actual es sencillo. Simplemente usa la variable de estado (cuenta en el ejemplo anterior) directamente dentro de tu JSX. Dado que React vuelve a renderizar el componente cuando cambia el estado, el valor actualizado se refleja automáticamente en la interfaz de usuario.

Modifiquemos nuestro ejemplo anterior para mostrar cómo podemos acceder al estado:

Current count: {count}

Este código accede al estado de conteo y lo muestra dinámicamente.

Cómo actualizar el estado

Uso de la función de establecimiento de estado

La actualización del estado en React se realiza utilizando el segundo elemento de useState, que es la función de establecimiento. Esta función toma el valor actualizado y vuelve a renderizar el componente con ese nuevo estado.

Aquí hay un ejemplo de cómo incrementar y disminuir un contador:

 setCount(count   1)}>Increment
 setCount(count - 1)}>Decrement

React garantiza que cada vez que se actualiza el estado, los cambios se reflejan en la interfaz de usuario sin problemas. Es importante recordar que las actualizaciones de estado son asincrónicas en React, lo que significa que no siempre verás el estado actualizado inmediatamente después de llamar a la función de configuración.

¿Qué puede retener el Estado?

Diferentes tipos de valores

El estado en React puede contener una variedad de tipos de datos, que incluyen:

• Tipos primitivos como números, cadenas y valores booleanos.
• Objetos y matrices.
• Valores nulos y indefinidos.

Veamos ejemplos de estos:

Manteniendo una cadena en estado:

const [name, setName] = useState("John");

Mantener una matriz en estado:

const [items, setItems] = useState([1, 2, 3]);

Mantener un objeto en estado:

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

El gancho useState de React le permite administrar estos diferentes tipos de datos, pero se debe tener cuidado al actualizar tipos complejos, como objetos y matrices, como exploraremos a continuación.

Actualización de objetos y matrices en estado

Actualizaciones inmutables

Cuando se trabaja con objetos o matrices en React, es crucial actualizarlos inmutablemente. React no compara profundamente los objetos anidados, por lo que modificar un objeto directamente no activará una nueva renderización. En su lugar, debes crear un nuevo objeto o matriz con los valores actualizados.

Ejemplo: actualizar un objeto

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

function updateName() {
  setUser(prevState => ({
    ...prevState,
    name: "Doe"
  }));
}

En este ejemplo:

• Difundimos el estado existente (prevState) en un nuevo objeto usando ...prevState.
• Luego, modificamos la propiedad del nombre sin mutar el objeto de usuario original.

Ejemplo: actualizar una matriz

const [items, setItems] = useState([1, 2, 3]);

function addItem() {
  setItems(prevItems => [...prevItems, 4]);
}

Aquí:

• Difundimos la matriz anterior (prevItems) y agregamos el nuevo elemento (4), creando una nueva matriz.

Sección de preguntas frecuentes

¿Por qué utilizar useState en lugar de estado basado en clases?

Los ganchos, como useState, simplifican la gestión del estado dentro de los componentes funcionales, lo que hace que el código sea más legible y menos desordenado en comparación con los componentes de clase.

¿Puede useState contener varios tipos de datos?

Sí, useState puede contener cadenas, números, matrices, objetos, valores booleanos e incluso valores nulos o indefinidos.

¿La actualización del estado es asincrónica?

Sí, React actualiza por lotes el estado y es posible que los cambios no se reflejen inmediatamente después de llamar a la función de configuración.

¿Cómo actualizo estados complejos como objetos o matrices?

Para evitar mutar el estado original, cree siempre una copia del objeto o matriz y luego actualícela de forma inmutable usando el operador de extensión (...).

Conclusión

El gancho useState es uno de los ganchos más poderosos y utilizados con frecuencia en React. Le ayuda a administrar el estado local dentro de los componentes funcionales, haciendo que su código React sea más limpio y eficiente. Ya sea que esté manejando variables simples u objetos y matrices complejos, comprender cómo usar y actualizar el estado correctamente es clave para crear aplicaciones React dinámicas. ¡Sigue practicando y pronto dominarás la gestión de estados de React con facilidad!

Ahora que has pasado de cero a héroe con useState, ¡intenta incorporarlo a tus proyectos y ve la magia de React en acción!