Al terminar esta nota
- Pensar la UI como función del estado
- Separar props de state
- Usar efectos solamente para sistemas externos
Render no es montar HTML
React ejecuta el componente para obtener una descripción. Después compara esa descripción con la anterior y aplica los cambios necesarios al DOM.
tsx
function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount((value) => value + 1)}>
{count}
</button>
);
}Estado mínimo
Guardá solamente lo que cambia y no puede calcularse desde otras variables. El estado duplicado se contradice tarde o temprano.
tsx
// No guardes fullName en otro estado
const fullName = `${firstName} ${lastName}`;Un efecto sincroniza
useEffect sirve para sincronizar React con algo externo: red, storage, timers o APIs del navegador. No lo uses para calcular datos durante el render.
Ciclo de renderizado● interactivo
EVENTSTATERENDERCOMMIT
Diseñá el estado
Armá un buscador con input, lista original y resultados filtrados. Decidí qué valores son estado real.
Mostrar una pista
El texto ingresado cambia; la lista filtrada puede calcularse.