9-28. useState

 ¿Cómo usar useState en React? 🎣

¡Hola devs! 👋 Hoy quiero compartirles un ejemplo práctico del hook useState en React, uno de los conceptos más importantes para manejar el estado en componentes funcionales. ¡Vamos al código! 💻

🔹 ¿Qué es useState?

Es un hook que nos permite añadir estado a nuestros componentes funcionales. Retorna un array con dos elementos:

1. El valor actual del estado (ej: likes).

2. Una función para actualizarlo (ej: setLikes).

jsx

import { useState } from 'react';

function ContadorLikes() {
  const [likes, setLikes] = useState(0); // Estado inicial: 0

  const darLike = () => setLikes(likes + 1);
  const quitarLike = () => setLikes(likes - 1);

  return (
    <div>
      <h1>Likes: {likes}</h1>
      <button onClick={darLike}>Dar like</button>
      <button onClick={quitarLike}>Quitar like</button>
    </div>
  );
}

🔹 Key Points

✅ Estado inicial: Puede ser un número, string, booleano, array u objeto.
✅ Actualización: Usamos la función (ej: setLikes) para modificar el estado sin mutarlo directamente.
✅ Re-renderizado: React actualiza solo el componente cuando el estado cambia.

🌟 Ejemplo Avanzado: Tema Claro/Oscuro

jsx

const [temaOscuro, setTemaOscuro] = useState(false);

const cambiarTema = () => {
  setTemaOscuro(!temaOscuro); // Alterna entre true/false
  console.log("Tema actual:", temaOscuro ? "Oscuro" : "Claro");
};

📌 Conclusión

useState es la base para gestionar estados simples en React. ¡Practíquenlo con contadores, formularios o switchers de tema!

🔗 ¿Quieren ver el código completo? ¡Déjenlo en los comentarios! 👇

#React #Hooks #Frontend #JavaScript #useState #WebDevelopment

---

✨ Tips adicionales:

• Siempre usa la función de actualización (ej: setLikes) en lugar de modificar el estado directamente.

• Si el nuevo estado depende del anterior, usa una función dentro de setEstado:

  jsx

  setLikes((prevLikes) => prevLikes + 1);

¡Espero que les sirva! ¿Qué otros hooks quieren que explique?