React Mastery

React Interview Cracking Guide

A comprehensive compilation of top React interview questions and detailed answers categorized by Junior, Mid, and Senior levels

Tags:

reactinterviewcareercareer-guide

90 minutes

Landing a great React role requires not just coding skill, but also the ability to communicate core principles clearly. This guide provides answers to the most common React interview questions, categorized by experience level.

1. Junior Level Questions (Freshers)

Props (short for properties) are read-only configuration objects passed from a parent component down to a child. A component cannot modify its own props.
State represents internal component data that can change over time. When state changes, React re-renders the component to update the UI.

Property	Props	State
Source	Passed by Parent	Declared inside Component
Mutable?	❌ Read-Only	✅ Mutable (via `setState`)
Triggers Render?	Yes (if parent passes new props)	Yes (when state updates)

Keys are unique string identifiers that you pass to elements in a list.
Why they are required: During reconciliation (diffing), React compares the new Virtual DOM with the old one. Keys help React identify which items have changed, been added, or been removed.
Warning: Never use array indices as keys if the list can be reordered, filtered, or deleted. If list order changes, using indices will cause React to map state to the wrong DOM nodes, causing rendering bugs.

React has two fundamental rules for Hooks:

Only Call Hooks at the Top Level: Do not call hooks inside loops, conditional blocks, or nested functions. This ensures hooks are called in the exact same order on every render, allowing React to maintain hook state correctly.
Only Call Hooks from React Functions: Call hooks from React functional components or custom hooks, not from regular JavaScript helper functions.

2. Mid-Level Questions

They represent two ways to handle form input elements in React.

Controlled Component: The input value is driven by React state. React is the single source of truth.
Uncontrolled Component: The input value is driven by the browser's DOM itself. We access values using a ref (Reference).

tsx

// Controlled Component
const ControlledInput = () => {
  const [value, setValue] = useState("");
  return <input value={value} onChange={e => setValue(e.target.value)} />;
};

// Uncontrolled Component
const UncontrolledInput = () => {
  const inputRef = useRef<HTMLInputElement>(null);
  const handleSubmit = () => {
    console.log(inputRef.current?.value); // Direct DOM read
  };
  return <input ref={inputRef} />;
};

Context API is not a dedicated state management library. Its main drawback is that every component consuming the context will re-render when any part of the context value object changes, even if the component only uses a property that stayed the same.

How to optimize it:
1. Split context into multiple smaller contexts (e.g. UserContext and ThemeContext).
2. Separate the state value context from the state updater function context.
3. Memoize children or wrap components in React.memo.

Both are memoization hooks that prevent unnecessary calculations or function re-creation across renders.

useMemo returns a memoized value (caches the result of a calculation).
useCallback returns a memoized function reference (caches the function itself).

typescript

// useMemo: caches the result (number/object)
const computedValue = useMemo(() => computeHeavyValue(a, b), [a, b]);

// useCallback: caches the function signature/reference
const handleClick = useCallback(() => { doSomething(a); }, [a]);

3. Senior Level Questions

Fiber is a complete rewrite of React's core rendering engine.

Stack Reconciler (Legacy): Recursively traversed the component tree. Since it was synchronous and blocked JS threads, large trees caused UI freeze (jank).
Fiber Reconciler: Represents the component tree as a singly-linked list of fiber nodes. Traversal is iteration-based using a loop, meaning work can be paused, restarted, or aborted.
Phases: It divides work into:
1. Render Phase: Asynchronous, non-blocking. Compares trees (diffing) to find changes.
2. Commit Phase: Synchronous, blocking. Writes changes directly to the browser DOM.

SSR is a rendering process. It takes a standard React tree on the server and converts it to HTML, which is then sent to the client. The client still downloads the JavaScript for all those components to attach event listeners (Hydration).
RSC is a component architecture. Server components run only on the server. The client receives their pre-rendered UI structure in JSON format and downloads zero JavaScript for them.
Summary: SSR deals with initial page speed and HTML output. RSC deals with component isolation, data access, and client-side bundle size optimization.

Detecting bottlenecks: Record user flows in Chrome DevTools' React Profiler tab. Look at the Flamegraph and Ranked Charts to find components that re-render too often or take too long.
Identifying Memory Leaks: Take Heap Snapshots in Chrome DevTools Memory tab. Compare snapshots before and after interacting with a feature. Look for detached DOM nodes or un-cleaned subscriptions.
Common fixes:
- Return cleanup functions in useEffect to clear timeouts, event listeners, and WebSockets.
- Implement List Virtualization (react-window) to reduce DOM nodes.
- Cancel pending API fetch requests on unmount using AbortController.

Pro Tip

In senior interviews, when answering technical questions, always discuss trade-offs. For example, when asked about state management, explain that while Redux is powerful and standard, it requires high boilerplate, whereas Zustand is better for simple state because of its hook-centric API, and Context is best for static data. This shows maturity.

React Interview Must-Known Topics

Must-Known Points

Junior interviews focus on syntax, basic hooks, JSX, and simple state design.
Mid-level interviews focus on optimization, context limitations, custom hooks, and lifecycle.
Senior interviews focus on browser paint cycles, Fiber internals, rendering paradigms (RSC vs SSR), security (XSS/CSRF), and testing architecture.

Have you finished this guide?

Marking it complete updates your roadmap progress percentage.

Testing & Security

Introduction to Next.js

Loading content…