React-spiekbriefje
Een doorzoekbaar, afdrukbaar React 19-naslagwerk — componenten, JSX, hooks, de nieuwe Actions-API's, context, refs en prestaties. Gratis.
Componenten & JSX
12function App() { return <h1>Hi</h1>; }
Een functiecomponent die JSX retourneert
export default function App() {}
Default-exporteer een component
<Greeting name="Ada" />
Render een component met props
{1 + 2} or {user.name}
Embed een JS-expressie met accolades
<>{a}{b}</>
Fragment groepeert nodes, geen extra DOM
<div className="card">
Gebruik className, niet class, voor CSS
{isOpen && <Menu />}
Render voorwaardelijk met &&
{ok ? <Yes /> : <No />}
Kies tussen nodes met een ternary
{items.map(i => <li key={i.id}>{i.t}</li>)}
Render een lijst uit een array
function Btn({ label, onClick }) {}
Destructureer props in de signatuur
function Card({ children }) { return children; }
Lees geneste JSX via de children-prop
<input value={v} onChange={onChange} />
Controlled input gekoppeld aan state
Rendering & setup
10import { createRoot } from 'react-dom/client'
Importeer de client-root-API
createRoot(document.getElementById('root')).render(<App/>)
Mount de app in de DOM
import { StrictMode } from 'react'
Importeer de StrictMode-wrapper
<StrictMode><App /></StrictMode>
Breng bugs aan het licht in development
import { hydrateRoot } from 'react-dom/client'
Importeer de hydratie-API
hydrateRoot(el, <App />)
Koppel React aan server-HTML
root.unmount()
Breek een gemounte root af
import App from './App.jsx'
Importeer een component uit een module
<App {...props} />
Spread een object als props
export { Button, Card }
Named-exporteer meerdere componenten
State & effects
12const [count, setCount] = useState(0)
Declareer een state-variabele
setCount(c => c + 1)
Werk bij vanaf de vorige waarde
setUser(u => ({ ...u, name }))
Werk object-state immutabel bij
useEffect(() => { run(); }, [dep])
Voer een effect uit wanneer deps veranderen
useEffect(() => { /* once */ }, [])
Voer een effect alleen uit bij mount
useEffect(() => () => cleanup(), [])
Retourneer een cleanup-functie
const ref = useRef(null)
Behoud een mutabele waarde over renders heen
const [state, dispatch] = useReducer(r, init)
Beheer complexe state met een reducer
const theme = useContext(ThemeContext)
Lees de dichtstbijzijnde context-waarde
const memo = useMemo(() => calc(a), [a])
Memoize een dure berekening
useLayoutEffect(() => {}, [])
Voer synchroon uit na layout
useSyncExternalStore(sub, get)
Abonneer op een externe store
React 19-hooks & API's
12import { use } from 'react'
Importeer de nieuwe use-API
const data = use(promise)
Lees een promise, schort op tot klaar
const theme = use(ThemeContext)
Lees context, voorwaardelijk toegestaan
const [state, action, pending] = useActionState(fn, init)
Track state, action en pending
const [opt, addOpt] = useOptimistic(state, reducer)
Toon een optimistische waarde direct
const { pending } = useFormStatus()
Lees de submit-status van het parent-formulier
const [isPending, startTransition] = useTransition()
Markeer updates als niet-urgent
startTransition(async () => await save())
Voer een async Action uit in een transition
const deferred = useDeferredValue(value)
Stel een waarde uit om de UI responsief te houden
const id = useId()
Genereer een stabiel uniek id
<title>Page title</title>
Render metadata overal in de tree
function Input({ ref }) {}
ref is een normale prop, geen forwardRef
Formulieren & Actions
12<form action={handleSubmit}>
Geef een functie door als form-Action
function handleSubmit(formData) {}
Action ontvangt de FormData
formData.get('email')
Lees een veld uit FormData
const [state, action] = useActionState(submit, null)
Koppel een Action aan component-state
<form action={action}>
Gebruik de gewikkelde Action op het formulier
const [s, a, pending] = useActionState(fn, init)
Stel een pending-flag bloot voor de UI
return { error: 'Invalid' }
Retourneer error-state uit een Action
function Submit() { const { pending } = useFormStatus() }
Lees pending binnen de submit-knop
<button disabled={pending}>Save</button>
Schakel submit uit terwijl pending
import { requestFormReset } from 'react-dom'
Importeer de form-reset-helper
requestFormReset(formEl)
Reset een uncontrolled formulier
<form action={action}><Submit /></form>
Stel Action-formulier samen met status
Props & compositie
10function Hi({ name = 'Guest' }) {}
Standaard-prop via destructuring
function Box({ children }) { return children; }
Wikkel content met de children-prop
<Box><p>Inside</p></Box>
Geef JSX door als children
function List({ render }) { return render(); }
Render-prop-patroon
<List render={() => <Item />} />
Verstrek een render-functie
<Input {...props} />
Forward alle props met spread
const { id, ...rest } = props
Kies een prop en geef de rest door
<Avatar {...rest} size="lg" />
Spread en overschrijf dan een prop
function Btn(props: BtnProps) {}
Typeer props met TypeScript-interfaces
<Slot label={<b>Hi</b>} />
Geef JSX door via een benoemde prop
Events
10<button onClick={handleClick}>
Koppel een click-handler
function handleClick(e) {}
Ontvang het synthetische event
<input onChange={e => set(e.target.value)} />
Lees een invoerwaarde bij wijziging
<form onSubmit={e => e.preventDefault()}>
Stop de standaard form-submit
e.stopPropagation()
Voorkom dat het event bubbelt
<li onClick={() => remove(id)}>
Geef argumenten door met een closure
<input onKeyDown={e => e.key === 'Enter'}
Verwerk een specifieke toetsaanslag
<div onMouseEnter={hover}>
Luister naar pointer-events
e.currentTarget.value
Lees het element waarop de handler zit
<button onClick={() => {}} type="button">
Vermijd impliciete formulierverzending
Lijsten & keys
10arr.map(x => <li key={x.id}>{x.t}</li>)
Render één node per item
key={item.id}
Geef elk item een stabiele key
key={index}
Index-keys alleen voor statische lijsten
users.map(u => <Card key={u.id} {...u} />)
Spread itemvelden als props
{list.length === 0 && <Empty />}
Toon een fallback voor lege lijsten
import { Fragment } from 'react'
Importeer Fragment voor keyed groepen
<Fragment key={id}>{a}{b}</Fragment>
Een keyed fragment in een lijst
{rows.filter(r => r.on).map(...)}
Filter vóór het mappen
Keys must be unique among siblings
Waarom keys React helpen lijsten te diffen
{[...Array(n)].map((_, i) => ...)}
Map een bereik met vaste lengte
Context
10const ThemeContext = createContext('light')
Maak een context met een default
import { createContext } from 'react'
Importeer de context-factory
<ThemeContext value={theme}>
Verstrek een waarde (React 19-syntaxis)
<ThemeContext value={theme}><App /></ThemeContext>
Wikkel de tree die hem leest
const theme = useContext(ThemeContext)
Lees context met useContext
const theme = use(ThemeContext)
Lees context met de use-API
if (cond) { const t = use(Ctx); }
use kan context voorwaardelijk lezen
export const ThemeContext = createContext()
Exporteer een gedeelde context
<Ctx value={{ user, setUser }}>
Geef een object door als de waarde
Avoid new objects each render
Memoize waarden om re-renders te beperken
Refs
10const inputRef = useRef(null)
Maak een ref-houder
<input ref={inputRef} />
Koppel de ref aan een node
inputRef.current.focus()
Benader de DOM-node via current
function Field({ ref }) { return <input ref={ref} /> }
ref als prop, geen forwardRef
<Field ref={inputRef} />
Geef een ref door aan een component
useImperativeHandle(ref, () => ({ focus }))
Stel een imperatieve API bloot
const setRef = node => { box = node; }
Gebruik een callback-ref
<div ref={setRef} />
Koppel een callback-ref
const count = useRef(0)
Bewaar een waarde zonder opnieuw te renderen
ref={node => { return () => cleanup(); }}
Callback-ref met cleanup (React 19)
Prestaties
10const Memo = memo(Component)
Sla re-render over wanneer props gelijk zijn
import { memo } from 'react'
Importeer de memo-helper
const value = useMemo(() => calc(a), [a])
Cache een berekende waarde
const fn = useCallback(() => f(a), [a])
Cache een functie-identiteit
const Lazy = lazy(() => import('./Big.jsx'))
Code-split een component
import { lazy, Suspense } from 'react'
Importeer lazy en Suspense
<Suspense fallback={<Spin />}><Lazy /></Suspense>
Toon een fallback tijdens het laden
startTransition(() => setQuery(q))
Markeer niet-urgente state-updates
const slow = useDeferredValue(query)
Stel dure afgeleide UI uit
React Compiler auto-memoizes
Verwijdert vaak handmatige memoization
Diversen & metadata
10<Suspense fallback={<Loading />}>
Boundary voor async content
class ErrorBoundary extends Component {}
Vang render-fouten op (legacy class)
<title>My Page</title>
Hijs document-titel omhoog vanuit een component
<meta name="description" content="..." />
Render meta-tags in de head
<link rel="stylesheet" href="..." />
Hijs een stylesheet-link omhoog
<Comp key={id} />
Wijzig key om een component opnieuw te mounten
React.lazy(() => import('./Page.jsx'))
Importeer een route-component lazy
createPortal(node, container)
Render in een andere DOM-node
{/* a comment */}
Schrijf een commentaar binnen JSX
cleanup return in useEffect
Geef abonnementen/timers altijd vrij
Geen vermelding komt overeen met “:q”.
Hulp nodig?
Een probleem met deze tool gevonden? Laat het ons weten.