React hook: useState

El desarrollo de aplicaciones web modernas requiere manejar el estado de manera efectiva. En React, una de las formas más comunes de gestionar el estado es utilizando el hook useState.

En este artículo, exploraremos qué es el hook useState, su definición, casos de uso comunes y proporcionaremos ejemplos de código para comprenderlo mejor.

⚙ Hook useState

El hook useState es una función proporcionada por React que permite a los componentes funcionales tener su propio estado interno.

Además, podemos declarar una variable de estado y una función para actualizarla dentro de un componente funcional.

Ejemplo de estructura de useState:

jsx
import React, { useState } from 'react';

const Componente = () => {
    // Estado de "contador":
    // const [<variable>, <modificador de variable>] = useState(<valor inicial>)

    const [contador, setContador] = useState(0);

    // ...demás código
};
Copiar

📚 Casos de uso comunes

Algunos casos de uso comunes del hook useState:

1. Gestión de datos locales: Es ideal para gestionar datos locales en un componente. Puede almacenar valores como contadores, booleanos, cadenas de texto y objetos simples en el estado del componente.

2. Manejo de formularios: Cuando se trabaja con formularios se utiliza para almacenar y actualizar los valores de los campos del formulario a medida que el usuario interactúa con ellos.

3. Control de visualización: Puedes utilizarlo para controlar la visibilidad de elementos en tu interfaz. Al cambiar el estado, puedes mostrar u ocultar componentes o secciones completas de la interfaz de usuario.

💻 Ejemplos de código

A continuación se presentan ejemplos prácticos donde se demuestra el uso de este hook:

🔢 Contador:

Aquí hay un ejemplo básico de cómo utilizar el hook useState en un componente funcional de React:

jsx
import React, { useState } from 'react';

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

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

    return (
        <div>
            <p>Contador: {count}</p>
            <button onClick={increment}>Incrementar</button>
        </div>
    );
};
Copiar

📆 Formulario

Este ejemplo ilustra cómo el hook useState puede ser utilizado para manejar el estado de un formulario en React, almacenando y actualizando los valores de los campos a medida que el usuario los introduce:

jsx
import React, { useState } from 'react';

const Form = () => {
    const [name, setName] = useState('');
    const [email, setEmail] = useState('');
    const [message, setMessage] = useState('');

    const handleSubmit = (e) => {
        e.preventDefault();
        // Lógica para enviar el formulario
        console.log('Nombre:', name);
        console.log('Email:', email);
        console.log('Mensaje:', message);
    };

    return (
        <form onSubmit={handleSubmit}>
            <label htmlFor='name'>Nombre:</label>
            <input type='text' id='name' value={name} onChange={(e) => setName(e.target.value)} />

            <label htmlFor='email'>Email:</label>
            <input type='email' id='email' value={email} onChange={(e) => setEmail(e.target.value)} />

            <label htmlFor='message'>Mensaje:</label>
            <textarea id='message' value={message} onChange={(e) => setMessage(e.target.value)} />

            <button type='submit'>Enviar</button>
        </form>
    );
};

export default Form;
Copiar

En este ejemplo, utilizamos el hook useState para declarar y manejar tres variables de estado: name, email y message.

Cada variable de estado se actualiza mediante su respectiva función de actualización (setName, setEmail y setMessage) cuando el usuario interactúa con los campos de entrada.

Cuando el usuario envía el formulario, se ejecuta la función handleSubmit, que en este caso simplemente muestra los valores ingresados en la consola. Puedes agregar tu propia lógica para enviar los datos a un servidor o realizar otras acciones según tus necesidades.