Estado Local en React: Uso de useState para Contadores

El estado en React es un concepto fundamental que permite a los desarrolladores almacenar y manipular información dentro de sus aplicaciones. A través del uso de estados locales, podemos crear componentes dinámicos que responden a las interacciones del usuario y actualizan la interfaz de manera eficiente. Dominar el manejo de estados es esencial para cualquier desarrollador que busque crear aplicaciones React robustas y reactivas.

¿Qué es el estado en React y por qué es importante?

El estado en React es un mecanismo para almacenar información que puede cambiar durante el ciclo de vida de un componente. Podemos visualizarlo como cajas de almacenamiento donde guardamos datos específicos que nuestros componentes necesitan para funcionar correctamente.

Existen dos tipos principales de estados:

• Estado local: Información almacenada a nivel de componente, accesible solo dentro del componente donde se define.
• Estado global: Información compartida entre múltiples componentes de la aplicación.

En esta ocasión, nos enfocaremos en el estado local, que nos permite mantener información dentro de un componente específico y actualizarla según sea necesario.

El hook useState: la herramienta para manejar estados locales

React proporciona una herramienta especial llamada useState, que es un hook que nos permite implementar estados locales en nuestros componentes funcionales. Este hook nos devuelve:

1. Una variable para leer el valor actual del estado
2. Una función para actualizar ese valor

La sintaxis básica es:

const [valor, setValor] = useState(valorInicial);

Donde:

• valor es la variable que contiene el estado actual
• setValor es la función que nos permite actualizar ese estado
• valorInicial es el valor con el que comienza nuestro estado

¿Cómo crear un contador utilizando estados en React?

Vamos a crear un ejemplo práctico: un contador que nos permita incrementar y decrementar un valor utilizando estados locales.

Configuración del proyecto

Primero, creamos un nuevo proyecto de React:

npm create vite@latest myreact-app-state

Seleccionamos React como framework y JavaScript como variante. Luego instalamos las dependencias:

cd myreact-app-state
npm install
npm run dev

Creando nuestro componente contador

Dentro de nuestro proyecto, creamos una carpeta llamada components y dentro de ella un archivo Counter.jsx:

import { useState } from 'react';

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

  return (
    <div>
      <h2>El contador está en: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Incrementar</button>
      <button onClick={() => setCount(count - 1)}>Decrementar</button>
    </div>
  );
};

export default Counter;

En este componente:

1. Importamos el hook useState desde React
2. Creamos un estado local llamado count con valor inicial de 0
3. Renderizamos el valor actual del contador
4. Añadimos dos botones que modifican el estado al hacer clic

Implementando el contador en nuestra aplicación

Ahora, modificamos nuestro archivo principal App.jsx para incluir nuestro componente contador:

import Counter from './components/Counter';

function App() {
  return (
    <div>
      <Counter />
    </div>
  );
}

export default App;

Al ejecutar nuestra aplicación, veremos un contador que comienza en 0 y que podemos incrementar o decrementar con los botones correspondientes.

Entendiendo el flujo de actualización del estado

Cuando hacemos clic en el botón "Incrementar", ocurre lo siguiente:

1. Se ejecuta la función setCount(count + 1)
2. React actualiza el valor de count sumándole 1
3. El componente se vuelve a renderizar con el nuevo valor
4. La interfaz se actualiza mostrando el nuevo valor del contador

Este proceso es automático y es parte de la magia de React: cuando el estado cambia, los componentes que dependen de ese estado se actualizan automáticamente.

¿En qué otros casos podemos utilizar estados locales?

Los estados locales son extremadamente versátiles y pueden utilizarse en numerosos escenarios:

• Formularios: Para almacenar los valores de los campos mientras el usuario los completa
• Toggles: Para manejar estados de activado/desactivado (como menús desplegables)
• Filtros: Para almacenar criterios de filtrado en listas o colecciones
• Paginación: Para mantener el número de página actual
• Cargas de datos: Para indicar si los datos están cargando, se han cargado correctamente o ha ocurrido un error

El manejo de estados es una habilidad fundamental en React que te permitirá crear interfaces dinámicas y reactivas. Dominar el uso de useState es solo el primer paso para aprovechar todo el potencial que React ofrece para el manejo de datos en tus aplicaciones.

¿Has pensado en otras aplicaciones prácticas para los estados locales en tus proyectos? ¿Quizás un carrito de compras, un sistema de notificaciones o un reproductor multimedia? Comparte tus ideas y experiencias en los comentarios.