Context provides a way to pass data through the component tree without props drilling.

Modern pattern (with hook):

• const ThemeContext = createContext()
• <ThemeContext.Provider value={theme}>
• const theme = useContext(ThemeContext)

1. Only call Hooks at the top level (not inside loops, conditions, nested functions)
2. Only call Hooks from React function components (or custom Hooks)
3. ESLint plugin eslint-plugin-react-hooks enforces these rules

Virtual DOM is a lightweight in-memory representation of the real DOM.

React process:

1. State/props change → new virtual DOM tree created
2. Diffing (reconciliation) compares old vs new virtual DOM
3. Only minimal changes are applied to real DOM

Why faster: batch updates + fewer expensive real DOM operations.

Reconciliation = React's process of updating the DOM when component state/props change.

• Compares old & new virtual DOM trees (diffing algorithm)
• Uses heuristics: element type, key, position
• When types differ → replace whole subtree
• Same type → update attributes & recurse children
• Keys help match children across renders efficiently

key is a special string attribute that helps React identify which items changed, added, or removed.

Without stable keys React may:

• Re-render entire list unnecessarily
• Lose component state (input focus, animations…)
• Show wrong data during updates

Best practice: use stable, unique ID from data (not index).

Passing props through many levels of components even when intermediate components don’t use them.

Solutions (2025 perspective):

1. Context API + useContext (most common)
2. Component composition (children, render props)
3. State management libraries: Zustand, Jotai, Recoil, Redux Toolkit
4. Props drilling is acceptable for depth ≤ 3–4 levels

Modern React → prefer controlled components.

Moving shared state to the closest common ancestor component so multiple child components can share and update the same state.

Example: two input fields that should show the same converted value (Celsius ↔ Fahrenheit).

• Mount → useEffect(() ⇒ { … }, [])
• Update → useEffect(() ⇒ { … }, [dep])
• Unmount → cleanup function returned from useEffect
• Every render → useEffect(() ⇒ { … }) (no deps)

children is a special prop containing content passed between opening and closing JSX tags.

<Card>
  <h2>Title</h2>
  <p>Content here</p>
</Card>

Very common in layout/wrapper components (Layout, Card, Modal, etc.).

<></> or <React.Fragment> lets you group multiple elements without adding extra DOM node.

Common use cases:

• Returning multiple elements from component
• Inside map() → avoid wrapper <div>
• Key only needed on fragment when inside list: <Fragment key={id}>

2025 trend: useReducer + Context / Zustand for medium apps, RTK Query for data-heavy apps.

Introduced in Next.js 13+, React Server Components are components that render only on the server.

Key points:

• No hydration → smaller client bundle
• Direct access to backend resources (DB, files…)
• Can’t use state, effects, browser APIs
• Can be mixed with client components (“use client” directive)

Big performance & DX improvement in data-heavy apps.

useTransition marks state updates as non-urgent (“transition”).

Allows React to:

• Keep showing old UI while preparing new one
• Interrupt low-priority updates for high-priority ones (typing, clicks)

Common pattern:

const [isPending, startTransition] = useTransition();
startTransition(() ⇒ { setTab(newTab); });

Defers a value update until more important updates are done.

Typical use case: search input → expensive filtered list

const deferredQuery = useDeferredValue(query);
<HeavyList data={filtered(deferredQuery)} />

Similar goal to useTransition, but for values instead of state updates.

Error boundaries catch JavaScript errors in child component tree and display fallback UI.

Implemented using class components with:

• static getDerivedStateFromError()
• componentDidCatch()

2025 status: still no native functional error boundary → use class component or libraries (e.g. react-error-boundary).

Allows parent to directly call methods on child component instance (imperative API).

Common cases:

• Focus input from parent
• Trigger animation in child
• Scroll to position

Example:

const MyInput = forwardRef((props, ref) ⇒ {
  const inputRef = useRef();
  useImperativeHandle(ref, () ⇒ ({ focus: () ⇒ inputRef.current.focus() }));
  return <input ref={inputRef} />;
});

1. Profile with React DevTools Profiler
2. Prevent unnecessary re-renders (React.memo, useMemo, useCallback)
3. Use production build
4. Code-splitting + lazy + Suspense
5. Virtualize long lists (react-window, react-virtualized)
6. Server Components / streaming SSR (when using Next.js)
7. Optimize images & assets
8. Avoid anonymous functions in render

Hydration = attaching event listeners and making server-rendered HTML interactive on the client.

React compares server-rendered markup with what client would render → if mismatch → warning.

Common hydration errors: browser-specific code in SSR, dates, random values, browser APIs.

<React.StrictMode> enables extra development-time checks:

• Double-invokes effects & render in dev mode (detects impure functions)
• Checks for deprecated APIs
• Detects unsafe lifecycles
• Warns about string refs

Should be used in development (usually wraps whole app).

• Props & state type safety
• Better refactoring & autocomplete
• Catches many bugs at compile time
• Self-documenting components
• Easier to work with third-party libraries (good .d.ts files)
• Generics for reusable components (e.g. List<T>)

Modern lightweight state managers:

• Zustand — single store, hooks-based, very simple API
• Jotai — atomic state (many small pieces), bottom-up approach

Choose them when:

• App is medium size
• You don’t need heavy middleware
• Want minimal boilerplate
• Like hooks philosophy

Redux Toolkit still great for large teams, complex async flows, Redux DevTools requirement.

Main approaches:

1. Controlled components (most common): store all values in state
2. Form libraries: React Hook Form, Formik, Zod + react-hook-form
3. Uncontrolled + refs: only for very simple forms
4. Native HTML form + onSubmit: for server-rendered / progressive forms

2025 trend: React Hook Form + Zod for validation → minimal re-renders, great performance.

• useEffect — runs asynchronously after paint → better for most side effects
• useLayoutEffect — runs synchronously after DOM mutations but before browser paints → prevents flicker

Use useLayoutEffect when you need to measure DOM (getBoundingClientRect, scroll position) before user sees changes.

Warning: can hurt performance — prefer useEffect when possible.

Introduced in React 18 — allows React to interrupt rendering for higher-priority work.

Key APIs:

• startTransition / useTransition
• useDeferredValue
• Automatic batching of updates
• Streaming server rendering

Goal: keep UI responsive even during heavy updates.

• CSS files (global / module)
• Styled-components / Emotion
• Tailwind CSS / UnoCSS
• CSS-in-JS (vanilla-extract, Stitches, Panda CSS)
• Inline styles
• CSS Modules
• Sass / Less

2025 popular choices: Tailwind + shadcn/ui, or Panda CSS / vanilla-extract for type-safe styling.

Powerful library for managing server-state (API data).

Features:

• Automatic caching
• Background refetching
• Stale-while-revalidate
• Pagination, infinite scroll
• Mutations with optimistic updates
• Devtools

Often replaces Redux + thunks/sagas for data fetching.

Common approaches:

1. TanStack Query useInfiniteQuery
2. Intersection Observer + manual page state
3. react-infinite-scroll-component library

Basic pattern with Intersection Observer:

• Place sentinel element at bottom
• Observe it → load next page when visible
• Keep track of current page & hasMore

Common testing stack:

• Jest + React Testing Library (most recommended)
• Vitest (faster alternative to Jest)
• Testing Library ecosystem: @testing-library/user-event
• Component snapshot testing (less popular now)
• MSW (Mock Service Worker) for API mocking

Philosophy: test behavior, not implementation.

Pattern where components work together implicitly via context.

Example: <Select> component family

<Select>
  <SelectTrigger>Open menu</SelectTrigger>
  <SelectContent>
    <SelectItem value="1">Option 1</SelectItem>
    <SelectItem value="2">Option 2</SelectItem>
  </SelectContent>
</Select>

Implemented using Context to share state between parts.

Show the final UI state immediately before the server responds, then rollback on error.

Typical steps (e.g., like/dislike button):

1. Immediately increment like count in UI
2. Send request to server
3. On success → keep change
4. On error → revert UI to previous state

Popular with TanStack Query useMutation + onMutate for rollback.

Pattern where a component accepts a function as prop that returns JSX.

<Mouse render={mouse => (
  <p>The mouse is at {mouse.x}, {mouse.y}</p>
)} />

Mostly replaced by custom hooks in modern React, but still useful in some library patterns (e.g. react-router v5, older code).

Popular alternatives (2025):

• Zustand — simple, tiny
• Jotai — atomic state
• Recoil — Facebook’s solution
• Context + useReducer
• TanStack Query (for server state)
• React Query + Zustand combo

When using ternary / && to show/hide components, React may reuse the same component instance if the type is the same.

This can cause bugs (state preserved unexpectedly).

Solution: add key that changes when condition changes:

{showLogin ? (
  <AuthForm key="login" mode="login" />
) : (
  <AuthForm key="register" mode="register" />
)}

• Clean up subscriptions / intervals in useEffect return
• Cancel fetch requests (AbortController)
• Remove event listeners
• Avoid storing large objects in state/refs unnecessarily
• Use cleanup functions in custom hooks
• Be careful with closures capturing large data

• Server-side rendering (SSR) / Static Site Generation (SSG)
• Built-in routing
• Image optimization
• API routes
• React Server Components support
• Automatic code splitting
• Incremental Static Regeneration (ISR)
• Easier SEO & performance

Instead of fetch-then-render, start fetching as early as possible and render when data arrives.

With Suspense + React 18:

• Wrap data-fetching component in <Suspense>
• Use libraries like Relay or Next.js App Router that support it
• Improves perceived performance

• Creating new objects/arrays/functions on every render
• Passing new object literals as props
• Heavy computations in render
• Deeply nested component trees
• Unnecessary re-renders of large lists
• Large images without optimization
• Missing key in lists
• Overusing Context (causes re-renders)

Best approach: extract logic into custom hooks.

Older approach:

• Higher-Order Components (HOC)
• Render Props

Modern React: prefer custom hooks → easier to test, compose and tree-shake.

Key features (based on release candidate / early 2026):

• Actions – simplified form handling (useActionState)
• Improved Suspense & error handling
• use() hook for reading resources
• React Compiler (Opt-in automatic memoization)
• Better hydration error recovery
• useOptimistic hook

Many features aim to reduce manual memoization and improve forms/data mutations.