9-1-Aprendiendo useState

Cómo utilizar useState en React: Guía esencial para manejar el estado

useState es el Hook más fundamental en React, permitiéndote agregar estado a tus componentes funcionales. Si vienes de componentes de clase, es el equivalente a this.state y this.setState, pero mucho más simple y poderoso.

¿Qué es useState?

useState es un Hook que te permite declarar variables de estado en componentes funcionales. Retorna un array con dos elementos:

1. El valor actual del estado

2. Una función para actualizarlo

jsx

Copy

Download

import { useState } from 'react';

function Contador() {
  const [contador, setContador] = useState(0); // Inicializa el estado en 0

  return (
    <div>
      <p>Has hecho clic {contador} veces</p>
      <button onClick={() => setContador(contador + 1)}>
        Incrementar
      </button>
    </div>
  );
}

Casos de uso comunes

1. Estado simple (números, strings, booleanos)

jsx

Copy

Download

const [nombre, setNombre] = useState(''); // String vacío  
const [activado, setActivado] = useState(false); // Booleano  
const [edad, setEdad] = useState(25); // Número  

2. Estado complejo (objetos, arrays)

jsx

Copy

Download

// Objeto  
const [usuario, setUsuario] = useState({ nombre: '', email: '' });  

// Actualización (¡importante mantener inmutabilidad!)  
setUsuario({ ...usuario, nombre: 'Ana' });  

// Array  
const [tareas, setTareas] = useState([]);  

// Añadir elemento  
setTareas([...tareas, nuevaTarea]);  

3. Estado inicial basado en una función (evita cálculos costosos en cada render)

jsx

Copy

Download

// Solo se ejecuta una vez al montar el componente  
const [datos, setDatos] = useState(() => calcularValorInicial());  

Errores comunes y cómo evitarlos

❌ Modificar el estado directamente

jsx

Copy

Download

// ¡MAL!  
contador = contador + 1;  
// ¡BIEN!  
setContador(contador + 1);  

❌ No usar el spread operator al actualizar objetos/arrays

jsx

Copy

Download

// ¡MAL! (pierdes propiedades)  
setUsuario({ nombre: 'Ana' });  
// ¡BIEN!  
setUsuario({ ...usuario, nombre: 'Ana' });  

❌ Confundir el estado actual en actualizaciones asíncronas

jsx

Copy

Download

// Si necesitas el valor previo, usa la forma funcional  
setContador(prevContador => prevContador + 1);  

Consejos avanzados

🔹 Divide el estado en múltiples useState si no están relacionados.
🔹 Evita estados anidados profundos (considera useReducer para lógica compleja).
🔹 Usa TypeScript para tipar tu estado y evitar errores.

Inicialización del Estado en React: Pregunta sobre useState([])

En React, siempre debes inicializar el estado(variables) con useState(), pero tienes varias opciones sobre cómo hacerlo cuando comienzas con datos vacíos.

Opciones válidas para inicializar un array vacío:

1. Forma explícita (recomendada):

   jsx

   Copy

   Download

   const [nombres, setNombres] = useState([]);

2. Forma sin valor inicial (NO recomendada):

   jsx

   Copy

   Download

   const [nombres, setNombres] = useState(); // Esto devuelve undefined

¿Por qué NO puedes omitir la inicialización?

1. Comportamiento no deseado: Si no inicializas, el valor será undefined, lo que causará errores cuando intentes usar métodos de array como .map() o .push()

2. Ejemplo de problema:

   jsx

   Copy

   Download

   // Si haces esto:
   const [nombres, setNombres] = useState();
   
   // Luego intentas:
   nombres.map(nombre => <li>{nombre}</li>); // ❌ Error: Cannot read property 'map' of undefined

Soluciones alternativas (pero no mejores):

1. Inicializar con null (requiere validaciones adicionales):

   jsx

   Copy

   Download

   const [nombres, setNombres] = useState(null);
   
   // En el render:
   {nombres?.map(nombre => <li>{nombre}</li>)}

2. Inicializar con undefined (similar al anterior):

   jsx

   Copy

   Download

   const [nombres, setNombres] = useState(undefined);

Mejor práctica:

Siempre inicializa el estado con el tipo de dato correcto que esperas manejar:

• Para arrays: useState([])

• Para objetos: useState({})

• Para strings: useState('')

• Para números: useState(0)

Esto hace que tu código sea:

• Más predecible

• Menos propenso a errores

• Más fácil de mantener

¿Te gustaría ver un ejemplo específico de cómo manejar el estado cuando los datos vienen de una API y inicialmente no los tienes

🚀 Aprendiendo useState con un Ejemplo Práctico: Contador Interactivo

📌 ¿Qué es useState?

Es un Hook de React que te permite añadir estado a componentes funcionales. Antes, solo los componentes de clase podían tener estado.

Características clave:

• 🎯 Guarda datos que pueden cambiar (estado).

• 🔄 Cuando el estado cambia, React vuelve a renderizar el componente.

• ⚡ Es la base para interactividad en React.

---

🛠️ Ejemplo Práctico: Contador con Botones

Vamos a crear un contador que:

• ➕ Aumente con un botón "+"

• ➖ Disminuya con un botón "-"

• 🔄 Muestre el valor actual

jsx

Copy

Download

import { useState } from 'react';

function Contador() {
  // Declaramos el estado: "contador" es el valor, "setContador" la función para actualizarlo
  const [contador, setContador] = useState(0); // Iniciamos en 0

  // Función para aumentar
  const aumentar = () => {
    setContador(contador + 1); // Actualizamos el estado
  };

  // Función para disminuir
  const disminuir = () => {
    setContador(contador - 1);
  };

  return (
    <div>
      <h2>Contador: {contador}</h2>
      <button onClick={aumentar}>+</button>
      <button onClick={disminuir}>-</button>
    </div>
  );
}

export default Contador;

---

🔍 Explicación Paso a Paso

1️⃣ Inicialización del Estado

javascript

Copy

Download

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

• contador: Variable que almacena el valor actual (inicia en 0).

• setContador: Función para actualizar contador.

• useState(0): Inicializa el estado con valor 0.

2️⃣ Actualización del Estado

javascript

Copy

Download

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

• Cuando se hace clic en "+", setContador actualiza el valor.

• React detecta el cambio y vuelve a renderizar el componente.

3️⃣ Mostrar el Estado en la Interfaz

jsx

Copy

Download

<h2>Contador: {contador}</h2>

• El valor de contador se muestra dinámicamente.

---

💡 Mejora: Previniendo Valores Negativos

Podemos modificar disminuir para que el contador no sea menor que 0:

javascript

Copy

Download

const disminuir = () => {
  if (contador > 0) { // Solo disminuye si contador > 0
    setContador(contador - 1);
  }
};

---

⚡ Versión Optimizada con Actualización Funcional

En casos de actualizaciones frecuentes, es mejor usar la forma funcional:

javascript

Copy

Download

const aumentar = () => {
  setContador((prevContador) => prevContador + 1); // Más seguro en renders asíncronos
};

• prevContador: Garantiza que usamos el valor más reciente.

---

📌 ¿Cuándo Usar useState?

Caso de Uso	Ejemplo
Contadores	const [count, setCount] = useState(0)
Formularios	const [email, setEmail] = useState("")
Toggles (on/off)	const [isActive, setIsActive] = useState(false)
Datos de API	const [users, setUsers] = useState([])