Top 50 React Interview Questions & Answers for 2026

🔰 Beginner Level (Q1–Q15)

Q1. What is React and what problem does it solve?

React is a JavaScript library for building user interfaces. It solves the problem of efficiently updating the DOM by using a Virtual DOM — a lightweight copy of the real DOM. Only the changed parts are re-rendered, making applications faster.

Q2. What is JSX?

JSX (JavaScript XML) is a syntax extension that allows you to write HTML-like code inside JavaScript. It gets compiled to React.createElement() calls by Babel.

Q3. What is the difference between state and props?

Q4. What is the Virtual DOM and how does it work?

The Virtual DOM is a JavaScript object representation of the real DOM. When state changes, React creates a new Virtual DOM tree, diffs it against the previous one (reconciliation), and only updates the changed nodes in the real DOM.

Q5. What are functional components vs class components?

Functional components are simple JS functions returning JSX. Class components extend React.Component. Since React 16.8, hooks allow functional components to handle state and lifecycle — making class components largely unnecessary in modern React.

Q6. What are the React component lifecycle phases?

React components go through three phases: Mounting (component created and inserted into DOM), Updating (state/props change triggers re-render), and Unmounting (component removed from DOM). In functional components, useEffect handles all three phases.

Q7. What is the difference between controlled and uncontrolled components?

A controlled component has its form data managed by React state (every change calls setState). An uncontrolled component stores form data in the DOM itself (accessed via ref). Controlled components are preferred for complex validation logic.

Q8. Why are React keys important in lists?

Keys help React identify which list items have changed, been added, or removed. Use stable, unique keys (like database IDs, not array indices) to help React reconcile efficiently and avoid unnecessary re-renders. Using index as key can cause bugs when items are reordered.

Q9. What are React Fragments?

React Fragments (<>...</> or <React.Fragment>) let you group multiple elements without adding extra DOM nodes. Use them when a wrapper div would break CSS layouts (like flexbox children).

Q10. How does event handling work in React?

React uses synthetic events — cross-browser wrappers around native DOM events. Event handlers are passed as camelCase props (e.g., onClick, onChange). Call e.preventDefault() to stop default browser behavior.

Q11. What are the ways to do conditional rendering in React?

Common approaches: (1) if/else statements before the return, (2) ternary operator condition ? A : B inline, (3) logical AND condition && <Component /> for show/hide, (4) switch statements for multiple conditions.

Q12. What is prop drilling and why is it a problem?

Prop drilling is passing props through multiple component layers just to reach a deeply nested child. It creates tight coupling, makes refactoring harder, and forces intermediate components to carry data they don't use. Solutions: Context API, Redux, or component composition.

Q13. What is the children prop?

The children prop lets components receive and render nested JSX elements. It's used to build wrapper/layout components (e.g., Card, Modal, Layout) that don't know their content ahead of time — similar to "slots" in other frameworks.

Q14. What is a Higher-Order Component (HOC)?

A HOC is a function that takes a component and returns a new component with enhanced behavior. Example: withAuth(Dashboard) wraps Dashboard to check authentication. In modern React, custom hooks often replace HOCs.

Q15. What are Error Boundaries?

Error Boundaries are class components that catch JavaScript errors in their child tree and display a fallback UI instead of crashing the whole app. Implement componentDidCatch and getDerivedStateFromError. Note: functional Error Boundaries are not yet supported natively.

⚡ React Hooks (Q16–Q25)

Q16. What is useState and when should you use it?

useState is a hook that adds state to a functional component. Use it when you have a value that changes over time and whose change should trigger a re-render (e.g., form inputs, toggle states, counters).

Q17. What is useEffect and what are its common use cases?

useEffect performs side effects after rendering. Common uses: fetching API data, setting up subscriptions/event listeners, and manually updating the DOM. The dependency array controls when it runs:

• [] → runs once on mount
• [dep] → runs when dep changes
• no array → runs after every render

Q18. What is the difference between useMemo and useCallback?

Q19. What is useRef?

useRef stores a mutable value that persists across renders without triggering a re-render. Commonly used to: access DOM nodes directly (e.g., focus an input), store previous values, or hold timer IDs.

Q20. How do you create a custom hook?

A custom hook is a JavaScript function whose name starts with use and can call other hooks. Example: useFetch(url) encapsulates useState + useEffect for data fetching logic.

Q21. What is useContext?

useContext reads and subscribes to a Context. It lets you consume context values (like theme or user data) without wrapping in a Consumer component. Every component that calls useContext re-renders when the context value changes.

Q22. What is useReducer and when should you use it?

useReducer is an alternative to useState for complex state logic. It's ideal when: the next state depends on the previous state in complex ways, you have multiple sub-values in state, or you want a Redux-like pattern without Redux. Signature: const [state, dispatch] = useReducer(reducer, initialState)

Q23. What is useLayoutEffect and how does it differ from useEffect?

useLayoutEffect fires synchronously after DOM mutations but before the browser paints. Use it when you need to measure the DOM or prevent a flash of incorrectly positioned content. In most cases, useEffect is sufficient and preferred.

Q24. What is useImperativeHandle?

useImperativeHandle customizes the instance value exposed to parent components when using forwardRef. It's used to expose specific methods of a child component to a parent (e.g., a parent calling inputRef.current.focus() on a custom Input component).

Q25. What are the Rules of Hooks?

There are two fundamental rules:

• 1. Only call hooks at the top level — never inside loops, conditions, or nested functions.
• 2. Only call hooks from React functions — functional components or custom hooks. Never from regular JS functions.

🏗️ State Management (Q26–Q35)

Q26. When should you use Context API vs Redux?

Context API is ideal for simple, infrequently-updated global state (e.g., theme, language, user auth). Redux Toolkit is better for complex state with many updates, time-travel debugging needs, or large team codebases needing strict patterns. A good rule: if you're passing the same prop more than 3 levels deep, consider Context or Redux.

Q27. What is Redux Toolkit and why is it recommended?

Redux Toolkit (RTK) is the official, opinionated way to write Redux. It reduces boilerplate with createSlice, includes Immer for immutable updates, and has RTK Query for data fetching built-in. It's the standard recommended approach over vanilla Redux.

Q28. What is Zustand?

Zustand is a lightweight, minimal state management library. It requires very little boilerplate, doesn't need a Provider wrapper, and uses a simple store pattern. It's become popular for small-to-medium React apps where Redux feels too heavy.

Q29. What is "lifting state up" in React?

When multiple components need to share the same changing state, move that state to their closest common ancestor. This is called "lifting state up." The parent manages the state and passes it down via props and callbacks to the children that need it.

Q30. Why is immutability important in React state?

React uses shallow equality checks to detect state changes. If you mutate state directly (e.g., arr.push()), the reference stays the same and React won't re-render. Always create new objects/arrays: setArr([...arr, newItem]).

Q31. What is automatic batching in React 18?

React 18 introduced automatic batching — multiple state updates in event handlers, setTimeout, promises, and native event listeners are now batched into a single re-render. Previously, only React event handlers were batched. This improves performance without any code changes.

Q32. What is React Concurrent Mode / Concurrent Features?

Concurrent features (React 18+) allow React to interrupt, pause, resume, or abandon renders. Key features: startTransition (mark updates as non-urgent), useTransition (track pending transitions), and useDeferredValue (defer non-urgent re-renders).

Q33. What are React Server Components (RSC)?

React Server Components run exclusively on the server and send rendered HTML to the client — no JavaScript bundle shipped. They can access databases and file systems directly. RSCs are stateless (no hooks). Client Components (marked with "use client") handle interactivity.

Q34. What is React Suspense?

Suspense lets components "wait" for something before rendering. It shows a fallback UI while content loads. Originally designed for React.lazy code splitting, it now also works with data fetching (when using frameworks like Next.js that support Suspense-aware data fetching).

Q35. What is React StrictMode?

<React.StrictMode> is a development-only tool that intentionally double-invokes render and effect functions to help detect side effects. It highlights deprecated API usage and potential issues. It has no effect in production builds.

⚙️ Performance Optimization (Q36–Q44)

Q36. What is React.memo and when should you use it?

React.memo is a HOC that memoizes a component, preventing re-renders if props haven't changed (shallow comparison). Use it for pure functional components that receive the same props frequently and are expensive to render.

Q37. What is code splitting?

Code splitting breaks your bundle into smaller chunks loaded on demand. Implement with React.lazy() and Suspense: const Page = React.lazy(() => import('./Page')). Reduces initial bundle size and improves First Contentful Paint (FCP).

Q38. What is list virtualization?

List virtualization (windowing) renders only the visible list items instead of the entire list. Libraries like react-window or react-virtual implement this. Essential for lists with 1,000+ items to prevent DOM overcrowding and sluggish scrolling.

Q39. How do you prevent unnecessary re-renders?

• ✓ Use React.memo to memoize pure components
• ✓ Use useCallback for event handlers passed as props
• ✓ Use useMemo for expensive calculations
• ✓ Avoid creating new objects/arrays in JSX (use useMemo)
• ✓ Split context into smaller providers to minimize re-renders

Q40. How do you profile React performance?

Use the React DevTools Profiler to record renders and see which components re-render and how long they take. The Flamegraph and Ranked views show expensive renders. Also use console.time() and Chrome's Performance tab for deeper investigation.

Q41. How do you implement lazy loading for images?

Use the native loading="lazy" attribute on <img> tags for modern browsers. For more control, use the Intersection Observer API or libraries like react-lazy-load-image-component.

Q42. What is the difference between debounce and throttle in React?

Debounce: delays execution until after a period of inactivity (e.g., search input — only call API after user stops typing for 300ms). Throttle: limits execution to once per time period regardless of how often it's called (e.g., scroll handler — fire at most once every 100ms).

Q43. How do you offload heavy computation in React?

Use Web Workers to run computation in a background thread, keeping the main thread free for rendering. Libraries like comlink make Web Worker communication easier. Also consider startTransition to deprioritize non-urgent updates.

Q44. How do you optimize bundle size in React?

• ✓ Use tree shaking (import only what you need)
• ✓ Code split with React.lazy at the route level
• ✓ Analyze bundle with webpack-bundle-analyzer
• ✓ Replace heavy libraries with lighter alternatives (e.g., date-fns over moment.js)
• ✓ Enable gzip/brotli compression on the server

🚀 Advanced Topics (Q45–Q50)

Q45. What is the Render Props pattern?

The Render Props pattern shares code between components by passing a function as a prop that returns JSX. Example: a <MouseTracker render=({x, y}) => <Tooltip x={x} y={y} /> />. In modern React, custom hooks often achieve the same goal more cleanly.

Q46. What are React Portals?

Portals render children into a different DOM node than the parent component's DOM node. Useful for modals, tooltips, and dropdown menus that need to visually escape their parent's CSS overflow or z-index. Created with ReactDOM.createPortal(child, domNode).

Q47. How does React's reconciliation algorithm work?

React uses a "diffing" algorithm (Fiber) that compares the new Virtual DOM tree against the previous one. It uses two heuristics: (1) elements of different types produce different trees (rebuild from scratch), and (2) keys help React identify which list items changed (avoid using index as key). React 18's Fiber architecture allows interrupting and resuming this process.

Q48. What are the best practices for testing React components?

Use React Testing Library (RTL) — it tests from the user's perspective (find elements by text/role, not implementation details). Use Jest as the test runner. Avoid testing internal state or implementation. Key principle: "Test what your component does, not how it does it."

Q49. What's new in React 19 (2026)?

React 19 introduced: Actions (async functions for mutations with built-in loading/error states), useActionState and useFormStatus hooks for form handling, the React Compiler (auto-memoization, replaces most manual useMemo/useCallback), and improved Suspense with streaming in more contexts.

Q50. What is the difference between React and Next.js?

React is a UI library — it only handles the view layer. Next.js is a React framework built on top of React that adds: file-based routing, server-side rendering (SSR), static site generation (SSG), API routes, image optimization, and React Server Components. Most production apps at scale use Next.js or a similar meta-framework.