Question 1

What is JSX and how does it differ from standard HTML template engines?

Accepted Answer

JSX (JavaScript XML) is a syntax extension for JavaScript that allows you to write HTML-like structures directly inside your JavaScript code. Unlike traditional template engines that separate logic from markup using proprietary syntax (like Handlebars or Angular templates), JSX compiles down to standard JavaScript function calls (`React.createElement` or new JSX runtime calls). This means that JSX is not merely a string template; it is a full JavaScript expression. Consequently, you have the full power of JavaScript (loops, conditionals, scope, variables) directly within your UI code. Here is a compilation target illustration: ```javascript // JSX source code const element =

Hello World

; // Compiled JavaScript code const element = jsx('h1', { className: 'title', children: 'Hello World' }); ``` Because of this design, JSX provides compile-time safety, auto-escapes values to prevent cross-site scripting (XSS) attacks, and integrates seamlessly with IDE autocompletion and static typing tools like TypeScript.

Question 2

Explain the difference between Props and State, and when to use each.

Accepted Answer

Props (short for properties) and State are the two main types of data that control a React component, but they serve completely different architectural purposes: 1. Props are read-only (immutable) parameters passed down from a parent component to a child. They behave like function arguments, allowing parents to configure children dynamically. A child component must never modify its props directly, preserving the unidirectional data flow pattern of React. 2. State is a mutable, local data store managed entirely within the component itself. It represents the component's internal condition at any given point in time (e.g., whether a dropdown is open, or what text is entered in an input field). State updates trigger a re-render of the component and all its nested children. Here is a simple component showing both concepts: ```typescript interface ButtonProps { label: string; // prop } function ClickCounter({ label }: ButtonProps) { const [count, setCount] = useState(0); // state return ( ); } ``` As a rule of thumb, use props for data that originates outside the component or represents configuration, and use state for data that changes over time based on user interactions or async network updates within the component.

Question 3

What is the Virtual DOM and how does React keep it in sync with the real DOM?

Accepted Answer

The Virtual DOM is a lightweight, in-memory representation of the real browser DOM. When a component's state or props change, React generates a new virtual tree of React elements. Instead of updating the expensive browser DOM immediately, React compares this new tree with the previous virtual DOM tree. This comparison process is called Reconciliation.

React's diffing algorithm operates on two key assumptions to reduce comparison complexity from O(n³) to O(n):
1. Two elements of different HTML tags will produce different trees (React will destroy the old tree and mount a new one).
2. Developers can provide a stable 'key' prop to hint which child elements are stable across renders.

Once the differences are calculated, React batches these changes and performs the minimal required writes to the real DOM in a single pass. This minimizes browser layout recalculations and repaints, which are the main bottlenecks of frontend performance.

Question 4

What are React Hooks and why were they introduced in React 16.8?

Accepted Answer

React Hooks are functions that let you 'hook into' React state and lifecycle features from functional components. Before hooks, developers had to write ES6 class components to manage state and access lifecycles. Classes introduced several issues, such as complex binding of the `this` keyword, difficulties in reusing stateful logic without introducing nested patterns like Higher-Order Components (HOCs) or Render Props, and mixing unrelated code (like fetch logs and event listeners) inside single lifecycle methods like `componentDidMount`.

Hooks resolved these paint points by allowing you to extract stateful logic into clean, reusable functions (custom hooks) that can be tested independently. The most common built-in hooks are:
- `useState` for local state.
- `useEffect` for side-effects (fetching, timers, subscriptions).
- `useContext` for reading global context values.
- `useRef` for persisting mutable values or referencing DOM elements.

Question 5

How does state batching work in React 18 and what is automatic batching?

Accepted Answer

State batching is when React groups multiple state updates into a single re-render for better performance. Before React 18, React only batched updates inside React event handlers (like onClick). Updates inside promises, setTimeout, or native event handlers were not batched and triggered immediate sequential re-renders.

React 18 introduced Automatic Batching, which batches all state updates regardless of where they originate:
```javascript
// In React 18+, these updates trigger only ONE re-render:
fetch('/api').then(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
});
```
If you need to force an immediate render, you can opt out of batching using `ReactDOM.flushSync(() => { ... })`.

Question 6

Why are keys necessary when rendering lists in React, and what happens if you use array indices?

Accepted Answer

Keys help React identify which items in a list have changed, been added, or been removed. During reconciliation, React matches the keys of the new virtual elements against the keys of the previous elements to determine if it can reuse the existing DOM nodes or if it must destroy and recreate them.

Using array indices as keys is a dangerous antipattern. If the list is reordered, filtered, or prepended, the index key maps the state of the component incorrectly to the DOM elements. This leads to subtle UI bugs where input values, checkboxes, or CSS transitions remain attached to the wrong visual components. Always use a stable, unique identifier (like a database ID) as the key.

Question 7

What is the difference between Functional Components and Class Components?

Accepted Answer

Functional components are JavaScript functions that accept props and return JSX. Class components are ES6 classes extending `React.Component` that require a `render()` method.

Functional components are lightweight, compile to smaller bundles, and leverage React Hooks for stateful logic and side-effects. Class components manage state via `this.state` and lifecycles via methods like `componentDidMount`, which often leads to split logic and difficult code-sharing patterns. Modern React exclusively recommends functional components.

Question 8

Explain Pure Components and React.memo in preventing unnecessary updates.

Accepted Answer

A Pure Component (in class-based React) automatically implements `shouldComponentUpdate` with a shallow prop and state comparison. In functional components, `React.memo` achieves the same optimization by wrapping a component and preventing it from re-rendering if its props have not changed. ```javascript const MyComponent = React.memo(function WrappedComponent(props) { return

{props.value}

; }); ``` If a parent component re-renders but passes the same props to `MyComponent`, React skips rendering the child entirely, protecting performance in large leaf node lists.

Question 9

What is the difference between Controlled and Uncontrolled components in forms?

Accepted Answer

In controlled components, the form data is handled by a React component state. The input value is bound to the state, and every keystroke triggers an `onChange` handler that updates the state:
```javascript
<input value={text} onChange={(e) => setText(e.target.value)} />
```
In uncontrolled components, form data is handled by the DOM itself. Instead of writing event handlers for every state update, you use a `ref` to pull values directly from the DOM when needed, which can be simpler for basic forms but harder for real-time validation.

Question 10

Explain the React Context API and what problems it solves.

Accepted Answer

The Context API provides a way to pass data down the component tree without having to pass props manually at every level (a problem known as 'prop drilling').

It is useful for global states like themes, user authentication profiles, or localized language settings. However, it is not a complete state management replacement; any change to the Context provider's value forces all consumer components to re-render, which can lead to performance regressions in highly dynamic applications.

Question 11

What is the children prop and how is it used for component composition?

Accepted Answer

The `children` prop is a special prop automatically passed to every component, representing the content enclosed between the component's opening and closing tags. It enables component composition, allowing you to build layouts that act as containers for generic content: ```javascript function Card({ children }) { return

{children}

; } ``` This allows you to nest arbitrary HTML or other custom React components inside the container without coupling it to specific child components.

Question 12

Explain the differences between handling events in React versus native HTML.

Accepted Answer

Event handling in React differs from native HTML in three main ways:
1. React events are named in camelCase (e.g., `onClick`) instead of lowercase (`onclick`).
2. With JSX, you pass a function reference instead of a string reference.
3. React wraps native browser events in a cross-browser wrapper called `SyntheticEvent`, which normalizes event behaviors across all browser platforms for consistent handling.

Question 13

What are React Fragments and why are they preferred over wrapper divs?

Accepted Answer

React components must return a single root element. If you want to return multiple elements, wrapping them in a `

` inserts an extra node into the DOM tree, which can break CSS flexbox layouts, grid alignments, and semantic HTML markup. Fragments (`` or `<>...`) let you group a list of children without adding extra DOM nodes, resulting in a cleaner HTML footprint and faster page rendering speeds.

Question 14

What is the purpose of StrictMode in React?

Accepted Answer

StrictMode is a development-only tool that highlights potential problems in an application. It does not render any visible UI. Instead, it activates checks and logs warnings for unsafe lifecycles, legacy API usages, and memory leaks. In React 18+, it intentionally mounts, unmounts, and remounts components twice to ensure side effects are idempotent and cleanup functions work properly.

Question 15

What is prop drilling and how can it be avoided?

Accepted Answer

Prop drilling is the process of passing props through multiple levels of nested components simply to deliver the data to a deep child component, cluttering intermediate components. It can be avoided by reorganizing component trees (using component composition), using the Context API, or utilizing global state managers like Zustand, Jotai, or Redux.

Question 16

What are defaultProps and propTypes in React?

Accepted Answer

`propTypes` is a runtime type-checking system for props in React development mode, allowing you to declare expected types and warn if incorrect props are sent. `defaultProps` defines default values for props if they are omitted by the parent. In modern React, ES6 default parameter values and TypeScript interfaces are preferred over these legacy systems.

Question 17

How do you handle conditional rendering in React JSX?

Accepted Answer

Conditional rendering in React is done using standard JavaScript control structures: 1. Ternary operators for simple conditional elements: `{isLoggedIn ? : }` 2. Logical `&&` operators for rendering items if a condition is true: `{hasError && }` 3. Standard `if-else` or `switch` statements outside of the returned JSX block.

Question 18

What is the role of the useEffect cleanup function?

Accepted Answer

The cleanup function returned by `useEffect` runs before the effect runs again and when the component unmounts. It is crucial for preventing memory leaks by clearing timers, unsubscribing from event listeners, terminating WebSockets, and aborting fetch calls:
```javascript
useEffect(() => {
  const handler = () => console.log('resize');
  window.addEventListener('resize', handler);
  return () => window.removeEventListener('resize', handler); // cleanup
}, []);
```

Question 19

How do you write and compile dynamic styles in React?

Accepted Answer

Dynamic styling in React is achieved using inline styles bound to state variables: `

` or by conditionally building CSS class names using template literals or utility libraries like `clsx` or `tailwind-merge`: `

`.

Question 20

Explain how React devtools help inspect component state.

Accepted Answer

React Developer Tools is a browser extension that lets you inspect the React component tree. It displays the props, state, hooks, and context values of each component, and features a Profiler tab to record render frequencies, durations, and dependencies to pinpoint performance bottlenecks.

Question 21

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 22

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 23

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 24

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 25

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 26

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 27

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 28

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 29

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 30

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 31

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 32

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 33

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 34

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 35

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 36

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 37

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 38

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 39

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 40

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 41

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 42

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 43

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 44

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 45

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 46

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 47

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 48

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 49

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 50

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 51

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 52

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 53

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 54

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 55

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 56

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 57

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 58

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 59

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 60

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.

Top 60 React Interview Questions and Answers (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)

Basics