Aprende cómo reaccionar a interacciones del usuario y cómo el estado local controla el render en React.
Una interfaz sin eventos es estática: React cobra sentido cuando respondes a clics, envíos de formularios, cambios de inputs y acciones del usuario.
useState permite almacenar memoria local del componente y volver a renderizar la UI cuando ese dato cambia.
La idea clave es que no manipulas el DOM directamente: cambias estado, y React recalcula la vista.
Esta separación mejora mucho la consistencia del código frente a enfoques imperativos.
React usa eventos sintéticos con una interfaz consistente en distintos navegadores.
En JSX, los manejadores se pasan como funciones: `onClick`, `onChange`, `onSubmit`.
No debes ejecutar la función en el render (`onClick={miFn()}`) salvo casos concretos; normalmente pasas la referencia (`onClick={miFn}`).
Las funciones de evento son el puente entre interacción de usuario y actualización de estado.
Cada llamada a useState devuelve el valor actual y su función de actualización.
Pequeñas decisiones aquí evitan bugs cuando el componente crezca.
Cuando varias actualizaciones dependen del estado previo, usa `setState(prev => prev + 1)` para evitar inconsistencias.
No guardes en estado lo que puedes derivar directamente de props o de otros estados.
La claridad del modelo de estado es más importante que escribir menos líneas.
Aprende cómo reaccionar a interacciones del usuario y cómo el estado local controla el render en React.
Código del tema: const [value, setValue] = useState("");
React usa eventos sintéticos con una interfaz consistente en distintos navegadores.
En JSX, los manejadores se pasan como funciones: `onClick`, `onChange`, `onSubmit`.
No debes ejecutar la función en el render (`onClick={miFn()}`) salvo casos concretos; normalmente pasas la referencia (`onClick={miFn}`).
Las funciones de evento son el puente entre interacción de usuario y actualización de estado.
Cada llamada a useState devuelve el valor actual y su función de actualización.
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Has hecho {count} clics
</button>
);
}Pequeñas decisiones aquí evitan bugs cuando el componente crezca.
Cuando varias actualizaciones dependen del estado previo, usa `setState(prev => prev + 1)` para evitar inconsistencias.
No guardes en estado lo que puedes derivar directamente de props o de otros estados.
La claridad del modelo de estado es más importante que escribir menos líneas.