React Frontend Framework Cheat Sheet

Updated 2026-04-27

React is a declarative, component-based JavaScript library for building user interfaces, maintained by Meta. It uses a virtual DOM and Fiber reconciliation engine to efficiently update only what changes in the actual DOM. React 19 — the most significant release since React 18 — introduced an action-based async model, Server Components, and new hooks (useActionState, useFormStatus, useOptimistic) that simplify data mutation and form handling. The React Compiler (v1.0, stable since October 2025) now automatically memoizes components at build time, making most manual useMemo and useCallback unnecessary in new code.

Quick Index200 entries · 21 tables

Mind Map

21 tables, 200 concepts. Select a concept node to jump to its table row.

Preparing mind map...

Table 1: Core Hooks

Hook	Example	Description
useState	`const [count, setCount] = useState(0)`	• Adds local state to functional components • returns current value and updater function that triggers re-render.
useEffect	`useEffect(() => {` `fetchData()` `}, [id])`	• Runs side effects after render • empty array runs once on mount, deps trigger on changes, cleanup via return function.
useContext	`const theme = useContext(ThemeContext)`	• Consumes Context values without wrapping in Consumer • subscribes to nearest Provider above in tree.
useRef	`const inputRef = useRef(null)`	• Creates mutable reference that persists across renders without triggering updates • commonly used for DOM access.
useReducer	`const [state, dispatch] = useReducer(reducer, init)`	• Alternative to useState for complex state logic • accepts reducer `(state, action) => newState` following Redux pattern.
useMemo	`const value = useMemo(() => compute(a, b), [a, b])`	• Memoizes computed values to avoid expensive recalculations • only recomputes when dependencies change.
useCallback	`const handler = useCallback(() => fn(id), [id])`	• Memoizes function identity between renders • prevents child re-renders when passing callbacks as props.
useActionState	`const [state, formAction, isPending] = useActionState(fn, init)`	• React 19 hook that ties an async action to state • returns current state, a dispatchable action ref, and pending flag; eliminates manual loading/error `useState` boilerplate.
useFormStatus	`const { pending } = useFormStatus()`	• React 19 hook that reads the parent form's submission state • must be called from a component inside a `<form>`; provides `pending`, `data`, `method`, `action`.
useOptimistic	`const [optimistic, addOptimistic] = useOptimistic(state, fn)`	• Shows optimistic UI update immediately before async action completes • automatically reverts on error.
useTransition	`const [isPending, startTransition] = useTransition()`	• Marks state updates as non-urgent transitions • React 19 supports async functions — keeps UI responsive by deferring or pausing low-priority work.
useDeferredValue	`const deferredValue = useDeferredValue(searchQuery)`	• Returns deferred version of value that lags behind during urgent updates • useful for expensive rendering like filtered lists.
useLayoutEffect	`useLayoutEffect(() => {` `measure()` `}, [])`	• Synchronous version of useEffect that fires before browser paint • use for DOM measurements to prevent visual flicker.
useId	`const id = useId()`	• Generates unique stable IDs for accessibility attributes • ensures matching IDs between server and client in SSR.
useImperativeHandle	`useImperativeHandle(ref, () => ({` `focus: () => input.focus()` `}))`	• Customizes ref instance value exposed to parent • works with `forwardRef` or ref-as-prop (React 19+) to control imperative API.
useEffectEvent	`const onMsg = useEffectEvent(data => {` `if (!muted) play(data)` `})`	• Creates a non-reactive callback that always reads latest props/state • safe to call inside effects without adding to deps array; experimental in React 19.

Table 2: Component Fundamentals

Concept	Example	Description
Functional Component	`function Button({ text }) {` `return <button>{text}</button>` `}`	• Pure function that accepts props and returns JSX • preferred over class components since hooks in React 16.8.
Props	`<UserCard name="Alice" age={30} />`	• Read-only data passed from parent to child • treated as function arguments enabling component reusability.
Children prop	`<Card>` `<h1>Title</h1>` `</Card>`	• Special prop containing nested JSX elements between opening and closing tags • enables composition patterns.
Default props	`function Btn({ type = 'button' }) {}`	• Fallback values for props using ES6 default parameters • replaced older `Component.defaultProps` static property.
Prop destructuring	`function User({ name, email }) {}`	• Extracts props directly in function parameters • supports nested destructuring and renaming.
Component composition	`<Layout>` `<Sidebar />` `<Content />` `</Layout>`	• Building complex UIs from simpler components • preferred over inheritance following "composition over inheritance" principle.
Pure component	`const MemoComp = React.memo(Component)`	• Component that returns same output for same props • `React.memo` wraps functional components for shallow prop comparison.
Fragment	`<>` `<td>A</td>` `<td>B</td>` `</>`	• Returns multiple elements without extra DOM nodes • shorthand `<>` or explicit `<React.Fragment>` with key support.
Ref as prop	`function Input({ ref, ...props }) {` `return <input ref={ref} {...props} />` `}`	• React 19: ref can be passed as a regular prop to function components • eliminates need for `forwardRef` wrapper.

Table 3: JSX and Rendering

Pattern	Example	Description
JSX expression	`<h1>Hello {user.name}</h1>`	• Embeds JavaScript expressions in markup using curly braces • evaluates to React elements at runtime.
Conditional rendering	`{isLoggedIn ? <Dashboard /> : <Login />}`	• Renders elements based on conditions using ternary operator, `&&`, or if statements • no special template syntax.
List rendering	`{items.map(item => <Item key={item.id} {...item} />)}`	• Transforms arrays into element lists using `map()` • requires unique `key` prop for reconciliation optimization.
Key prop	`<li key={user.id}>{user.name}</li>`	• Helps React identify changed items in lists • should be stable and unique — avoid array indices for dynamic lists.
Document Metadata	`<title>My Page</title>` `<meta name="description" content="..." />`	React 19: `<title>`, `<link>`, and `<meta>` tags rendered anywhere in the component tree are automatically hoisted to `<head>`.
Inline styling	`<div style={{ color: 'red', fontSize: 16 }} />`	• Applies styles as JavaScript object with camelCased properties • numeric values auto-append `px` for lengths.
className	`<div className="btn btn-primary" />`	Sets CSS classes using `className` (not `class`) to avoid JavaScript keyword conflict.
dangerouslySetInnerHTML	`<div dangerouslySetInnerHTML={{ __html: markup }} />`	• Injects raw HTML directly • named to highlight XSS risk — always sanitize untrusted content before use.
Portal	`createPortal(<Modal />, document.body)`	• Renders children into DOM node outside parent hierarchy • useful for modals and tooltips while maintaining event bubbling.

Table 4: State Management

Technique	Example	Description
Local state	`const [name, setName] = useState('')`	• State scoped to single component using `useState` • re-renders component when updated.
State updater function	`setCount(prev => prev + 1)`	• Passes function to setter instead of value • ensures update uses most recent state — critical in async contexts.
Controlled component	`<input value={text} onChange={e => setText(e.target.value)} />`	• Form element whose value is controlled by React state • value prop + onChange handler create single source of truth.
Context API	`const Ctx = createContext()` `<Ctx value={data}>`	• Shares data across component tree without prop drilling • Provider supplies value, consumers subscribe via `useContext`.
Reducer pattern	`const reducer = (state, action) => {` `switch(action.type) {...}` `}`	• Centralizes complex state logic in pure reducer function • action objects describe state changes declaratively.
State batching	`setName('Alice')` `setAge(30)`	React 18+ groups multiple state updates into a single re-render automatically — even in promises and timeouts.
Derived state	`const fullName = firstName + ' ' + lastName`	• Values computed from props/state during render • avoid storing in separate state to prevent synchronization bugs.
Lifting state up	`const [val, setVal] = useState()` `<A val={val} />` `<B onChange={setVal} />`	• Move state to nearest common ancestor when multiple siblings need the same data • passed down as props.
Uncontrolled component	`<input defaultValue="hi" ref={inputRef} />`	• Form element that manages own state via DOM • access value through refs instead of state.
State colocation	`function Panel() {` `const [open, setOpen] = useState(false)` `}`	• Place state closest to where it's used • limits re-render scope and opposes premature lifting.

Table 5: Effects and Lifecycle

Pattern	Example	Description
Effect with cleanup	`useEffect(() => {` `const id = setInterval(tick, 1000)` `return () => clearInterval(id)` `}, [])`	• Effect returning cleanup function runs before unmount or before next effect • prevents memory leaks.
Dependency array	`useEffect(() => fetch(url), [url])`	Controls when effect runs — empty array runs once on mount, omitted runs every render, with deps runs on changes.
Custom Hook	`function useWindowSize() {` `const [size, setSize] = useState(...)` `useEffect(() => {...}, [])` `return size` `}`	• Extracts reusable stateful logic into function prefixed with "use" • can call other hooks internally.
Effect synchronization	`useEffect(() => {` `socket.connect()` `return () => socket.disconnect()` `}, [roomId])`	• Keeps component synchronized with external system • connection logic mirrors component lifecycle.
Data fetching	`useEffect(() => {` `fetch(url).then(r => r.json()).then(setData)` `}, [url])`	• Loading external data in effect • consider React Query or SWR for production use to handle race conditions.
Event listeners	`useEffect(() => {` `window.addEventListener('resize', handle)` `return () => window.removeEventListener('resize', handle)` `}, [])`	• Attaching global event handlers outside React's event system • cleanup prevents duplicate listeners.
Interval/Timeout	`useEffect(() => {` `const id = setTimeout(() => setShow(true), 1000)` `return () => clearTimeout(id)` `}, [])`	• Running timed operations • cleanup cancels pending timers to avoid state updates on unmounted components.
Layout effect	`useLayoutEffect(() => {` `const h = ref.current.offsetHeight` `setHeight(h)` `}, [])`	• Fires synchronously before browser paint • use for DOM measurements that affect layout to prevent flicker.

Table 6: Performance Optimization

Technique	Example	Description
React Compiler	`// babel-plugin-react-compiler` `// no code changes required`	• Build-time tool (v1.0, stable Oct 2025) that automatically memoizes components and hooks • makes most manual `useMemo`/`useCallback` unnecessary; opt-in via Babel/Vite plugin.
React.memo	`const List = React.memo(function List({ items }) {...})`	• Prevents re-renders if props haven't changed using shallow comparison • second argument allows custom comparison.
useMemo	`const sorted = useMemo(() => items.sort(), [items])`	• Caches expensive computations between renders • React Compiler handles this automatically when enabled.
useCallback	`const onClick = useCallback(() => fn(id), [id])`	• Memoizes function reference to prevent unnecessary child re-renders • React Compiler handles this automatically when enabled.
Code splitting	`const Comp = React.lazy(() => import('./Comp'))`	• Splits bundle into smaller chunks loaded on demand • `React.lazy` with dynamic `import()` creates split points.
Suspense	`<Suspense fallback={<Spinner />}>` `<LazyComp />` `</Suspense>`	• Shows fallback UI while lazy component or async data loads • works with `React.lazy` and data fetching libraries.
List virtualization	`<FixedSizeList height={400} itemCount={1000} itemSize={35}>`	• Renders only visible list items using libraries like `react-window` • dramatically improves performance for long lists.
useTransition	`startTransition(() => setQuery(input))`	• Marks updates as low priority • keeps UI responsive during expensive re-renders by allowing React to interrupt work.
useDeferredValue	`const deferred = useDeferredValue(searchTerm)`	• Creates laggy version of value that updates after urgent renders • alternative to debouncing for responsive UIs.
Key optimization	`items.map(item => <Item key={item.id} />)`	• Using stable unique keys helps React identify which items changed • avoids unnecessary DOM mutations.
Production build	`npm run build`	• Creates optimized bundle with minification and dead code elimination • significantly faster than development build.

Table 7: Component Patterns

Pattern	Example	Description
Compound components	`<Tabs>` `<Tabs.List>` `<Tabs.Tab />` `</Tabs.List>` `</Tabs>`	• Components that work together sharing implicit state • creates cohesive API like native HTML `<select>` and `<option>`.
Provider pattern	`<ThemeProvider>` `<App />` `</ThemeProvider>`	• Wraps tree with Context Provider to share values • avoids prop drilling for global concerns like theme or auth.
Render props	`<DataProvider render={data => <Display data={data} />} />`	• Passes function as prop that component calls to determine render output • largely superseded by custom hooks.
Higher-Order Component	`const Enhanced = withAuth(Component)`	• Function that takes component and returns enhanced version • adds props or wraps with logic — less common since hooks and React Compiler.
Composition	`<Card>` `{children}` `</Card>`	• Building components by combining smaller ones • uses `children` prop to accept nested content flexibly.
Slot pattern	`<Layout header={<Header />} sidebar={<Sidebar />} />`	• Passes multiple JSX elements as named props • more explicit than `children` for complex layouts.
Container/Presentational	`// Container: fetches data` `// Presentational: renders UI`	• Separates logic from presentation • containers handle state/effects, presentational components are pure functions.
Controlled vs Uncontrolled	`// Controlled: value={state}` `// Uncontrolled: ref={inputRef}`	• Controlled components use React state as source of truth • uncontrolled rely on DOM state accessed via refs.
Activity component	`<Activity mode="hidden">` `<ExpensivePanel />` `</Activity>`	• React 19.2: hides or shows UI while preserving component state and subscriptions • `mode` is `"visible"` or `"hidden"`.

Table 8: Event Handling

Concept	Example	Description
Event handler	`<button onClick={handleClick}>Click</button>`	• Function passed to event prop • convention names handlers `handleEvent` or `onEvent`.
Event object	`function handle(e) {` `e.preventDefault()` `console.log(e.target.value)` `}`	• SyntheticEvent instance with `target`, `currentTarget` • methods `preventDefault()`, `stopPropagation()`.
Synthetic events	`onClick={e => console.log(e.type)}`	• React's cross-browser wrapper around native events • normalized API works consistently across all browsers.
Passing arguments	`onClick={() => deleteRow(id)}`	• Binding additional parameters to handlers using arrow function or `bind` • arrow function is more common.
Named handler	`const handleClick = () => {...}` `<button onClick={handleClick}>`	• Declaring function separately then passing reference • better for reusability and testing than inline.
Inline handler	`<button onClick={() => alert('clicked')}>`	• Defining function directly in JSX • convenient for simple logic but creates new function each render.
Event delegation	React attaches all handlers to the root container; events bubble up to a single listener for performance.	• React 17+ attaches to root instead of document • improves micro-frontend isolation and compatibility.
Custom events	`const event = new CustomEvent('myEvent')` `element.dispatchEvent(event)`	• Dispatching browser custom events • React handlers work with native custom events on refs.

Table 9: Forms and Validation

Technique	Example	Description
Controlled input	`<input value={name} onChange={e => setName(e.target.value)} />`	• Input value controlled by state • onChange handler updates state creating bidirectional binding.
Form Actions	`const [state, formAction] = useActionState(fn, init)` `<form action={formAction}>`	• React 19: native `action` prop accepts an async function • React manages pending state, errors, and resets automatically.
Form submission	`<form onSubmit={e => {` `e.preventDefault()` `submit(data)` `}}>`	Intercepting submit event to prevent default page reload and handle data programmatically.
Multiple inputs	`const change = e => setState({...state, [e.target.name]: e.target.value})`	Handling multiple form fields with single handler using `name` attribute and computed property names.
Checkbox	`<input type="checkbox" checked={agreed} onChange={e => setAgreed(e.target.checked)} />`	• Uses `checked` prop and `e.target.checked` for value • controlled with boolean state.
Select dropdown	`<select value={selected} onChange={e => setSelected(e.target.value)}>` `<option value="a">A</option>` `</select>`	• Uses `value` on `<select>` not `selected` on `<option>` • single source of truth pattern.
Textarea	`<textarea value={text} onChange={e => setText(e.target.value)} />`	• Uses `value` prop like inputs (not children) • controlled the same way for consistency.
File input	`<input type="file" ref={fileRef} />`	• Always uncontrolled because value is read-only • access files via `fileRef.current.files`.
Form libraries	`const { register, handleSubmit } = useForm()`	Libraries like React Hook Form or Formik reduce boilerplate for validation, submission, and field management.
Validation	`const error = email && !email.includes('@') ? 'Invalid email' : null`	• Implementing inline validation by checking state values • display errors conditionally based on validation rules.

Table 10: Refs and DOM Access

Method	Example	Description
useRef	`const inputRef = useRef(null)` `<input ref={inputRef} />`	• Creates mutable reference to DOM element or value • `current` persists without causing re-renders.
DOM manipulation	`inputRef.current.focus()`	• Directly calling DOM methods via ref • escape hatch for imperative operations React doesn't provide.
Ref as prop	`function Input({ ref }) {` `return <input ref={ref} />` `}`	• React 19: ref is a regular prop in function components • no `forwardRef` wrapper needed — simpler and cleaner.
Ref forwarding	`const Comp = forwardRef((props, ref) => <input ref={ref} />)`	• Legacy pattern passing ref from parent through component to child • still works but `forwardRef` will be deprecated in favor of ref-as-prop.
Ref cleanup	`<div ref={node => {` `setup(node)` `return () => cleanup(node)` `}} />`	• React 19: ref callbacks can return a cleanup function called when element unmounts • replaces manual null check pattern.
Callback ref	`<div ref={node => setNode(node)} />`	• Ref as function called with DOM node on mount and `null` on unmount • useful for measuring or observing nodes.
Refs in loops	`const itemRefs = useRef(new Map())` `<div ref={node => itemRefs.current.set(id, node)} />`	• Storing multiple refs in Map or array • ref callback pattern manages dynamic lists of refs.
useImperativeHandle	`useImperativeHandle(ref, () => ({` `focus: () => inputRef.current.focus()` `}))`	• Customizes instance value exposed to parent via ref • controls what methods/properties are public.
Storing values	`const countRef = useRef(0)` `countRef.current++`	• Using ref to hold mutable value that doesn't trigger re-renders • useful for intervals, previous values, instance variables.

Table 11: Context and Global State

Pattern	Example	Description
createContext	`const ThemeContext = createContext('light')`	• Creates Context object with default value • default used when no Provider exists above in tree.
Context Provider	`<ThemeContext value="dark">` `<App />` `</ThemeContext>`	React 19: use context directly as a Provider — `<ThemeContext value="...">` replaces legacy `<ThemeContext.Provider value="...">`.
useContext	`const theme = useContext(ThemeContext)`	• Reads context value from nearest Provider above • replaces older `Context.Consumer` pattern.
Context with reducer	`const [state, dispatch] = useReducer(reducer, init)` `<Ctx value={{state, dispatch}}>`	• Combining Context + useReducer for global state management • lightweight alternative to Redux for simpler apps.
Custom provider	`function DataProvider({ children }) {` `const [data, setData] = useState()` `return <Ctx value={{data, setData}}>{children}</Ctx>` `}`	• Wrapping Provider in component with logic • encapsulates state management and provides clean API.
Multiple contexts	`<ThemeProvider>` `<UserProvider>` `<App />` `</UserProvider>` `</ThemeProvider>`	• Nesting multiple Providers for different concerns • component can consume multiple contexts with separate `useContext` calls.
Context performance	`const value = useMemo(() => ({state, dispatch}), [state])`	• Memoizing context value prevents unnecessary consumer re-renders • split contexts to limit update scope.

Table 12: Error Handling

Technique	Example	Description
Error Boundary	`class ErrorBoundary extends React.Component {` `componentDidCatch(error, info) {...}` `render() { return this.state.hasError ? <Fallback /> : this.props.children }` `}`	• Class component that catches JavaScript errors in child tree • displays fallback UI instead of crashing the entire app.
getDerivedStateFromError	`static getDerivedStateFromError(error) {` `return { hasError: true }` `}`	• Lifecycle method for updating state when error is thrown • used to render fallback in the next render pass.
componentDidCatch	`componentDidCatch(error, errorInfo) {` `logError(error, errorInfo.componentStack)` `}`	• Lifecycle for side effects after error is caught • log errors to reporting service while displaying fallback.
Error boundary library	`<ErrorBoundary FallbackComponent={ErrorFallback}>` `<App />` `</ErrorBoundary>`	react-error-boundary provides hooks-based error handling (`useErrorBoundary`), reset, and retry capabilities.
Suspense boundary	`<Suspense fallback={<Loading />}>` `<AsyncComp />` `</Suspense>`	• Shows fallback while async components or data loads • catches thrown promises from `React.lazy` or data fetching.
Try-catch in handlers	`try {` `riskyOperation()` `} catch (error) {` `setError(error.message)` `}`	• Manual error handling in event handlers or effects • Error Boundaries do not catch errors in these contexts.

Table 13: Routing (React Router)

Component	Example	Description
BrowserRouter	`<BrowserRouter>` `<App />` `</BrowserRouter>`	• Uses HTML5 history API for clean URLs • wraps app to enable routing without hash.
Routes	`<Routes>` `<Route path="/" element={<Home />} />` `</Routes>`	• Container for route definitions replacing older `<Switch>` • matches first route that fits.
Route	`<Route path="/users/:id" element={<User />} />`	• Defines path-to-component mapping • dynamic segments start with `:` for parameters.
Link	`<Link to="/about">About</Link>`	• Creates navigation links without full page reload • renders anchor tag with click handler.
NavLink	`<NavLink to="/home" className={({isActive}) => isActive ? 'active' : ''} />`	• Like Link but adds active styling when current route matches • useful for navigation menus.
useNavigate	`const navigate = useNavigate()` `navigate('/dashboard')`	• Hook for programmatic navigation • replaces older `useHistory` with simpler API.
useParams	`const { id } = useParams()`	• Extracts URL parameters from current route • returns object with param names as keys.
useLocation	`const location = useLocation()`	• Returns current location object with `pathname`, `search`, `hash`, `state` • useful for tracking page views.
Nested routes	`<Route path="/users" element={<Users />}>` `<Route path=":id" element={<User />} />` `</Route>`	• Defines child routes under parent • relative paths combine with parent path.
Outlet	`function Layout() {` `return <div><Nav /><Outlet /></div>` `}`	• Renders matched child route in parent component • enables nested layouts.
TanStack Router	`const route = createRoute({` `getParentRoute: () => rootRoute,` `path: '/users/$id',` `})`	• Fully type-safe alternative to React Router • search params, path params, and loader data are all TypeScript-inferred with no configuration.

Table 14: Testing

Tool	Example	Description
React Testing Library	`render(<Button />)` `screen.getByRole('button')`	• Encourages testing user behavior not implementation • queries based on accessibility attributes.
userEvent	`await user.click(button)`	• More realistic user interaction simulation than fireEvent • handles focus, timing, and keyboard events properly.
screen queries	`screen.getByText('Submit')`	Built-in query methods like `getBy`, `queryBy`, `findBy` with variants for text, role, label, test ID, etc.
waitFor	`await waitFor(() => expect(screen.getByText('Loaded')).toBeInTheDocument())`	• Waits for async changes like state updates or API responses • retries until callback stops throwing.
render	`const { container } = render(<App />)`	• Renders component into virtual DOM for testing • returns queries and container element.
fireEvent	`fireEvent.click(button)`	• Triggers DOM events on elements • synchronous simulation — prefer `userEvent` for realistic interaction.
Jest	`test('renders title', () => {...})`	• Test runner and assertion library • provides `describe`, `test`, `expect`, and mocking capabilities.
Vitest	`import { test, expect } from 'vitest'` `test('adds', () => expect(1+1).toBe(2))`	• Jest-compatible test runner built on Vite • significantly faster cold starts and watch mode; ideal for Vite-based React projects; drop-in replacement for Jest.
Mock functions	`const onClick = jest.fn()` `expect(onClick).toHaveBeenCalled()`	• Creates spy functions to verify calls • `jest.fn()` (or `vi.fn()` in Vitest) tracks arguments and call count.
Snapshot testing	`expect(tree).toMatchSnapshot()`	• Captures component output and detects unexpected changes • useful for catching regressions in UI structure.

Table 15: TypeScript Integration

Pattern	Example	Description
Props interface	`interface Props { name: string; age: number }` `function User(props: Props) {}`	• Separate type definition for props • enables reuse and clearer documentation.
Component typing	`function Button({ text }: { text: string }) {}`	• Inline props type for simple components • clear and concise for few props.
useState typing	`const [user, setUser] = useState<User \| null>(null)`	• Explicitly typing state generic when TypeScript can't infer • necessary for complex types or null initialization.
Event typing	`const handle = (e: React.ChangeEvent<HTMLInputElement>) => {}`	• Typing event handlers with specific event types • ensures type safety for `e.target` properties.
Ref typing	`const ref = useRef<HTMLDivElement>(null)`	• Providing element type for ref • `null` initial value requires union type for `.current`.
Children typing	`interface Props { children: React.ReactNode }`	• Using ReactNode type for children prop • accepts any valid React child (elements, strings, numbers, fragments).
Generic components	`function List<T>(props: { items: T[]; render: (item: T) => ReactNode }) {}`	• Components accepting generic type parameters • enables type-safe reusable components.
Context typing	`const Ctx = createContext<ContextType \| undefined>(undefined)`	• Typing Context value and initial value • `undefined` forces Provider usage with runtime check.
FC type	`const Button: React.FC<Props> = ({ text }) => {}`	• Typing component as FunctionComponent • less common now as implicit children and return type are rarely needed.

Table 16: Advanced React Features

Feature	Example	Description
Concurrent rendering	`createRoot(el).render(<App />)`	• React 18+ feature enabling interruptible rendering • allows React to pause, abort, and prioritize urgent updates.
Automatic batching	`setName('Alice')` `setAge(30)`	React 18+ groups multiple state updates into a single re-render — even in promises and timeouts.
React Compiler	`// install: babel-plugin-react-compiler` `// or: vite-plugin-react with babel option`	• Build-time optimizer (v1.0 stable, Oct 2025) that automatically memoizes components • eliminates need for manual `useMemo`/`useCallback`.
Server Components	`async function Page() {` `const data = await fetchData()` `return <Product data={data} />` `}`	• Async components that run only on server • fetch data directly, render to HTML, send zero JS for that part to client.
'use client' directive	`'use client'` `import { useState } from 'react'`	• Marks a module boundary for client-side code in RSC • components below this point ship JS to the browser.
Server Actions	`'use server'` `async function submitForm(formData) {` `await db.save(formData)` `}`	• Functions marked with `'use server'` that run server-side • called from client components or form `action` props.
Activity component	`<Activity mode="hidden">` `<ExpensivePanel />` `</Activity>`	• React 19.2: hides or shows UI without unmounting • preserves state and subscriptions • `mode` is `"visible"` or `"hidden"`.
ViewTransition	`<ViewTransition>` `{url === '/' ? <Home /> : <Details />}` `</ViewTransition>`	Experimental: wraps elements to enable browser-native View Transition API animations on `startTransition`, `useDeferredValue`, or Suspense changes.
Streaming SSR	`renderToPipeableStream(<App />)`	• Server-side rendering that streams HTML to client progressively • faster time-to-first-byte using Suspense boundaries.
startTransition	`startTransition(async () => {` `await submitData(form)` `})`	• Marks updates as non-urgent transitions • React 19 supports async functions, keeping UI responsive without blocking.
Strict Mode	`<StrictMode>` `<App />` `</StrictMode>`	• Development-only tool that highlights potential problems • intentionally double-invokes functions to surface side effects.
Profiler	`<Profiler id="Nav" onRender={callback}>` `<Nav />` `</Profiler>`	• Measures rendering performance programmatically • callback receives timing info for production monitoring.
use hook	`const data = use(promise)`	• React 19 hook that reads resources like promises or context • uniquely can be called conditionally unlike other hooks.

Table 17: Styling Approaches

Method	Example	Description
Tailwind CSS	`<div className="flex items-center gap-4 p-4 bg-white" />`	• Utility-first CSS framework with predefined classes • rapid development — most popular React styling choice in 2025–26.
CSS Modules	`import styles from './Button.module.css'` `<div className={styles.button} />`	• Locally scoped CSS by default • build tool transforms class names to prevent global conflicts.
Styled Components	`const Button = styled.button\`color: blue;``	• CSS-in-JS library using tagged templates • styles scoped to component with dynamic theming support.
Emotion	`<div css={css\`color: red;`} />`	• CSS-in-JS with both string and object styles • strong performance and widely used in design systems.
Sass/SCSS	`import './styles.scss'`	• CSS preprocessor with variables, nesting, mixins • requires build configuration but uses familiar syntax.
Inline styles	`<div style={{ backgroundColor: 'blue', padding: 20 }} />`	• JavaScript object with camelCased properties • limited pseudo-selectors and media queries, dynamic by default.
CSS-in-JS	Libraries embedding styles in JavaScript; component-scoped with access to props and state for dynamic styling.	Generic term for styling solutions collocating CSS with components.

Table 18: DevTools and Debugging

Tool	Example	Description
React DevTools	Browser extension showing component tree with props, state, hooks; inspect and edit values live.	• Official debugging browser extension for Chrome and Firefox • essential for development.
Components tab	Navigate component hierarchy; view props, state, hooks, owners, source code location.	• Explores React component structure in DevTools • search and filter components.
Profiler tab	Records rendering performance; flame graph shows which components render and why.	• Identifies performance bottlenecks • measures commit phases and component render time.
Console logging	`console.log('State:', state)`	• Basic debugging by printing values • effective for understanding data flow and spotting unexpected updates.
React strict mode warnings	Logs warnings about deprecated APIs and unsafe lifecycles; double-invokes effects to surface hidden bugs.	• Highlights potential problems in development • identifies impure components and stale closures.
Source maps	`devtool: 'source-map'` in config	• Maps compiled code to source • enables debugging original TypeScript/JSX in browser despite minification.
Error boundaries	Catch and log render errors; prevent entire app crash with fallback UI.	Provides graceful error handling in component tree.
React Suspense DevTools	DevTools show Suspense boundaries and loading states; visualizes loading sequences and boundary states.	Helps debug async loading sequences and Suspense tree structure.

Table 19: Build Tools and Ecosystem

Tool	Example	Description
Vite	`npm create vite@latest my-app -- --template react`	• Fast dev server using native ES modules • dramatically faster HMR and builds than webpack-based tools • recommended for new projects.
Next.js	`npx create-next-app@latest`	• Production framework with SSR, SSG, routing, API routes, and React Server Components built-in • most popular production React framework.
TanStack Start	`npx create-tsrouter-app@latest my-app`	• Full-stack framework built on TanStack Router • type-safe routing, server functions, and SSR • rapidly growing alternative to Next.js.
Remix	`npx create-remix@latest`	• Framework focused on web fundamentals • nested routing, progressive enhancement, optimistic UI • merged with React Router v7.
React Native	`npx react-native init MyApp`	• Build native mobile apps using React • shared codebase for iOS and Android with platform-specific code.
Gatsby	`npm init gatsby`	• Static site generator with GraphQL data layer • excellent for content-heavy sites and blogs.
Webpack	Module bundler that compiles JavaScript and assets; highly configurable but complex setup.	• Flexible build tool used by legacy React projects • handles code splitting, loaders, plugins.
Turbopack	Built into Next.js as `next dev --turbopack`	• Rust-based Webpack successor by Vercel • bundled with Next.js • significantly faster cold starts and incremental builds.
Babel	`@babel/preset-react`	• Transpiles JSX and modern JS to compatible JavaScript • also hosts the React Compiler plugin.
ESLint	`eslint-plugin-react`, `eslint-plugin-react-hooks`	• Linting tool for code quality • React-specific plugins enforce best practices and hooks rules.
TypeScript	`npm create vite@latest my-app -- --template react-ts`	• Adds static typing to JavaScript • catches errors at compile time, improves IDE support • recommended for all new projects.
Create React App (legacy)	`npx create-react-app my-app`	• Zero-config starter — no longer actively maintained • use Vite or Next.js for new projects.

Table 20: State Management Libraries

Library	Example	Description
Redux Toolkit	`const store = configureStore({ reducer })` `useSelector(state => state.user)`	• Modern Redux with less boilerplate • includes `createSlice`, `createAsyncThunk`, opinionated defaults • best for large teams.
Zustand	`const useStore = create(set => ({ count: 0, inc: () => set(s => ({ count: s.count + 1 })) }))`	• Minimal state management with hooks-based API • no providers, boilerplate-free, tiny bundle • most popular lightweight option.
TanStack Query	`const { data } = useQuery({ queryKey: ['user'], queryFn: fetchUser })`	• Server state management with caching, sync, and background updates • not general state but the standard for async data.
SWR	`const { data } = useSWR('/api/user', fetcher)`	• Data fetching hook with caching • "stale-while-revalidate" strategy • lightweight Vercel-maintained alternative to TanStack Query.
Jotai	`const [count, setCount] = useAtom(countAtom)`	• Primitive and flexible atom-based state • bottom-up approach, no string keys, TypeScript-first.
MobX	`const store = observable({ count: 0 })` `const Counter = observer(() => <div>{store.count}</div>)`	• Reactive state management using observables • automatic dependency tracking, minimal boilerplate.
Recoil	`const [text, setText] = useRecoilState(textState)`	• Facebook's atomic state library with fine-grained subscriptions • not actively maintained — prefer Jotai for similar patterns.

Table 21: Accessibility Best Practices

Practice	Example	Description
Semantic HTML	`<button>Click</button>` not `<div onClick>Click</div>`	• Use correct HTML elements for functionality • provides built-in keyboard support and screen reader context.
Form labels	`<label htmlFor="email">Email</label>` `<input id="email" />`	• Associate labels with inputs using `htmlFor` • enables clicking label to focus input • required for screen readers.
Focus management	`useEffect(() => inputRef.current.focus(), [])`	• Programmatically move focus to appropriate elements • essential for modals, route changes, dynamic content.
ARIA attributes	`<div role="button" aria-label="Close" />`	• Add accessibility semantics when semantic HTML is insufficient • use sparingly — prefer native elements.
aria-label	`<button aria-label="Close dialog">×</button>`	Provides text alternative for screen readers when visible text is insufficient or absent.
Live regions	`<div aria-live="polite" aria-atomic="true">{status}</div>`	• Announce dynamic content changes to screen readers • `polite` waits for pause, `assertive` interrupts.
Keyboard navigation	`onKeyDown={e => e.key === 'Enter' && handleClick()}`	• Ensure all interactive elements are accessible via keyboard • implement arrow keys for custom widgets.
useId for a11y	`const id = useId()` `<label htmlFor={id}>Name</label>` `<input id={id} />`	• Generates stable unique IDs for linking labels and inputs • safe in SSR — avoids hydration mismatches.
Skip links	`<a href="#main" className="skip-link">Skip to main</a>`	• Bypass navigation links at page top • allows keyboard users to jump directly to content.
Alt text	`<img src="logo.png" alt="Company logo" />`	• Describe image content for screen readers • use empty `alt=""` for purely decorative images.
Color contrast	Verify with tools like axe or Lighthouse	Minimum 4.5:1 ratio for normal text, 3:1 for large text per WCAG 2.1 AA.