React
Components, hooks, state management, patterns, routing & performance
Ace your React interviews with 100+ topics on hooks, state management, design patterns, React Router, performance optimization, testing, and advanced concepts like Server Components and Suspense.
Fundamentals15 topics
JSX and the Virtual DOM
Understand how JSX compiles to JavaScript and why React uses a virtual DOM to update the UI efficiently.
Function Components
Understand what a function component is and why it became the standard way to write React UI.
Props and Component Composition
Learn how data flows into components via props and how composition builds complex UIs from simple pieces.
State Basics with useState
Understand how component-local state works, how updates trigger re-renders, and common pitfalls with the useState hook.
Keys and List Rendering
Understand why React requires keys for list items and how incorrect keys cause subtle bugs.
Conditional Rendering Patterns
Learn the idiomatic ways to render UI conditionally in JSX and the tradeoffs between each approach.
Lifting State Up
Learn the pattern of moving shared state to the closest common ancestor so sibling components can stay in sync.
Fragments
Learn why Fragments exist and how they let components return multiple elements without adding extra DOM nodes.
Event Handling in React
Understand React's synthetic event system and how it differs from native DOM events.
Controlled vs Uncontrolled Components
Understand the difference between form elements driven by React state versus those managed by the DOM itself.
Component Lifecycle Concepts (Mount, Update, Unmount)
Understand the three phases of a component's life and how they map from class lifecycle methods to hooks.
Strict Mode and Development Warnings
Understand what React.StrictMode does in development and why effects may run twice.
React Fiber Architecture
Understand the internal reconciliation engine that powers rendering, scheduling, and interruption in modern React.
Rendering Lists and the map() Pattern
Learn the standard pattern for turning arrays of data into arrays of elements in JSX.
Portals
Learn how React Portals let you render children into a DOM node outside the parent component's hierarchy.
Hooks15 topics
useEffect Fundamentals
Learn how useEffect synchronizes a component with external systems and how the dependency array controls when it runs.
useRef for Mutable Values and DOM Access
Understand how useRef provides a persistent mutable container that doesn't trigger re-renders, and how it's used to access DOM nodes.
useMemo for Expensive Computations
Learn how useMemo caches the result of an expensive calculation between renders to avoid redundant work.
useCallback for Stable Function References
Learn how useCallback memoizes a function reference across renders to avoid unnecessary child re-renders or effect reruns.
Custom Hooks for Logic Reuse
Learn how to extract stateful logic into reusable custom hooks that follow React's naming and rules conventions.
useContext for Consuming Context
Learn how useContext lets a component read a value from the nearest matching Provider without prop drilling.
useReducer for Complex State Logic
Learn when useReducer is a better fit than useState for managing state transitions with multiple related fields or actions.
useLayoutEffect vs useEffect
Understand the timing difference between useLayoutEffect and useEffect, and when the synchronous variant is necessary.
Rules of Hooks
Understand the two rules that govern how hooks must be called, and why they exist.
useImperativeHandle and forwardRef
Learn how to expose a controlled imperative API from a child component to a parent via refs.
useId for Accessible Unique IDs
Learn how useId generates stable, unique identifiers for accessibility attributes without mismatching between server and client.
useTransition and Concurrent Updates
Learn how useTransition marks state updates as low priority so urgent interactions like typing stay responsive.
useDeferredValue
Learn how useDeferredValue lets a slow-to-render part of the UI lag behind a fast-changing value without blocking input.
useSyncExternalStore
Learn how useSyncExternalStore safely subscribes React components to external, mutable data sources under concurrent rendering.
Stale Closures in Hooks
Understand why hooks can capture outdated values in their closures and the common ways to avoid or intentionally leverage this.
State12 topics
Context API Deep Dive
Go beyond basic useContext to understand provider composition, value stability, and performance implications at scale.
Redux Toolkit Fundamentals
Learn how Redux Toolkit simplifies classic Redux with slices, createAsyncThunk, and built-in Immer-based mutation syntax.
Zustand for Lightweight State Management
Learn how Zustand provides a minimal, hook-based global state store without providers or boilerplate.
Redux vs Context API vs Zustand
Compare the three most common approaches to shared state in React and know when each is the right tool.
Selectors and Derived State
Learn how to compute derived values from state efficiently, whether in Redux, Zustand, or plain component state.
Normalizing State Shape
Learn why flattening nested, relational data into normalized entities improves update performance and avoids duplication.
Async Data Fetching with React Query / TanStack Query
Learn how server-state libraries like TanStack Query handle caching, background refetching, and deduplication that plain useEffect fetching doesn't.
State Colocation
Learn the principle of keeping state as close as possible to where it's used, lifting it only when truly necessary.
URL as State (Search Params and Routing State)
Learn when to store UI state in the URL instead of component state, and how it improves shareability and persistence.
Immutability and Why React Cares
Understand why React state updates require new objects/arrays rather than in-place mutation, and how this connects to change detection.
Immer for Ergonomic Immutable Updates
Learn how Immer lets you write mutation-style code that produces safe, immutable state updates behind the scenes.
Jotai and Atomic State Management
Learn the atomic state model, where state is composed from small independent units rather than one large store or tree.
Patterns12 topics
Compound Components
Learn how compound components share implicit state between a parent and its children via context, giving a flexible, declarative API.
Render Props Pattern
Learn how the render props pattern shares logic by passing a function as a prop that returns JSX.
Higher-Order Components (HOCs)
Learn how higher-order components wrap a component to inject additional props or behavior, and why hooks replaced most use cases.
Container/Presentational Component Split
Learn the classic pattern of separating data-fetching and logic (containers) from pure rendering (presentational components).
Composition over Inheritance
Understand why React favors composing components together rather than building class hierarchies to share behavior.
Controlled Components at Scale (Form Composition)
Learn how to compose multiple controlled fields into a larger form structure without prop-drilling every handler individually.
Slot / Children-as-Function Pattern
Learn the pattern of passing children as a function to expose internal state directly at the usage site, without a separate render prop name.
Prop Getters Pattern
Learn the prop getters pattern used by headless UI libraries to bundle correct accessibility and event-handling props onto elements.
Headless Components
Learn the philosophy of separating behavior/accessibility logic from visual presentation entirely, letting consumers own all markup and styling.
Error Boundaries as a Pattern
Learn how error boundary components catch rendering errors in their subtree and display a fallback UI instead of crashing the whole app.
Provider Pattern for Cross-Cutting Concerns
Learn how the Provider pattern wraps an app (or subtree) to make a value or service available throughout without prop drilling.
Custom Hook Composition (Hooks Calling Hooks)
Learn how custom hooks can call other custom hooks to build layered, composable abstractions for complex behavior.
Routing8 topics
React Router Fundamentals
Learn the core building blocks of React Router: routes, links, and how client-side navigation avoids full page reloads.
Nested Routes and Layouts
Learn how nested route definitions let a shared layout render once while only the inner content changes as sub-routes change.
Dynamic Route Parameters
Learn how to define routes with dynamic URL segments and read their values inside a matched component.
Protected Routes and Route Guards
Learn how to restrict access to certain routes based on authentication or authorization state.
Programmatic Navigation
Learn how to trigger navigation imperatively from event handlers or effects using React Router's useNavigate hook.
Data Loading with Router Loaders
Learn how React Router's data APIs let route definitions fetch their own data before rendering, decoupling data loading from component lifecycle.
Code Splitting Routes with Lazy Loading
Learn how to split each route's code into a separate bundle loaded on demand, reducing the app's initial load size.
Handling 404s and Catch-All Routes
Learn how to define a fallback route that matches any URL not handled by more specific routes, for a proper Not Found page.
Performance10 topics
React.memo for Component Memoization
Learn how React.memo skips re-rendering a component when its props haven't meaningfully changed.
Code Splitting with React.lazy and Suspense
Learn the general mechanism of React.lazy and Suspense for splitting any part of the component tree into separately loaded chunks.
Windowing / List Virtualization
Learn how virtualization renders only the visible slice of a large list, keeping DOM size and render cost constant regardless of total item count.
Profiling with React DevTools Profiler
Learn how to use the React DevTools Profiler tab to identify which components render, how often, and why.
Avoiding Unnecessary Re-renders
Learn the common causes of unnecessary component re-renders and the standard techniques to prevent them.
The Reconciliation Diffing Algorithm
Understand the specific heuristics React's diffing algorithm uses to efficiently compare two element trees.
Avoiding Anonymous Functions and Objects in Render (Deep Dive)
Understand precisely when inline functions and object literals in JSX are harmless versus when they measurably hurt performance.
Bundle Size Analysis and Tree Shaking
Learn how to analyze what's contributing to a React app's bundle size and how tree shaking eliminates unused code.
Debouncing and Throttling in React
Learn how to limit the rate of expensive operations triggered by fast-firing events like typing, scrolling, or resizing.
Web Vitals and Measuring Real User Performance
Learn the key Core Web Vitals metrics relevant to React apps and how to measure them in production.
Forms8 topics
React Hook Form Fundamentals
Learn how React Hook Form manages form state using uncontrolled inputs and refs to minimize re-renders.
Formik for Form State Management
Learn Formik's controlled-input approach to managing form values, validation, and submission state.
Schema Validation with Zod/Yup
Learn how declarative schema validation libraries define and enforce data shape and constraints for form inputs.
File Uploads in React
Learn how to handle file input, previews, and multipart upload requests in a React form.
Multi-Step Forms and Wizards
Learn how to structure a multi-step form's state and navigation so data persists correctly across steps.
Accessible Form Design
Learn the accessibility fundamentals every React form should implement: labels, error announcements, and keyboard support.
Optimistic UI Updates for Form Submissions
Learn how to update the UI immediately on a user action before the server confirms success, and roll back if it fails.
Debounced and Async Form Validation
Learn how to validate form fields against an async source (like checking username availability) without spamming the server on every keystroke.
Testing8 topics
React Testing Library Philosophy
Understand RTL's guiding principle of testing components the way a user actually interacts with them, not their internal implementation.
Queries and Roles in Testing Library
Learn the priority order of Testing Library queries and why role-based queries are the recommended default.
Mocking API Calls in Tests
Learn how to isolate component tests from real network requests using mocking tools like MSW.
Testing Custom Hooks
Learn how to test custom hooks in isolation using renderHook without needing a full component to host them.
Snapshot Testing
Understand what snapshot tests capture, their legitimate uses, and why they're easy to misuse as a substitute for real assertions.
Testing Asynchronous Components with findBy and waitFor
Learn how to correctly test components that update after an asynchronous operation, without relying on arbitrary timeouts.
Testing Context Providers and Custom Render Wrappers
Learn how to test components that depend on Context by rendering them within their required providers, using a reusable custom render function.
End-to-End Testing with Cypress/Playwright vs Component Testing
Understand the different layers of the testing pyramid as applied to a React app and when each tool is appropriate.
Advanced12 topics
React Server Components (RSC)
Understand the server/client component split introduced with React Server Components and what problem it solves.
Suspense for Data Fetching
Learn how Suspense extends beyond code splitting to coordinate loading states for asynchronous data, not just lazy-loaded components.
Refs and the DOM Escape Hatch
Understand refs as React's deliberate escape hatch for imperative DOM access, and where the boundary between declarative and imperative code should sit.
Portals for Modals, Tooltips, and Overlays (Applied)
Learn the practical application of Portals to build correctly-layered, accessible modal and overlay components.
Refs Forwarding Through Component Layers
Learn how forwardRef enables passing a ref through an intermediate wrapper component to an inner DOM element or component.
Concurrent Rendering Mental Model
Understand the shift from synchronous to concurrent rendering in React 18 and its implications for render purity.
The act() Testing Utility and Why It Matters
Understand what act() does under the hood and why React testing utilities require wrapping state updates in it.
Hydration and Hydration Mismatches
Understand how React attaches interactivity to server-rendered HTML, and why mismatches between server and client output cause errors.
React 19 Actions and Form Status Hooks
Learn how React 19's Actions, useActionState, and useFormStatus streamline handling async form submissions and pending states.
Class Components and Legacy Lifecycle Methods
Understand class component lifecycle methods for maintaining legacy codebases, and how they map conceptually to hooks.
TypeScript with React: Typing Props, State, and Hooks
Learn the common TypeScript patterns for typing function components, props, hooks, and event handlers in React.
Migrating a Class Component Codebase to Hooks
Learn a practical, incremental strategy for migrating a legacy class-component-based React codebase to function components and hooks.