Estado de componentes

Los estados de componentes en React son variables que almacenan datos específicos de un componente y determinan su comportamiento y apariencia en un momento dado. Los estados son importantes porque permiten que los componentes sean dinámicos y reactivos, ya que los cambios en el estado pueden provocar una actualización en la interfaz de usuario. En React, puedes utilizar el hook useState para declarar y manipular estados en componentes funcionales. Aquí te explico más detalladamente con varios ejemplos:

1. ¿Qué es useState en React?

useState es un hook que te permite añadir estados a componentes funcionales en React. Este hook devuelve un par de valores: el valor actual del estado y una función para actualizar ese estado.

2. Ejemplos de uso de useState:

Ejemplo 1: Contador simple

import React, { useState } from 'react';

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

    const incrementarContador = () => {
        setContador(contador + 1);
    };

    return (
        <div>
            <p>Contador: {contador}</p>
            <button onClick={incrementarContador}>Incrementar</button>
        </div>
    );
};

En este ejemplo, utilizamos useState para declarar el estado contador con un valor inicial de 0. Luego, definimos una función incrementarContador que incrementa el valor del contador en 1 cada vez que se hace clic en el botón.

Ejemplo 2: Formulario simple

import React, { useState } from 'react';

const Formulario = () => {
    const [nombre, setNombre] = useState('');
    const [edad, setEdad] = useState('');

    const handleNombreChange = (event) => {
        setNombre(event.target.value);
    };

    const handleEdadChange = (event) => {
        setEdad(event.target.value);
    };

    const handleSubmit = (event) => {
        event.preventDefault();
        console.log('Nombre:', nombre);
        console.log('Edad:', edad);
    };

    return (
        <form onSubmit={handleSubmit}>
            <input type="text" value={nombre} onChange={handleNombreChange} placeholder="Nombre" />
            <input type="number" value={edad} onChange={handleEdadChange} placeholder="Edad" />
            <button type="submit">Enviar</button>
        </form>
    );
};

En este ejemplo, utilizamos useState para declarar dos estados, nombre y edad, con valores iniciales vacíos. Luego, definimos funciones manejadoras de cambio (handleNombreChange y handleEdadChange) que actualizan estos estados cada vez que se introducen datos en los campos de entrada.

3. Beneficios de usar useState:

• Simplicidad: useState simplifica la gestión de estados en componentes funcionales al proporcionar una sintaxis clara y concisa.
• Reactividad: Los cambios en los estados provocan una actualización automática en la interfaz de usuario, lo que hace que los componentes sean más reactivos y dinámicos.
• Escalabilidad: Puedes utilizar múltiples useState en un solo componente para gestionar múltiples estados de forma independiente.

useState es una herramienta poderosa en React que te permite agregar comportamientos dinámicos a tus componentes funcionales de una manera simple y eficiente. Puedes utilizarlo para una amplia variedad de casos de uso, como manejar formularios, contadores, estados de carga, y más.

https://www.w3schools.com/react/react_usestate.asp

https://fullstackopen.com/es/part1/estado_del_componente_controladores_de_eventos#componente-con-estado

https://react.dev/learn/state-a-components-memory