Question 1

How do you design and test a custom hook using React Testing Library?

Accepted Answer

Testing custom hooks directly can be challenging because hooks cannot be invoked outside functional components. To test a hook, you must wrap it in a dummy component or use React Testing Library's built-in `renderHook` helper from `@testing-library/react`.

Here is how you would write a test for a simple counter hook using Vitest and React Testing Library:
```typescript
import { renderHook, act } from '@testing-library/react';
import { useCounter } from './useCounter';

test('should increment counter state', () => {
  // Render the hook in a virtual component container
  const { result } = renderHook(() => useCounter());
  
  expect(result.current.count).toBe(0);
  
  // State updates must be wrapped in act() block to ensure updates flush
  act(() => {
    result.current.increment();
  });
  
  expect(result.current.count).toBe(1);
});
```
When testing custom hooks that perform asynchronous actions (like fetching data), you should additionally use `waitFor` or `result.current.loading` assertions, and mock network requests using MSW (Mock Service Worker) to ensure tests remain isolated, reliable, and fast.

Question 2

What is the difference between useMemo and useCallback, and how do they prevent performance regressions?

Accepted Answer

Both `useMemo` and `useCallback` are optimization hooks that cache values between renders to prevent performance regressions, but they target different data types:

1. `useMemo` caches the *result* of a calculation. It executes a function and remembers its return value. It only recalculates when dependencies change.
```javascript
const heavyCalculationValue = useMemo(() => {
  return expensiveCompute(data);
}, [data]);
```
2. `useCallback` caches the *function instance* itself. It returns the exact same function reference across renders instead of recreating it, preventing child components that receive the function as a prop from unnecessarily re-rendering.
```javascript
const handleToggle = useCallback(() => {
  setOpen(prev => !prev);
}, []);
```
Both hooks have a memory overhead because they must keep references to dependencies and past computations in memory. Overusing them for simple computations can actually *hurt* performance. Use them when passing callbacks to memoized children (`React.memo`) or when dependencies trigger expensive downstream effects.

Question 3

Explain how code splitting and React.lazy() improve initial bundle load times.

Accepted Answer

By default, bundlers like Webpack or Vite compile all imports into a single, massive JavaScript file. If a user visits your homepage, they still have to download the code for settings pages, dashboards, and heavy charts, leading to slow Page Speed scores and high bounce rates. Code splitting divides this monolith into smaller chunks loaded on demand. In React, you achieve this using `React.lazy()` for dynamic imports, wrapped inside a `` boundary to show a fallback loading component while the chunk downloads: ```typescript import React, { lazy, Suspense } from 'react'; const HeavyDashboard = lazy(() => import('./HeavyDashboard')); function App() { return (

Loading Dashboard...

}> ); } ``` This ensures the code for `HeavyDashboard` is only fetched when the component is rendered, dramatically improving metrics like First Contentful Paint (FCP) and Time to Interactive (TTI).

Question 4

Explain the Render Props pattern and when it is preferred over Hooks.

Accepted Answer

The Render Props pattern involves sharing stateful logic between components by using a prop whose value is a function. This function returns JSX, allowing the containing component to delegate UI rendering to the consumer: ```javascript } /> ``` While custom Hooks have largely replaced Render Props in modern codebases, Render Props remains useful when you need to share complex, stateful UI logic dynamically inside JSX, or when building flexible layouts in component libraries.

Question 5

What are Higher-Order Components (HOCs) and how do they differ from hooks?

Accepted Answer

A Higher-Order Component (HOC) is a pure function that takes a component as an argument and returns an enhanced component, adding shared props or behaviors:
```javascript
const AuthenticatedButton = withAuth(Button);
```
HOCs modify the component tree structure by wrapping elements, whereas Hooks share logic inside the component without adding wrapper nodes. Hooks are cleaner and avoid nesting issues, but HOCs are still powerful for cross-cutting layout overrides.

Question 6

How does the reconciliation algorithm compare elements of different tags?

Accepted Answer

React's diffing algorithm operates under the rule that if two elements are of different types (e.g., changing a `

` to a `

`), React will completely tear down the old component tree, unmount child nodes, destroy their local states, and build the new tree from scratch. This prevents React from attempting to patch mismatched HTML tags, optimizing layout transitions.

Question 7

Explain Fiber node architecture and how it enables concurrent rendering.

Accepted Answer

React Fiber is the rendering engine introduced in React 16. It structures the component tree as a doubly linked list of 'Fiber' nodes. Each Fiber represents a unit of work.

In older versions, rendering was synchronous and un-interruptible (blocking the main thread). Fiber allows React to split rendering work into small chunks, pause work to handle high-priority user inputs, and resume or discard work asynchronously, enabling Concurrent features.

Question 8

Explain how mock API calls are set up during integration testing.

Accepted Answer

To test component integration without hitting live servers, you mock API requests. Mock Service Worker (MSW) is the industry standard. It intercepts requests at the network layer using Service Workers in the browser or mock servers in Node, returning mocked JSON payloads for predictable, fast assertions.

Question 9

What is the forwardRef API and when is it necessary?

Accepted Answer

Ref props cannot be passed to functional components directly because they are not standard props. `forwardRef` allows a component to expose its internal DOM nodes to its parent component:
```javascript
const CustomInput = React.forwardRef((props, ref) => (
  <input ref={ref} {...props} />
));
```
This is necessary when parent components must direct DOM actions (like focusing, selecting, or measuring boundaries) on nested child inputs.

Question 10

How do you detect and profile memory leaks in React components?

Accepted Answer

Memory leaks typically occur when components set event listeners, timers, or WebSocket listeners and fail to clean them up on unmount. To profile them, use Chrome DevTools Memory tab, take Heap snapshots during repeated component mounts/unmounts, and search for 'detached' DOM elements and retained objects.

Question 11

Explain the difference between useEffect and useLayoutEffect.

Accepted Answer

`useEffect` runs asynchronously *after* the render is painted to the screen, which is ideal for standard side-effects like data fetching. `useLayoutEffect` runs synchronously *before* the browser paints the screen, making it necessary when measuring DOM layouts or adjusting positions to avoid layout flickering.

Question 12

How does React portal work and what are its standard use cases?

Accepted Answer

Portals (`ReactDOM.createPortal`) let you render children into a DOM node that exists outside the parent component's hierarchy. This is crucial for UI overlays like modals, tooltips, and dropdowns to escape CSS overflows (`overflow: hidden`), z-index boundaries, and positioning context traps.

Question 13

Explain component folder layout patterns in enterprise applications.

Accepted Answer

Enterprise codebases often organize folders by 'features' or 'domains' rather than generic layers. A `features/billing/` directory would house its own local components, custom hooks, test suites, and state slices, while a global `components/` directory handles reusable, stateless design UI primitives.

Question 14

How do you test error boundary components using test suites?

Accepted Answer

To test Error Boundaries, you simulate a rendering crash in a child component. In React Testing Library, you write a mock component that throws an error during render, wrap it in the Error Boundary, and assert that the fallback UI renders while suppressing expected console error logs.

Question 15

How does the Context Provider value optimization prevent re-renders?

Accepted Answer

If a Context Provider passes a newly created object value, every render of the provider component generates a new reference, forcing all context consumers to re-render. To optimize this, memoize the context value using `useMemo`: ```javascript const value = useMemo(() => ({ user, status }), [user, status]); return {children}; ```

Question 16

What are the limitations of React Testing Library compared to E2E tests?

Accepted Answer

React Testing Library runs tests in a virtual DOM environment (jsdom) in Node. It cannot test real CSS layout engines, browser compatibility quirks, network latency, or full database database flows. End-to-End frameworks like Playwright or Cypress are required to validate real browser behaviors.

Question 17

How do you profile render durations using React DevTools?

Accepted Answer

Using the React Profiler, click record and interact with the application. The profiler shows a 'flame chart' and a 'ranked chart' listing each component that rendered, how long it took, and the specific state or prop changes that triggered the update.

Question 18

What is the useImperativeHandle hook and when should you use it?

Accepted Answer

`useImperativeHandle` is used with `forwardRef` to customize the instance value that is exposed to parent components, letting you expose restricted, custom helper methods instead of the raw DOM node to maintain abstraction boundaries.

Question 19

Explain dynamic code splitting patterns using Webpack/Vite comments.

Accepted Answer

Bundlers allow you to define custom chunk names for dynamically imported files using inline comments: `import(/* webpackChunkName: "charts" */ './Charts')`. This groups related dynamic components into separate files, allowing the browser to cache them efficiently.

Question 20

How do you mock local storage and browser variables in tests?

Accepted Answer

In Jest or Vitest, you mock browser globals using `Object.defineProperty`:
```javascript
Object.defineProperty(window, 'localStorage', {
  value: { getItem: vi.fn(), setItem: vi.fn() }
});
```
This isolates testing code from browser engines and permits auditing storage triggers.

Question 21

How do React Server Components (RSC) impact large application architecture and data rendering?

Accepted Answer

React Server Components (RSC) represent a paradigm shift in how large applications are structured. Traditionally, components rendered entirely in the browser, requesting data via client-side fetch APIs which often led to nested waterfall requests and layout shifts. RSC allows components to render exclusively on the server, sending only the pre-compiled layout structure to the client without shipping any component JavaScript code.

This impacts architecture in several key ways:
1. Zero Bundle Size: Heavy server-side npm packages (like markdown parsers or date formatters) are kept on the server and do not bloat client bundle sizes.
2. Direct Database Access: Server Components can perform secure, database SQL queries or file system reads directly without requiring an intermediate HTTP REST API layer.
3. Separation of Concerns: Components are cleanly categorized into Server Components (default, static layout) and Client Components (marked with 'use client' for interactive elements, state, and browser APIs).

This architecture minimizes client-side data fetching waterfalls, reduces bundle sizes by up to 50% in content-heavy sites, and allows streaming HTML pieces progressively via Suspense boundaries.

Question 22

How would you design a scalable state management architecture for a massive React application?

Accepted Answer

In a massive React application, relying solely on local state and Context API causes performance bottlenecks due to unnecessary provider re-renders. A scalable state management architecture should follow these key rules:

1. State Colocation: Keep state as local as possible. Do not put form input state in global stores; manage it inside the form component itself.
2. Split Server State and UI State: Use libraries like RTK Query or TanStack Query to manage server state (data fetched from APIs). These handle caching, automatic polling, background updates, and request de-duplication automatically, removing about 60% of boilerplate code.
3. Granular Client State: For client-side UI states shared globally (e.g. user themes, cart states), use a library with granular subscription selectors, like Zustand, Jotai, or Redux Toolkit. This ensures that components only re-render if the exact slice of state they are subscribing to changes.

Here is an example of selecting a specific state slice in Zustand:
```typescript
// Component only re-renders if theme changes, ignoring user object updates
const theme = useStore((state) => state.theme);
```
4. Strict Directory Structure: Enforce modular domains (e.g. features/billing, features/auth) where each module houses its own components, hooks, and local stores, preventing a monolithic global store setup.

Question 23

What is hydration mismatch, how does it occur, and how do you prevent or debug it at scale?

Accepted Answer

Hydration mismatch occurs in server-side rendered (SSR) applications when the pre-rendered HTML sent by the server does not match the first render tree generated by React in the browser. When the mismatch occurs, the browser DOM loses synchronicity, throwing warnings like 'Text content did not match' or 'Prop className did not match server'. This forces React to discard the mismatched DOM tree and rebuild it from scratch, destroying SSR performance benefits. It typically occurs due to: 1. Referencing browser-only globals like `window`, `localStorage`, or `document` during the initial rendering cycle, which are undefined on the server. 2. Using non-deterministic values like `Math.random()` or date formatters that depend on client-side timezones (e.g. `new Date().toLocaleTimeString()`). 3. Invalid HTML structure nested improperly (e.g. putting a `

` inside a `

`). To prevent this at scale: - Wrap client-only code inside `useEffect` which runs solely after hydration completes. - Use a standard mount checking pattern in client-only wrappers: ```typescript const [isMounted, setIsMounted] = useState(false); useEffect(() => setIsMounted(true), []); if (!isMounted) return ; ``` - Enforce strict lint rules like `eslint-plugin-react` to catch invalid DOM nestings automatically.

Question 24

How does React Suspense work under the hood when fetching data?

Accepted Answer

React Suspense works by catching promises thrown from child components during rendering. When a component attempts to fetch data, it checks a local cache. If the data is loading, the cache throws the fetch promise. React catches this promise, suspends rendering of that subtree, and renders the configured `fallback` UI.

Once the promise resolves, React restarts the rendering cycle for that component. Since the data is now present in the cache, the component renders successfully and replaces the fallback layout.

Question 25

Explain how React 18 Concurrent Features like useTransition and useDeferredValue operate.

Accepted Answer

`useTransition` and `useDeferredValue` let you mark state transitions as non-blocking (low-priority). React splits these rendering cycles into separate virtual trees. While the low-priority render tree is compiling in the background, React keeps the current UI fully responsive. If a user types into an input field, React pauses the background transition render, executes the user input render, and resumes the transition render.

Question 26

How would you handle dynamic monorepo build sharing with module federation in React?

Accepted Answer

Module Federation allows sharing compiled React components across separate host applications at runtime. Using Webpack or Rspack plugins, you expose micro-frontend scopes and load them dynamically as remote bundles. This reduces duplicate builds and enables independent deployments across enterprise teams.

Question 27

How do you optimize render cycles for massive virtualized lists (e.g., 100k+ rows)?

Accepted Answer

Rendering 100k rows directly crashes browser layout engines. Virtualization libraries (like `react-window` or `react-virtualized`) only render components that are currently visible within the viewport container, adding absolute positioning based on scroll offset. This limits DOM nodes to a tiny constant (e.g., 20-30 elements).

Question 28

Explain security concerns and mitigations with React Server Actions.

Accepted Answer

React Server Actions compile to POST API endpoints. This introduces vulnerabilities:
1. Missing Authorization: Server Actions must check session context permissions before running database queries.
2. Parameter Injection: Inputs must be validated using schemas (like Zod) to prevent injections.
3. CSRF: Next.js handles basic CSRF, but actions should be rate-limited to prevent automated spam.

Question 29

How would you set up distributed telemetry and Web Vitals tracking in a React app?

Accepted Answer

Use React's `useReportWebVitals` hook in App entrypoints to capture metrics (LCP, FID, CLS, TTFB). Send these metrics to collectors like Datadog or OpenTelemetry collectors using beacon APIs (`navigator.sendBeacon`) to monitor real-user performance without blocking network resources.

Question 30

Explain multi-tenant dynamic theme rendering using CSS variables and tailwind config.

Accepted Answer

To support multi-tenancy, configure Tailwind to rely on CSS variables (e.g., `var(--primary-color)`). When a tenant loads, query their layout settings from a database and update the root variables in the HTML element style dynamically. This avoids generating multiple client CSS sheets.

Question 31

How do you design a secure React authentication flow using HttpOnly cookies?

Accepted Answer

Store JWT tokens exclusively in `HttpOnly` and `Secure` cookies. This prevents cross-site scripting (XSS) attacks from accessing tokens via `document.cookie`. The browser automatically attaches cookies to API requests. Configure CORS settings to match authorized domain origins strictly.

Question 32

How does React handle concurrent state batching and updates in loops?

Accepted Answer

React handles batching by scheduling state updates as microtasks. If updates are triggered inside loops, React merges them into a single update instruction. If you need immediate DOM updates between loop ticks, use `flushSync`, though this degrades frame rates and should be avoided.

Question 33

How would you construct a custom React renderer using react-reconciler?

Accepted Answer

To create a custom renderer (like React Native or a terminal renderer), implement the reconciler interface from `react-reconciler`, configuring methods like `createInstance`, `appendChild`, and `commitUpdate` to map React component nodes to your custom target output engine.

Question 34

What is component co-location and how does it prevent build regressions?

Accepted Answer

Component co-location places all tests, mock fixtures, styling sheets, and sub-components inside the same folder as the parent component. This prevents directory fragmentation, speeds up developer search times, and ensures components can be moved or deleted without leaving stale, orphaned code behind.

Question 35

How do you debug hydration mismatches using browser console tools?

Accepted Answer

Use Next.js hydration warning overlay screens, check console logs pinpointing mismatch coordinates (e.g., 'Expected server div but got text node'), and inspect the DOM element using browser inspector to compare HTML source code against the reactive DOM output.

Question 36

Explain Web Worker integration in React for heavy computations.

Accepted Answer

For heavy tasks (like parsing massive CSVs), instantiate Web Workers in custom React hooks using `new Worker(new URL('./worker.js', import.meta.url))`. Send data via `postMessage` and listen for results, keeping computations off the main thread to prevent UI freezing.

Question 37

How do you prevent XSS vulnerabilities when using dangerouslySetInnerHTML?

Accepted Answer

Never render raw inputs directly. Sanitize all HTML strings before feeding them to `dangerouslySetInnerHTML` using libraries like DOMPurify to strip script tags, dangerous attributes (like `onload`), and event-based inline scripts.

Question 38

How do you manage layout-shift regressions during dynamic content loading?

Accepted Answer

Reserve exact spaces for asynchronous elements (like images or skeleton loaders) using explicit width and height properties or aspect-ratio CSS tags. This ensures that when content finishes downloading, page elements do not shift, protecting CLS scores.

Question 39

Explain the architecture of atomic state systems like Jotai and Recoil.

Accepted Answer

Atomic systems break state into tiny pieces called 'atoms'. Components subscribe directly to individual atoms. When an atom's value changes, only the subscribing components re-render, avoiding the wide-scale rendering cascades typical of Context and traditional Redux trees.

Question 40

What is the render phase in React and what rules must render functions follow?

Accepted Answer

The render phase triggers the component execution to produce a new virtual DOM tree. Render functions must remain pure: they cannot mutate props, write directly to external variables, trigger network requests, or call setTimeout, as React may run rendering cycles multiple times before committing updates.

Senior React Interview Questions (5+ Years Experience) (2026)

What is React and Why is it Critical in Modern Engineering?

React Lifecycle Visualizer

Core Architectural Concepts in React

Virtual DOM & Reconciliation

Hooks Lifecycle

State Colocation

Concurrent Features

Server Components

check_circleWhy Modern Companies Choose React

lightbulbStrategic Preparation Tips

errorCrucial Mistakes to Avoid

trending_upHiring Trends & Career Outlook (2026)

Testing