Amsterdamse productteams vragen in 2026 zelden naar “kennis van class components”. Zij vragen of u een scherm kunt bouwen waarvan de staten kloppen, of u een server component van een client-eiland kunt onderscheiden, en of u een hook kunt uitleggen zonder de documentatie erbij te houden. Dit artikel is de lesnotitie die Mark van Leeuwen na cohortavonden uitschrijft, zodat de React cursus van NLCodeCraft Frontend Academy niet blijft hangen in API-bingo.

Hooks zijn nog steeds het gereedschap voor interactie. Het misverstand is dat meer hooks meer vakmanschap betekenen. Een effect dat data ophaalt terwijl een parent al een query-laag heeft, is geen moderniteit. Het is dubbel werk en een race. In de academy tekenen wij eerst de data-grens: wat is UI-state (open/dicht, veldwaarde), wat is server-state (lijst gebruikers, factuurstatus). Pas daarna mag useEffect. Wie die volgorde omdraait, bouwt een component dat in Storybook werkt en in productie flikkert.

Server Components veranderen het gesprek, niet de plicht tot toegankelijke HTML. Een server-gerenderde kop is nog steeds een kop. Een client-button is nog steeds een button. Wat wél verandert: u sleept niet langer de hele pagina door de browser omdat “React dat zo doet”. In teams rond de Zuidas en de Knowledge Mile zien wij starters die ‘use client’ op de root zetten “zodat het werkt”. Dat is het omgekeerde van craft. De Next.js-module bestaat omdat die fout duur is.

Wat teams wél vragen in intakes: kunt u een lege staat ontwerpen? Kunt u een fout tonen zonder de hele layout te slopen? Kunt u uitleggen waarom deze state hier leeft en niet in context? Dat zijn geen framework-features. Dat zijn schermbeslissingen. React is daarbij de taal. Wie alleen de taal leert zonder de beslissingen, blijft tutorial-vloeiend en team-stil.

function useDismissible(id: string) {
  const [open, setOpen] = useState(true);
  useEffect(() => {
    const seen = sessionStorage.getItem(id);
    if (seen) setOpen(false);
  }, [id]);
  return { open, dismiss: () => { sessionStorage.setItem(id, "1"); setOpen(false); } };
}

Let op wat dit voorbeeld niet is: een data-laag. Het is UI-state met een browser-API, dus client. Die zin moet u in een review kunnen zeggen. Kunt u dat niet, dan is de hook te vroeg. Oefen het in een kleine academy-opdracht voordat u het in een monorepo zet.

Interne verwijzing voor wie verder wil oefenen: combineer dit met de staten-unie uit de TypeScript-track, en met de reviewchecklist op de Checklists-pagina. Een hook zonder foutstaat is een demo.