События

function Search({ onSearch }) {
  const [q, setQ] = useState("");
  return (
    <form onSubmit={(e) => { e.preventDefault(); onSearch(q); }}>
      <input value={q} onChange={(e) => setQ(e.target.value)} />
      <button>Найти</button>
    </form>
  );
}

Что важно знать

• Передавать функцию, а не вызывать её: onClick={handleClick}, а не onClick={handleClick()}.
• Данные текут вниз через props, события — вверх через колбэки (onSearch, onChange).
• React вешает обработчики на корень приложения (делегирование) и передаёт синтетическое событие с тем же интерфейсом, что у браузерного.
• e.stopPropagation() и e.preventDefault() работают как обычно.
• Обработчик видит состояние на момент рендера — замыкание. Отсюда «устаревшее состояние» в таймерах и подписках.