Mentální model React Hooks

Jak to funguje

useState volej na nejvyšší úrovni komponenty a odvozené hodnoty, například filtrovaný seznam, počítej během renderování; pokud se potřebuješ přihlásit k události prohlížeče nebo synchronizovat externí systém, použij efekt s úklidem, aby odběr nepřežil komponentu, které patří.

function Search({ items }) {
  const [query, setQuery] = useState("");
  const visible = items.filter(item => item.includes(query));
  return <>
    <input aria-label="Search" value={query}
      onChange={e => setQuery(e.target.value)} />
    <p>{visible.join(", ")}</p>
  </>;
}

Častý omyl

Odvozené hodnoty obvykle patří do renderu, ne do efektu.

Krátké procvičení

Další témata

• JavaScript closures srozumitelně
• Základy zužování typů v TypeScriptu
• SQL JOIN bez hádání
• Bezpečný Git rebase