Introduccion a useState

Estado: Datos que cambian

El estado (state) son datos que pueden cambiar durante la vida de un componente. Cuando el estado cambia, React re-renderiza el componente.

useState: El hook basico

import { useState } from 'react';



function Contador() {

  // useState retorna [valor, funcionParaCambiar]

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



  return (

    <div>

      <p>Contador: {count}</p>

      <button onClick={() => setCount(count + 1)}>

        Incrementar

      </button>

    </div>

  );

}

Anatomia de useState

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



// estado: el valor actual

// setEstado: funcion para actualizar

// valorInicial: valor al montar el componente

Diferentes tipos de estado

// Numeros

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



// Strings

const [nombre, setNombre] = useState('');



// Booleanos

const [isOpen, setIsOpen] = useState(false);



// Arrays

const [items, setItems] = useState([]);



// Objetos

const [user, setUser] = useState({ name: '', email: '' });



// null/undefined

const [data, setData] = useState(null);

Ejemplo: Toggle

function Toggle() {

  const [isOn, setIsOn] = useState(false);



  return (

    <button onClick={() => setIsOn(!isOn)}>

      {isOn ? 'ON' : 'OFF'}

    </button>

  );

}

Ejemplo: Input controlado

function FormularioNombre() {

  const [nombre, setNombre] = useState('');



  return (

    <div>

      <input

        value={nombre}

        onChange={(e) => setNombre(e.target.value)}

        placeholder="Tu nombre"

      />

      <p>Hola {nombre || 'desconocido'}!</p>

    </div>

  );

}

Nunca modifiques el estado directamente. Siempre usa la funcion setter (setCount, setNombre, etc).

Practica de portfolio

Convierte esta leccion en evidencia real: arma una entrega pequena que puedas mostrar en una entrevista, en LinkedIn o en tu portfolio. Trabaja con un caso propio o con una empresa ficticia, pero deja claro el problema, la decision y el resultado.

• Entregable: una captura, documento, repositorio o tablero con el resultado final.


• Checklist: objetivo, pasos seguidos, criterio de calidad y mejora pendiente.


• Mini-rubrica: si otra persona lo revisa, debe entender que hiciste, por que y como repetirlo.