94 cards across 6 sections
startTransition
Suspense
Activity
useEffectEvent
cacheSignal
react-dom
useMemo
useCallback
jsx()
{expr}
props
props.children
&&
return null
0
''
.map()
key
<>...</>
React.Fragment
[value, setValue]
setValue(v => v + 1)
(state, action) => newState
useState
use
{ current }
htmlFor
setState
useEffect
exhaustive-deps
Effect Event
use()
createContext
useContext
React.memo
children
<Suspense fallback={...}>
throws
isPending
<Activity mode="hidden">
static getDerivedStateFromError
componentDidCatch
await
'use server'
use(promise)
if
'use client'
findBy
waitFor
setCount(c => c + 1);setCount(c => c + 1);// both increments apply
useReducer
const [state] = useState(() => { return expensiveInit();});
useDeferredValue
const deferred = useDeferredValue(query);const results = useMemo( () => search(deferred), [deferred]);
<UserForm key={userId} />// remounts (and resets) per user
const onTick = useEffectEvent(() => { log(latestCount);});useEffect(() => { const id = setInterval(onTick, 1000); return () => clearInterval(id);}, []);
const onSave = useCallback(() => { save(id);}, [id]);<MemoChild onSave={onSave} />
function Profile({ userPromise }) { const user = use(userPromise); return <h1>{user.name}</h1>;}
ErrorBoundary
<ErrorBoundary key={retryCount}> <Widget /></ErrorBoundary>
useId
id
const id = useId();<label htmlFor={id}>Name</label><input id={id} />
useSyncExternalStore
const online = useSyncExternalStore( subscribe, getSnapshot);
startTransition(() => { setFilteredList(filter(items, query));});
const [form, setForm] = useState({ name: '', email: ''});
<Activity mode={tab === 'b' ? 'visible' : 'hidden'}> <TabB /></Activity>
const ThemeCtx = createContext(theme);const CursorCtx = createContext(pos);
getByRole
render(<Login />);await userEvent.click( screen.getByRole('button', { name: /sign in/i }));
useLayoutEffect
useTransition
<Suspense fallback>
React.lazy
.push()
map
filter
toSorted
AbortController
{}
[]
onClick
onSubmit