La gestión del estado es fundamental en React para crear aplicaciones interactivas y dinámicas. React proporciona herramientas como useState y useReducer que permiten a los desarrolladores controlar y actualizar el estado de sus componentes funcionales de manera eficiente.

¿Qué es el estado en React?

El estado en React es un objeto que representa los datos o valores que determinan cómo debería comportarse y mostrarse un componente en un momento dado. Cuando el estado cambia, React vuelve a renderizar el componente para reflejar la nueva información.

• Props vs. State:
  • Las props son datos que vienen de un componente padre y son inmutables.
  • El estado es manejado internamente por el componente y puede cambiar a lo largo del tiempo.

useState: Estado simple

useState es un hook que permite añadir estado a los componentes funcionales. Es ideal para manejar estados simples e independientes.

Sintaxis

const [estado, setEstado] = useState(valorInicial);

• estado: Representa el valor actual del estado.
• setEstado: Es una función que actualiza el valor del estado.
• valorInicial: Es el valor con el que se inicializa el estado.

Ejemplo básico

import React, { useState } from 'react';

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

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

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

export default Counter;

Estado complejo

useState también puede manejar objetos o arreglos como estado:

function Form() {
  const [user, setUser] = useState({ name: '', age: 0 });

  const updateName = (e) => setUser({ ...user, name: e.target.value });

  return (
    <div>
      <input type="text" value={user.name} onChange={updateName} />
      <p>Nombre: {user.name}</p>
    </div>
  );
}

useReducer: Estado avanzado