Question 1

What is JSX and how does it work under the hood?

Accepted Answer

JSX (JavaScript XML) is a syntax extension for JavaScript that allows writing HTML-like markup inside JavaScript files. ### How It Works: 1. Browsers cannot understand JSX directly. A compiler like Babel, SWC, or TypeScript transforms JSX into standard JavaScript function calls. 2. **Before React 17**: JSX compiled to 'React.createElement(component, props, ...children)', which required 'import React from 'react'' in every file. 3. **React 17+ (New JSX Transform)**: Compilers automatically import special functions from 'react/jsx-runtime' ('_jsx' and '_jsxs'). You no longer need to import React just to use JSX! ### Rules of JSX: - Return a single root element (or use a Fragment '<>...'). - Close all tags ('', '
'). - Use camelCase for attribute names ('className' instead of 'class', 'tabIndex' instead of 'tabindex'). Key Takeaway: JSX is syntactic sugar for React element creation. React 17+ uses react/jsx-runtime so importing React is optional for JSX.

Question 2

What is the difference between props and state in React?

Accepted Answer

Both **props** and **state** are plain JavaScript objects that trigger a re-render when they change, but they serve opposite purposes:

| Feature | Props ('props') | State ('useState') |
|---|---|---|
| **Definition** | Arguments passed from parent to child | Internal data managed by the component |
| **Mutability** | **Immutable** (read-only by receiving component) | **Mutable** (via setter function) |
| **Ownership** | Owned by parent component | Owned by local component |
| **Purpose** | Configure component and pass data down | Track dynamic user input and UI changes |

### One-Way Data Flow:
React enforces unidirectional data flow. A child component should **never** mutate its props directly. To update parent state from a child, the parent passes down a callback function as a prop.

Key Takeaway: Props are read-only configuration passed from above; state is local, mutable data managed by the component itself.

Question 3

How does the useState hook work and what is functional updater syntax?

Accepted Answer

'useState' declares a state variable that persists across re-renders.

### Syntax:
'const [state, setState] = useState(initialValue);'

### Key Mechanics:
1. **Asynchronous Updates & Batching**: Calling 'setState' does not change the state variable immediately in the current execution scope. React schedules a re-render and batches multiple state updates together for performance.
2. **Functional Updater Syntax**: When new state depends on the previous state, pass a function to the setter: 'setCount(prev => prev + 1)'. This ensures you are working with the most up-to-date state inside batched updates.
3. **Lazy Initialization**: If initial state requires an expensive calculation, pass an initializer function: 'useState(() => computeExpensiveValue())' so it only runs on mount.

Key Takeaway: Always use functional updater syntax setX(prev => ...) when new state depends on the previous state value.

Question 4

How does useEffect work and how do dependency arrays control execution?

Accepted Answer

'useEffect' lets you synchronize a component with an external system (network, DOM, timers, subscriptions).

### Dependency Array Rules:
1. **No Dependency Array ('useEffect(fn)')**: Runs after **every** render. Highly prone to infinite loops if state is updated inside.
2. **Empty Array ('useEffect(fn, [])')**: Runs **once** after initial mount (like 'componentDidMount'). Cleanup runs on unmount.
3. **Populated Array ('useEffect(fn, [id])')**: Runs on mount AND after any render where 'id' has changed (compared via 'Object.is').

### Cleanup Function:
Return a function from 'useEffect' to clean up subscriptions, timers, or event listeners before the component unmounts or before the effect re-runs.

Key Takeaway: Return a cleanup function from useEffect to unsubscribe from timers, WebSockets, or global event listeners safely.

Question 5

Why are keys necessary when rendering lists in React and why avoid using array index as key?

Accepted Answer

Keys help React identify which items in a list have changed, been added, or been removed during Virtual DOM **reconciliation**:

### Why 'key={index}' Causes Bugs:
If items in a list are re-ordered, filtered, or prepended, using the array index as a key tricks React into thinking the component at index '0' is still the same element. This causes severe bugs with form inputs, stateful child components, and animation glitches!

### Best Practice:
Always use stable, unique string/number IDs from your data model (e.g., 'item.id').

Key Takeaway: Keys must be stable, unique IDs. Avoid array indices as keys to prevent state corruption when lists reorder.

Question 6

What is the useRef hook and how does it differ from useState?

Accepted Answer

'useRef' returns a mutable ref object whose '.current' property is initialized to the passed argument. The ref object persists across re-renders.

### Differences from 'useState':
1. **No Re-Renders**: Updating 'ref.current = newValue' does NOT trigger a component re-render!
2. **Synchronous Updates**: 'ref.current' updates synchronously and is available immediately.

### Primary Use Cases:
- Direct access to DOM nodes ('inputRef.current.focus()').
- Storing mutable timer IDs, interval handles, or previous state values.

Key Takeaway: useRef stores mutable values across renders without triggering component re-renders.

Question 7

What is the difference between useMemo and useCallback in React?

Accepted Answer

Both hooks memoize values to optimize performance, but they cache different things:

- **'useMemo(() => computeValue(a, b), [a, b])'**: Caches the **result value** of an expensive calculation. Only re-computes when dependencies change.
- **'useCallback(fn, deps)'**: Caches the **function reference itself**. Equivalent to 'useMemo(() => fn, deps)'!

### Why 'useCallback' Matters:
Passing inline functions to memoized child components ('React.memo') breaks memoization because function instances differ on every render. 'useCallback' preserves stable function references.

Key Takeaway: Use useMemo to cache expensive computation results and useCallback to preserve stable callback function references.

Question 8

How does the Context API (createContext, useContext) eliminate prop drilling?

Accepted Answer

The **Context API** allows components to share data down the component tree without explicitly passing props through every intermediate level (**Prop Drilling**).

### 3 Steps to Context:
1. **Create Context**: 'const ThemeContext = createContext('light');'
2. **Provide Context**: Wrap top-level parent in '<ThemeContext.Provider value={theme}>'.
3. **Consume Context**: In deep child components, read value via 'const theme = useContext(ThemeContext);'.

Key Takeaway: Use Context API to share global configuration (themes, auth state) without prop drilling.

Question 9

How does the new useActionState hook in React 19 handle form submissions and pending states?

Accepted Answer

React 19 introduces **'useActionState'** (replacing 'useFormState'), a native hook designed to streamline form actions and async state mutations:

### Syntax:
'const [state, formAction, isPending] = useActionState(fn, initialState);'

### Features:
- Automatically tracks **'isPending'** status while async form submission runs.
- Automatically captures returned state or error objects from Server Actions / Async Actions.

Key Takeaway: useActionState in React 19 simplifies form action handlers by providing state and pending status out-of-the-box.

Question 10

How does useFormStatus allow child components to read parent form pending status in React 19?

Accepted Answer

**'useFormStatus'** is a React 19 hook that allows child components inside a '

Question 11

How does the useOptimistic hook in React 19 render instant UI updates before server confirmation?

Accepted Answer

**'useOptimistic'** is a native React 19 hook that enables **Optimistic UI updates**:

### How It Works:
1. Displays immediate optimistic state to the user while an async operation (like a Server Action) is in-flight.
2. When the async operation finishes, React automatically replaces the optimistic state with the actual server response.
3. If the server action fails or throws, React automatically **rolls back** to the original state!

Key Takeaway: useOptimistic provides responsive UI by displaying expected state changes immediately while network operations complete.

Question 12

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

Accepted Answer

### 1. Controlled Components (Recommended):
Form input values are driven entirely by React **state** ('value={state}' + 'onChange={e => setState(e.target.value)}').
- Provides real-time validation, dynamic disabling, and conditional formatting.

### 2. Uncontrolled Components:
Form data is handled by the **DOM** directly. Values are read using 'useRef' or native 'FormData' on submit ('defaultValue="Alice"').
- Ideal for simple forms, file inputs ('<input type="file" />'), or integrating with non-React libraries.

Key Takeaway: Controlled components store form state in React for real-time validation; uncontrolled components rely on DOM refs.

Question 13

How does React.memo optimize re-rendering of functional components?

Accepted Answer

'React.memo' is a Higher-Order Component that memoizes a functional component. If props have not changed between renders, React skips rendering the component and reuses the last rendered result.

### Shallow Comparison:
By default, 'React.memo' performs a **shallow comparison** of props ('Object.is').
- *Warning*: If you pass inline objects, arrays, or non-memoized functions as props, shallow comparison fails, and the child re-renders anyway!

Key Takeaway: Wrap functional components in React.memo to skip re-rendering when props remain unchanged.

Question 14

What is an Error Boundary in React and why must it be written as a Class Component?

Accepted Answer

An **Error Boundary** is a component that catches JavaScript errors anywhere in its child component tree, logs the errors, and displays a fallback UI instead of crashing the entire application.

### Why Class Components?
Error Boundaries MUST be class components because there are no React hooks equivalent to the class lifecycle methods **'static getDerivedStateFromError()'** and **'componentDidCatch()'**!

Key Takeaway: Error Boundaries catch rendering errors in child component trees, preventing full application crash screens.

Question 15

What are React Fragments (<>...) and why are they preferable to container

tags?

Accepted Answer

React components must return a single root element. **React Fragments** ('' or '<>...') allow grouping multiple children without adding extra unnecessary DOM nodes: ### Benefits: - **Clean DOM Tree**: Prevents "div soup" (excessive wrapper '

' tags). - **CSS Layout Protection**: Extra wrapper divs often break Flexbox and CSS Grid parent-child layout relationships! - **Keyed Fragments**: Use '' when mapping lists of fragments. Key Takeaway: Use Fragments (<>...) to group elements without introducing extra DOM nodes that disrupt CSS Flexbox/Grid.

Question 16

What are the common patterns for conditional rendering in React (&&, ternary, early return)?

Accepted Answer

React supports standard JavaScript conditional patterns to render different JSX dynamically: ### 3 Primary Patterns: 1. **Ternary Operator**: '{isLoggedIn ? : }' 2. **Logical AND ('&&')**: '{unreadCount > 0 && }' 3. **Early Return**: Returning alternative JSX early inside component logic. ### ⚠️ The Number '0' Bug in '&&': In '{items.length && }' when 'items.length' is '0', JavaScript evaluates '0 && ...' to '0' and **renders the number 0 on the screen**! Fix: Use '{items.length > 0 && }'. Key Takeaway: Avoid {items.length && } bugs by ensuring the left side of && is explicitly a boolean (e.g. items.length > 0).

Question 17

How does React SyntheticEvent system work and how does it normalize cross-browser events?

Accepted Answer

React wraps native browser DOM events in a cross-browser wrapper called **'SyntheticEvent'**: ### Key Concepts: - **Cross-Browser Consistency**: Normalizes browser differences so events behave identically across Chrome, Safari, Firefox, and Edge. - **Event Delegation**: React attaches event listeners to the root DOM container ('

') rather than individual DOM nodes, improving memory efficiency. - **Explicit Prevention**: Call 'e.preventDefault()' explicitly to prevent default browser behavior ('return false' does not work!). Key Takeaway: React wraps native events in SyntheticEvent objects attached to the root container via event delegation.

Question 18

What is React StrictMode and why does it run effects and render functions twice in development?

Accepted Answer

**'<StrictMode>'** is a development-only tool that highlights potential problems in a React application:

### Why Double Execution in Development?
To help developers catch subtle bugs caused by impure render functions or missing 'useEffect' cleanup handlers, React **intentionally renders components twice** and **executes effects twice** (mount $\rightarrow$ unmount $\rightarrow$ mount) in development mode!
- *Note*: Double execution occurs ONLY in development builds; it is completely stripped in production builds.

Key Takeaway: StrictMode intentionally runs renders and effects twice in development to uncover impure functions and missing cleanup logic.

Question 19

What is a Custom Hook and what rules must custom hooks follow?

Accepted Answer

A **Custom Hook** is a JavaScript function whose name starts with **'use'** and that may call other React hooks:

### Why Custom Hooks?
Allows extracting and sharing stateful logic (fetching data, tracking window resize, handling form inputs) across multiple components without duplicating code!

### Rules of Hooks:
1. **Call hooks ONLY at the top level**: Do not call hooks inside loops, conditions, or nested functions (except React 19 'use()'!).
2. **Call hooks ONLY from React function components** or custom hooks.

Key Takeaway: Custom hooks start with 'use' and allow sharing stateful logic across components while following the Rules of Hooks.

Question 20

What is the Virtual DOM and why is it faster than direct DOM manipulation?

Accepted Answer

Directly mutating the browser's Real DOM is computationally expensive because layout recalculations, repaints, and reflows take significant CPU time. The **Virtual DOM** is a lightweight in-memory JavaScript object tree representing the UI:

### Reconciliation Process:
1. When state changes, React constructs a **new Virtual DOM tree**.
2. **Diffing Algorithm**: React compares (diffs) the new Virtual DOM tree with the previous Virtual DOM tree.
3. **Batch Updates**: React calculates the minimal set of changes required and updates ONLY those specific nodes in the Real DOM!

Key Takeaway: The Virtual DOM reduces expensive browser repaints by diffing in-memory object trees and applying minimal Real DOM updates.

Question 21

How does the children prop enable component composition and slot layouts?

Accepted Answer

The **'children'** prop is a special prop automatically passed to components containing whatever elements or JSX are nested between their opening and closing tags:

### Composition over Inheritance:
React recommends **Composition** instead of inheritance. Components like 'Card', 'Modal', and 'Layout' act as container slots that accept arbitrary nested JSX via 'children'.

Key Takeaway: Use props.children to create flexible container components and favor composition over class inheritance.

Question 22

Why must React render functions be pure and idempotent?

Accepted Answer

In React, a component's render function MUST be a **pure function**:

### Rules of Pure Components:
1. **Mind Its Own Business**: Does not mutate any objects or variables that existed before rendering.
2. **Same Inputs, Same Output**: Given the same props and state, it MUST always return the exact same JSX.

### Why Purity Matters:
React's Concurrent Features (Concurrent Mode, Server Components) render components speculatively, interrupt renders, or render twice in StrictMode. Impure renders (mutating global variables during render) cause unpredictable UI bugs!

Key Takeaway: React render functions must be pure and free of side effects to support concurrent rendering features safely.

Question 23

How does automatic batching work in React 18 and 19 across async operations?

Accepted Answer

**Batching** is when React groups multiple state updates into a single re-render pass for better performance:

### React 18+ Automatic Batching:
- **Before React 18**: Batching ONLY worked inside React event handlers. State updates inside 'fetch()' Promises, 'setTimeout', or native event handlers triggered separate re-renders for every setter!
- **React 18 & 19**: **Automatic Batching** groups all state updates regardless of where they originate (Promises, timeouts, async functions) into a single optimized re-render!

Key Takeaway: React 18+ automatically batches state updates across Promises and timeouts to prevent unnecessary intermediate re-renders.

Question 24

When should you use flushSync to force immediate DOM updates?

Accepted Answer

**'flushSync'** (from 'react-dom') forces React to flush any pending state updates synchronously and update the DOM immediately:

### Primary Use Case:
Measuring DOM node geometry (e.g. scroll position, element height) immediately after updating state before the browser finishes the current event frame.

Key Takeaway: Use flushSync sparingly when you must synchronously measure DOM geometry immediately after a state update.

Question 25

What is a Higher-Order Component (HOC) and how does it compare to custom hooks?

Accepted Answer

A **Higher-Order Component (HOC)** is an advanced pattern in React for reusing component logic. An HOC is a function that takes a component and returns a new enhanced component:

### HOC vs Custom Hooks:
- **HOC ('const ProtectedPage = withAuth(Profile)')**: Wraps component tree, injecting props. Can lead to "wrapper hell" and obscured prop origins.
- **Custom Hooks ('useAuth()')**: Modern preferred pattern. Shares stateful logic directly inside component bodies cleanly without nesting wrapper nodes.

Key Takeaway: Higher-Order Components wrap components to inject logic; custom hooks are preferred in modern React for cleaner composition.

Question 26

What is the Render Props pattern in React?

Accepted Answer

The **Render Props** pattern refers to a technique for sharing code between React components using a prop whose value is a **function that returns JSX**: ### How It Works: Instead of hardcoding what to render, a component delegates UI rendering to a function prop passed by the parent (e.g. ' } />'). Key Takeaway: The Render Props pattern uses a function prop to share stateful logic while letting parents control UI rendering.

Question 27

What is dangerouslySetInnerHTML and how do you prevent XSS vulnerabilities?

Accepted Answer

**'dangerouslySetInnerHTML'** is React's replacement for using 'innerHTML' in the browser DOM. It allows setting raw HTML strings directly inside a component:

### XSS Security Risk:
Passing unsanitized user-supplied HTML opens your application to **Cross-Site Scripting (XSS)** attacks, allowing malicious scripts to steal session cookies or execute unauthorized actions!
- **Defense**: Always sanitize raw HTML strings using a library like **DOMPurify** before passing them to 'dangerouslySetInnerHTML'.

Key Takeaway: Always sanitize HTML strings with DOMPurify before setting dangerouslySetInnerHTML to prevent XSS security exploits.

Question 28

Compare CSS Modules, Styled Components, and Tailwind CSS in React.

Accepted Answer

React applications use three main styling approaches:

1. **CSS Modules ('styles.module.css')**: Standard CSS files where class names are automatically scoped locally to the component ('Component_button_hash'), avoiding global CSS name collisions.
2. **Styled Components / Emotion (CSS-in-JS)**: Writes dynamic CSS inside JavaScript files using tagged template literals ('styled.button\'color: ${props => props.theme.color}\'').
3. **Tailwind CSS**: Utility-first CSS framework applying pre-defined atomic utility classes ('className="flex p-4 bg-blue-500"') with zero JS runtime overhead.

Key Takeaway: CSS Modules locally scope class names; Tailwind provides zero-runtime atomic utilities for fast styling.

Question 29

How does React 19 simplify ref handling by making ref a standard prop?

Accepted Answer

In React 19, **'ref' is now a standard prop** for functional components!

### Deprecation of 'forwardRef':
- **Before React 19**: Passing a 'ref' to a functional component required wrapping it in 'React.forwardRef((props, ref) => ...)'.
- **React 19**: Functional components accept 'ref' directly as a regular prop ('function MyInput({ ref, label })'). 'React.forwardRef' is officially deprecated and will be removed in future versions!

Key Takeaway: React 19 allows passing 'ref' directly as a standard prop to functional components, deprecating React.forwardRef.

Question 30

How do you use React DevTools Profiler to diagnose slow renders?

Accepted Answer

The **React DevTools Profiler** measures component rendering performance to identify slow rendering bottlenecks:

### Diagnostic Workflow:
1. Open React DevTools and select the **Profiler** tab.
2. Click **Record**, perform user interactions in the application, and stop recording.
3. **Flamegraph View**: Displays components rendered in a commit tree (color-coded by render duration; yellow/red indicates slow renders!).
4. **Inspect Render Reasons**: Enable "Record why each component rendered" in settings to inspect exact prop/state changes triggering re-renders.

Key Takeaway: Use React DevTools Profiler to identify slow component renders and determine exact prop/state trigger reasons.

Question 31

When should you use useReducer instead of useState for state management?

Accepted Answer

**'useReducer'** is an alternative to 'useState' ideal for managing complex state logic:

### When to prefer 'useReducer':
1. State consists of multiple sub-values or nested objects.
2. The next state depends on intricate calculations involving the previous state.
3. Multiple event handlers trigger the same set of state transformations.
4. Enables Redux-like predictable state machine transitions via 'dispatch({ type: 'ACTION', payload })'.

Key Takeaway: Use useReducer when component state logic involves complex objects or multiple interdependent state transitions.

Question 32

How does useImperativeHandle customize the instance value exposed to parent refs?

Accepted Answer

**'useImperativeHandle'** customizes the ref instance value exposed to parent components when using 'useRef':

### Why use it?
Instead of exposing the entire raw DOM node to the parent (which violates encapsulation), 'useImperativeHandle' limits the exposed interface to specific custom methods (e.g. 'focus()', 'reset()', 'scrollIntoView()').

Key Takeaway: Use useImperativeHandle to expose controlled imperative methods to parent refs while maintaining component encapsulation.

Question 33

How do you optimize Context API to prevent widespread re-rendering?

Accepted Answer

Whenever a Context value changes, **ALL subscriber components using 'useContext' re-render**, even if they only consume an unchanged portion of the context value!

### Optimization Strategies:
1. **Split Contexts**: Separate volatile state data from stable action dispatchers into two providers ('StateContext' and 'DispatchContext').
2. **Memoize Provider Value**: Always wrap context value objects in 'useMemo' so identity remains stable across parent renders.

Key Takeaway: Split Context into separate State and Dispatch providers to prevent action-only components from re-rendering on data updates.

Question 34

How do you unit test custom React hooks using React Testing Library?

Accepted Answer

Testing custom hooks directly without a component requires '@testing-library/react' **'renderHook'**:

### Key Concepts:
- **'renderHook(() => useMyHook())'**: Mounts a test component harness executing the hook.
- **'act(() => result.current.action())'**: Wraps state-mutating hook calls to ensure all React state updates and effects process before assertions execute.

Key Takeaway: Use renderHook and wrap state mutations in act() when testing custom React hooks.

Question 35

What causes React hydration mismatch errors and how do you fix them?

Accepted Answer

**Hydration Mismatch Errors** occur during Server-Side Rendering (SSR) when the initial HTML generated on the server differs from the initial Virtual DOM tree rendered on the client browser during hydration:

### Common Causes:
1. Rendering dynamic dates/timestamps ('new Date()').
2. Reading 'window' or 'localStorage' during initial render.
3. Browser extensions mutating DOM tags.

### Fixes:
- Defer client-only values to a 'useEffect' mount pass.
- Use 'suppressHydrationWarning' on specific text elements (like timestamps).

Key Takeaway: Defer client-specific data rendering (window/dates) to useEffect to guarantee matching server and client hydration trees.

Question 36

How does React Suspense work for asynchronous data fetching and fallback UIs?

Accepted Answer

**React Suspense** allows components to suspend rendering while waiting for asynchronous operations (code splitting chunks or data fetching): ### How Suspense Data Fetching Works: 1. A component reads from a Suspense-enabled resource (TanStack Query, Relay, RSC). 2. If data is pending, the resource **throws a Promise** up the component tree. 3. The nearest **'}>'** boundary catches the Promise and renders the fallback UI until the Promise resolves! Key Takeaway: Suspense boundaries catch thrown Promises from data resources, displaying fallback loading UIs automatically.

Question 37

How does useTransition keep the UI responsive during heavy state updates?

Accepted Answer

**'useTransition'** is a Concurrent React hook that allows marking specific state updates as **non-urgent transitions**:

### Problem Solved:
Heavy state updates (like filtering a list of 10,000 items) block the main thread, causing user typing input to freeze.
- **Solution**: Wrap the heavy state update in 'startTransition(() => setFilter(value))'. React renders urgent typing input immediately, while calculating the heavy list filter in the background!

Key Takeaway: Use useTransition to mark heavy re-renders as non-urgent transitions, keeping user input typing smooth and responsive.

Question 38

How does useDeferredValue defer re-rendering of non-critical UI parts?

Accepted Answer

**'useDeferredValue'** receives a value and returns a deferred copy of that value that "lags behind" during heavy updates:

### 'useDeferredValue' vs Debouncing:
- **Debouncing**: Waits a fixed time delay (e.g. 300ms) regardless of machine speed.
- **'useDeferredValue'**: Starts rendering immediately in the background, rendering as fast as the user's hardware allows without blocking typing! If a new key is typed, React aborts the in-flight deferred render instantly.

Key Takeaway: Use useDeferredValue to lag non-critical UI components without introducing fixed debounce delays.

Question 39

What is useSyncExternalStore and why do Redux and Zustand rely on it?

Accepted Answer

**'useSyncExternalStore'** is a hook recommended for reading and subscribing from external non-React data stores (Redux, Zustand, browser APIs):

### Why It Was Added (React 18):
In Concurrent React, rendering can pause and yield control to the browser. If an external store updates mid-render, different components read different data versions (**Tearing**!). 'useSyncExternalStore' guarantees synchronous reads, eliminating visual tearing completely.

Key Takeaway: Use useSyncExternalStore when integrating external non-React state stores to prevent tearing in Concurrent React.

Question 40

What is the exact execution timing difference between useLayoutEffect and useEffect?

Accepted Answer

The difference between 'useLayoutEffect' and 'useEffect' is **execution timing relative to browser painting**:

1. **'useEffect'** (Asynchronous): Runs AFTER React mutates the DOM AND AFTER the browser paints the screen. Does not block visual painting.
2. **'useLayoutEffect'** (Synchronous): Runs synchronously AFTER React mutates the DOM, but **BEFORE the browser paints the screen**!
- *Use Case*: Measuring DOM layout (element height/scroll) and applying synchronous DOM mutations to prevent visible UI flickering.

Key Takeaway: Use useLayoutEffect for DOM measurements and mutations that must apply before the browser paints to prevent visual flicker.

Question 41

Why should you use TanStack Query (React Query) instead of useEffect for data fetching?

Accepted Answer

Fetching data inside 'useEffect' is prone to severe bugs (race conditions, unmounted component memory leaks, missing error states, no caching).

### Advantages of TanStack Query (React Query):
- **Automatic Caching**: Shares and caches query data across components.
- **Stale-While-Revalidate**: Renders cached data instantly while fetching fresh data in the background.
- **Deduplication**: Merges duplicate concurrent network requests into a single HTTP call.
- **Automatic Refetching**: Refetches data on window focus or network reconnect.

Key Takeaway: Use TanStack Query instead of useEffect for data fetching to gain built-in caching, request deduplication, and stale-while-revalidate.

Question 42

How do list virtualization libraries (TanStack Virtual) render massive datasets?

Accepted Answer

Rendering 10,000 list items creates thousands of DOM nodes, causing memory exhaustion and browser scroll lag. **List Virtualization (Windowing)** renders ONLY the items currently visible in the scroll viewport (plus a small buffer):

### How It Works:
Calculates total container scroll height dynamically, but instantiates only ~20 active DOM nodes positioned absolutely based on scroll offset. As the user scrolls, DOM nodes are recycled instantly!

Key Takeaway: Use list virtualization to render datasets with thousands of items by rendering only DOM nodes visible in the scroll viewport.

Question 43

How does the Compound Components design pattern work in React?

Accepted Answer

The **Compound Components** pattern allows building components that work together to form a cohesive UI unit while sharing implicit state behind the scenes: ### Benefits: - **Flexible Markup Layout**: Parents can rearrange child component positions freely. - **Implicit State**: Child components ('') communicate with parent ('

Question 44

What is state colocation and why is it the first step in React performance tuning?

Accepted Answer

**State Colocation** is the practice of keeping component state as close to where it is actually used as possible: ### Why It Improves Performance: When state updates, React re-renders the component owning that state AND all of its child components. - **Anti-Pattern**: Storing a simple modal toggle state in the top-level '' component forces the ENTIRE application tree to re-render on every toggle! - **Colocated Fix**: Move 'isModalOpen' state down into the specific '' button component. Key Takeaway: Colocate state as close as possible to where it is rendered to prevent unnecessary parent and sibling re-renders.

Question 45

How does Immer.js simplify immutable state updates in React and Redux?

Accepted Answer

Updating complex nested state immutably in React requires verbose object spreading ('...state', '...state.user'). **Immer.js** simplifies this using structural sharing:

### How Immer Works ('produce'):
Pass a state object to Immer's 'produce(state, draft => ...)' callback. You write code that **mutates** the temporary 'draft' object directly. Immer records all mutations and outputs a clean, immutable state copy!

Key Takeaway: Use Immer.js to update deeply nested state objects with clean mutating syntax while preserving immutability.

Question 46

Why do events from a React Portal bubble up to the React parent instead of the DOM parent?

Accepted Answer

**React Portals** ('createPortal(children, domNode)') render child DOM nodes into a different location in the physical DOM tree (e.g. appending a modal to 'document.body'):

### The Event Bubbling Quirk:
Even though a portal element is located elsewhere in the physical HTML DOM tree, **events fired inside a portal bubble up through the React Virtual DOM hierarchy** to its parent React component! A click inside a portal modal triggers 'onClick' on its React parent container.

Key Takeaway: Events inside React Portals bubble up through the React Virtual DOM parent component tree, regardless of physical DOM location.

Question 47

What causes stale closures in React hooks and how do you resolve them?

Accepted Answer

A **Stale Closure** occurs when a function or callback inside 'useEffect', 'useCallback', or 'setTimeout' captures variables from an earlier render pass, retaining outdated "stale" state values:

### Common Cause:
Forgetting to list dynamic variables in the hook's dependency array!

### Fixes:
1. Include all referenced state/props in the dependency array.
2. Use functional updater syntax ('setCount(prev => prev + 1)') so the setter does not depend on closed-over state variables.

Key Takeaway: Fix stale closures by including referenced variables in dependency arrays or using functional state updaters.

Question 48

How do you programmatically reset an Error Boundary when route or props change?

Accepted Answer

Standard Error Boundaries remain in an error state until manually reset. Using the industry-standard library **'react-error-boundary'**:

### Features:
- **'resetKeys={[location.pathname]}'**: Automatically resets the error boundary and attempts a clean re-render whenever specified dependencies (like route paths) change!
- **'FallbackComponent={({ error, resetErrorBoundary }) => ...}'**: Provides a reset button handler to retry rendering.

Key Takeaway: Use react-error-boundary with resetKeys to automatically clear error boundaries when users navigate to new routes.

Question 49

How does React 19 improve interoperability with custom Web Components?

Accepted Answer

Before React 19, using custom Web Components (Custom Elements) required complex 'useRef' workarounds because React treated all non-standard props as DOM attributes (strings) and could not attach custom event listeners natively.

### React 19 Web Component Enhancements:
1. **Properties & Attributes**: Intelligently determines whether to pass props as primitive DOM attributes or complex JS object properties.
2. **Native Custom Event Listeners**: Attach event handlers to custom events directly in JSX ('onCustomEvent={handleEvent}')!

Key Takeaway: React 19 seamlessly integrates with custom Web Components, supporting properties and custom event listeners directly in JSX.

Question 50

How do you identify and fix memory leaks from unmounted React components?

Accepted Answer

Memory leaks occur when unmounted components leave active background tasks (timers, event listeners, API requests) running, which attempt to update state on unmounted components:

### 3 Prevention Patterns:
1. **Timers**: Clear 'setTimeout'/'setInterval' handles in 'useEffect' cleanup.
2. **Network Requests**: Pass **'AbortController.signal'** to 'fetch()' calls and call 'controller.abort()' on cleanup.
3. **Event Listeners**: Call 'removeEventListener' on cleanup.

Key Takeaway: Always cancel pending fetch requests with AbortController and clear timers in useEffect cleanup functions to prevent memory leaks.

Question 51

How does the new React 19 use() API unwrap Promises and Contexts conditionally?

Accepted Answer

React 19 introduces the **'use(resource)'** API, a versatile function for unwrapping Promises and Contexts:

### Key Differences from Standard Hooks:
1. **Conditional Callability**: 'use()' is the **ONLY React API that can be called conditionally** inside 'if' statements, 'for' loops, and early returns!
2. **Promise Unwrapping**: When passed a Promise ('use(promise)'), it suspends the component until the Promise resolves, integrating directly with '<Suspense>'.

Key Takeaway: React 19's use() API can be called inside conditional statements and loops to unwrap Promises and Context values.

Question 52

How do you build a custom useDebounce hook for search input optimization?

Accepted Answer

Debouncing delays executing an action until a specified delay time has passed since the last user keystroke, preventing spamming API requests on every character typed:

### 'useDebounce' Implementation:
Stores value in state and sets a 'setTimeout' inside 'useEffect' that updates the debounced value after a delay (e.g. 300ms), clearing the previous timer on every new keystroke.

Key Takeaway: Use a custom useDebounce hook to delay state execution and prevent excessive API calls during rapid text input.

Question 53

Why prefer @testing-library/user-event over fireEvent in React unit tests?

Accepted Answer

### 1. 'fireEvent':
Dispatches **isolated synthetic DOM events** ('fireEvent.click(button)'). Does NOT simulate browser side-effects (e.g. clicking a checkbox does not automatically check it, typing does not trigger focus/blur/keyPress events).

### 2. 'user-event' (Recommended):
Simulates **full realistic browser interaction pipelines** ('await userEvent.type(input, 'hello')' triggers 'hover', 'focus', 'keyDown', 'keyPress', 'input', 'keyUp', and 'change' events sequentially!).

Key Takeaway: Prefer @testing-library/user-event over fireEvent to test realistic browser interactions including focus, keydown, and input.

Question 54

How does React verify component purity using double execution in development?

Accepted Answer

In '<StrictMode>', React deliberately invokes render functions, 'useState' initializers, and updater callbacks **twice in development mode**:

### Why Double Execution?
If a component is pure, executing its render function twice produces the exact same JSX without mutating external variables.
- If a render function is impure (e.g. 'array.push()' on a global array), running it twice causes duplicated state or unexpected mutations, alerting developers to **fix side effects** before shipping to production!

Key Takeaway: StrictMode double renders expose impure component render side-effects early in development.

Question 55

How do dynamic imports with React.lazy reduce initial Total Blocking Time (TBT)?

Accepted Answer

Single Page Applications bundled into a single massive JavaScript file degrade initial load performance (**Total Blocking Time / TTI**). **Code Splitting** splits code into smaller chunk files loaded on demand: ### 'React.lazy()': Dynamically imports components when rendered: 'const Modal = React.lazy(() => import('./Modal'));'. - Wrapped inside '}>' to render fallback UI while the JavaScript chunk downloads over the network. Key Takeaway: Use React.lazy and dynamic imports to split heavy component chunks and reduce initial JavaScript bundle download sizes.

Question 56

Why did TypeScript completely replace PropTypes for React component validation?

Accepted Answer

### 1. 'PropTypes' (Legacy):
- Validates component props at **runtime** in the browser console ONLY during development builds.
- Does not prevent invalid props from compiling or executing.

### 2. 'TypeScript' (Industry Standard):
- Validates component props at **compile-time** directly inside the IDE.
- Provides autocompletion, refactoring tools, and catches type errors before code ever reaches the browser!

Key Takeaway: TypeScript provides compile-time static type checking and IDE autocompletion, replacing runtime PropTypes.

Question 57

How do you announce dynamic React state changes to screen readers using ARIA live regions?

Accepted Answer

When React updates UI dynamically (e.g. showing a success toast or updating search results count), visual users see the change instantly, but **screen readers are oblivious** unless notified!

### ARIA Live Regions ('aria-live'):
- **'aria-live="polite"'**: Screen reader announces updated text content when the user finishes their current voice action.
- **'aria-live="assertive"'**: Screen reader interrupts user immediately for critical alerts.

Key Takeaway: Use ARIA live regions (aria-live="polite") to ensure screen readers announce dynamic React state updates.

Question 58

What is the difference between React Server Components (RSC) and Client Components in React 19?

Accepted Answer

React 19 architecture categorizes components into two distinct environments:

### 1. React Server Components (RSC - Default):
- Execute **ONLY on the server**. Never shipped to the client JavaScript bundle (**0 KB bundle footprint**!).
- Direct access to server databases, filesystems, and secret API keys.
- Cannot use hooks ('useState', 'useEffect') or browser event listeners ('onClick').

### 2. Client Components (''use client''):
- Rendered on server (SSR) and hydrated on client.
- Have access to interactive state ('useState'), effects, and DOM event listeners.

Key Takeaway: React Server Components run only on the server with 0 KB client bundle size, while Client Components ('use client') handle interactivity.

Question 59

How do React 19 Server Actions process server-side mutations from inline form actions?

Accepted Answer

**Server Actions** in React 19 are asynchronous functions marked with **''use server''** that execute on the server:

### Form Integration:
Passed directly to the '<form action={serverAction}>' prop:
- **Progressive Enhancement**: Form submissions work even if JavaScript has not loaded or is disabled in the client browser!
- React automatically handles 'FormData' serialization and RPC transmission over HTTP POST requests.

Key Takeaway: React 19 Server Actions allow forms to execute server-side database mutations directly with progressive enhancement.

Question 60

How does the use() hook in React 19 replace useContext for conditional Context consumption?

Accepted Answer

Before React 19, reading Context required calling 'useContext(Context)', which suffered from the **Rules of Hooks restriction**: it could NOT be called inside 'if' statements or loops.

### React 19 'use(Context)':
React 19 allows passing a Context object to **'use(Context)'**:
- Can be called **conditionally inside 'if' blocks** and loops, allowing components to skip subscribing to Context when data is unneeded!

Key Takeaway: React 19's use(Context) API replaces useContext and can be called conditionally inside if statements.

Question 61

How do React 19 resource loading APIs (preload, preinit, prefetchDNS) optimize page performance?

Accepted Answer

React 19 introduces native **Resource Loading APIs** ('preload', 'preinit', 'preconnect', 'prefetchDNS') exported from 'react-dom': ### How They Work: When called anywhere in your component tree, React automatically elevates the resource hints directly into the document **''**, discoverable before browser DOM parsing finishes! Key Takeaway: React 19 resource loading APIs automatically elevate asset hints to the document to optimize Critical Rendering Path.

Question 62

How does React 19 support native document metadata tags (, <meta>, <link>) inside components?

Accepted Answer

Before React 19, updating page title and meta tags required third-party libraries like 'react-helmet'. ### React 19 Native Metadata Hoisting: React 19 allows rendering **''**, **'<meta>'**, and **'<link>'** tags directly inside any component at any depth in the tree. React automatically hoists these tags into the document '<head>' during render! Key Takeaway: React 19 natively hoists <title>, <meta>, and <link> tags rendered anywhere in components into the document <head>.

Question 63

How do Finite State Machines eliminate impossible UI states in React?

Accepted Answer

Managing UI states using independent boolean flags ('[isLoading, setIsLoading]', '[isError, setIsError]') often leads to **impossible UI state bugs** (e.g. 'isLoading === true' AND 'isError === true' simultaneously!).

### State Machine Pattern:
Defines explicit, mutually exclusive states ('idle' $\rightarrow$ 'loading' $\rightarrow$ 'success' | 'error'). The UI can exist in ONLY one valid state at a time, eliminating illegal state combinations completely.

Key Takeaway: Use state machine patterns with explicit status strings to eliminate impossible boolean flag combinations.

Question 64

What is the Container/Presenter component pattern and why has it evolved?

Accepted Answer

### 1. Container Component ("Smart"):
Handles data fetching, state management, and side effects. Does not contain styling.

### 2. Presentational Component ("Dumb"):
Receives data via props and renders UI layout/styling exclusively.

### Evolution in Modern React:
Custom hooks have largely replaced container components. Developers extract data fetching into a custom hook ('useUserData()') and call it directly inside presentational components.

Key Takeaway: Extract data fetching logic into custom hooks while keeping presentational components focused on UI rendering.

Take React JS & React 19 Skill Assessment Quiz

Showing 100 Questions

1. What is JSX and how does it work under the hood?

How It Works:

Rules of JSX:

2. What is the difference between props and state in React?

3. How does the useState hook work and what is functional updater syntax?

4. How does useEffect work and how do dependency arrays control execution?

5. Why are keys necessary when rendering lists in React and why avoid using array index as key?

6. What is the useRef hook and how does it differ from useState?

7. What is the difference between useMemo and useCallback in React?

8. How does the Context API (createContext, useContext) eliminate prop drilling?

9. How does the new useActionState hook in React 19 handle form submissions and pending states?

10. How does useFormStatus allow child components to read parent form pending status in React 19?

11. How does the useOptimistic hook in React 19 render instant UI updates before server confirmation?

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

13. How does React.memo optimize re-rendering of functional components?

14. What is an Error Boundary in React and why must it be written as a Class Component?

15. What are React Fragments (<>...</>) and why are they preferable to container <div> tags?

16. What are the common patterns for conditional rendering in React (&&, ternary, early return)?

17. How does React SyntheticEvent system work and how does it normalize cross-browser events?

18. What is React StrictMode and why does it run effects and render functions twice in development?

19. What is a Custom Hook and what rules must custom hooks follow?

20. What is the Virtual DOM and why is it faster than direct DOM manipulation?

21. How does the children prop enable component composition and slot layouts?

22. Why must React render functions be pure and idempotent?

23. How does automatic batching work in React 18 and 19 across async operations?

24. When should you use flushSync to force immediate DOM updates?

25. What is a Higher-Order Component (HOC) and how does it compare to custom hooks?

26. What is the Render Props pattern in React?

27. What is dangerouslySetInnerHTML and how do you prevent XSS vulnerabilities?

28. Compare CSS Modules, Styled Components, and Tailwind CSS in React.

29. How does React 19 simplify ref handling by making ref a standard prop?

30. How do you use React DevTools Profiler to diagnose slow renders?

31. When should you use useReducer instead of useState for state management?

32. How does useImperativeHandle customize the instance value exposed to parent refs?

33. How do you optimize Context API to prevent widespread re-rendering?

34. How do you unit test custom React hooks using React Testing Library?

35. What causes React hydration mismatch errors and how do you fix them?

36. How does React Suspense work for asynchronous data fetching and fallback UIs?

37. How does useTransition keep the UI responsive during heavy state updates?

38. How does useDeferredValue defer re-rendering of non-critical UI parts?

39. What is useSyncExternalStore and why do Redux and Zustand rely on it?

40. What is the exact execution timing difference between useLayoutEffect and useEffect?

41. Why should you use TanStack Query (React Query) instead of useEffect for data fetching?

42. How do list virtualization libraries (TanStack Virtual) render massive datasets?

43. How does the Compound Components design pattern work in React?

44. What is state colocation and why is it the first step in React performance tuning?

45. How does Immer.js simplify immutable state updates in React and Redux?

46. Why do events from a React Portal bubble up to the React parent instead of the DOM parent?

47. What causes stale closures in React hooks and how do you resolve them?

48. How do you programmatically reset an Error Boundary when route or props change?

49. How does React 19 improve interoperability with custom Web Components?

50. How do you identify and fix memory leaks from unmounted React components?

51. How does the new React 19 use() API unwrap Promises and Contexts conditionally?

52. How do you build a custom useDebounce hook for search input optimization?

53. Why prefer @testing-library/user-event over fireEvent in React unit tests?

54. How does React verify component purity using double execution in development?

55. How do dynamic imports with React.lazy reduce initial Total Blocking Time (TBT)?

56. Why did TypeScript completely replace PropTypes for React component validation?

57. How do you announce dynamic React state changes to screen readers using ARIA live regions?

58. What is the difference between React Server Components (RSC) and Client Components in React 19?

59. How do React 19 Server Actions process server-side mutations from inline form actions?

60. How does the use() hook in React 19 replace useContext for conditional Context consumption?

61. How do React 19 resource loading APIs (preload, preinit, prefetchDNS) optimize page performance?

62. How does React 19 support native document metadata tags (<title>, <meta>, <link>) inside components?

63. How do Finite State Machines eliminate impossible UI states in React?

64. What is the Container/Presenter component pattern and why has it evolved?

65. What is the difference between Render Phase and Commit Phase in React rendering lifecycle?

66. Why are modern React teams transitioning from runtime CSS-in-JS to Zero-Runtime CSS solutions?

67. How do JavaScript Microtasks and Macrotasks interact with React state batching and rendering?

68. How do you handle complete form submissions using native FormData API without state overhead?

69. What is Declarative Programming in React and how does it contrast with Imperative DOM manipulation?

70. How does passing children as props prevent unnecessary re-renders of expensive child subtrees?

71. How does the React 19 Compiler (React Forget) automate memoization at build time?

72. What are critical security vulnerabilities in React Server Actions and how do you secure them?

73. How does the React Server Component wire format stream and reconstruct Virtual DOM over HTTP?

74. What is visual tearing in concurrent rendering and how does React prevent it?

75. How do you architect enterprise micro-frontends using React and Webpack/Vite Module Federation?

76. What are the 4 caching layers in Next.js App Router (RSC Payload, Router Cache, Data Cache, Full Route)?