Formularios y estado compartido

Los formularios son un caso clásico en React porque mezclan UI, eventos y estado.

Input controlado

Un input controlado toma su valor desde el estado.

import { useState } from 'react';

function SearchForm() {
  const [query, setQuery] = useState('');

  return (
    <input
      value={query}
      onChange={(e) => setQuery(e.target.value)}
      placeholder="Buscar..."
    />
  );
}

React pasa a ser la fuente de verdad del valor.

Enviar formularios

function LoginForm() {
  const [email, setEmail] = useState('');

  function handleSubmit(e) {
    e.preventDefault();
    console.log('Enviar', email);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input value={email} onChange={(e) => setEmail(e.target.value)} />
      <button type="submit">Entrar</button>
    </form>
  );
}

e.preventDefault() evita el comportamiento nativo de recarga.

Lifting state up

Cuando dos componentes necesitan el mismo dato, el estado no debería vivir duplicado en ambos. Se sube al ancestro común más cercano.

function App() {
  const [query, setQuery] = useState('');

  return (
    <>
      <SearchBar query={query} onQueryChange={setQuery} />
      <ResultsList query={query} />
    </>
  );
}

Esto mantiene una sola fuente de verdad.

Señales de mal diseño

• el mismo dato existe en varios estados distintos
• un hijo intenta “adivinar” el estado de otro
• pasas demasiadas props por demasiados niveles

El primer paso no es instalar otra librería. El primer paso es recolocar bien el estado.

En la última lección cerramos con reglas mentales para escribir React más limpio desde el principio.