Top 30 React Interview Questions and Answers

Question 1

Why can a standard browser not execute a .jsx file directly without a build step?

Accepted Answer

JSX must first be transpiled into React.createElement or jsx function calls

Answer

JSX requires a special MIME type that browsers refuse to load

Answer

The browser only runs JSX when React is loaded from a CDN

Answer

Browsers strip out all custom XML attributes before parsing scripts

Question 2

How does Turbopack's Server Fast Refresh in Next.js 16.2 differ from the previous server-side reload behavior?

Accepted Answer

It reloads only the changed module and leaves the rest of the server process intact, rather than clearing the require.cache for the entire import chain.

Answer

It clears require.cache for changed files while preserving untouched node_modules, cutting overhead by about two-thirds.

Answer

It applies tree-shaking to dynamic imports during reload so that only used exports are invalidated instead of the full module graph.

Answer

It moves server compilation into Web Workers with corrected origins to isolate changes from the main Node.js process.

Question 3

What is the primary risk when React teams adopt TypeScript without standardized prop and hook typing patterns?

Accepted Answer

Code review slows due to style debates and type safety erodes from inconsistent patterns

Answer

StackBlitz and Gitpod environments fail to compile forwarded refs

Answer

ComponentProps forces manual re-declaration of all HTML element props

Answer

React's built-in type definitions become incompatible with custom hooks

Question 4

What is the fundamental nature of a React Component?

Accepted Answer

A JavaScript function that returns a description of UI using JSX.

Answer

A custom, reusable HTML tag that simplifies web page structure.

Answer

A class definition used to manage application-wide data and state.

Answer

A separate file that holds all the styling rules for a specific UI element.

Question 5

What happens when an AI agent tries to launch a second next dev process in Next.js 16.2?

Accepted Answer

Next.js emits a structured error that includes the exact kill command for the running process

Answer

The new process automatically terminates the existing dev server and claims the port

Answer

The agent is directed to consult the AGENTS.md file before proceeding

Answer

Browser errors are streamed to the terminal to warn the agent about the conflict

Question 6

What is the fundamental nature of JSX in a React application?

Accepted Answer

It is a syntax extension that a build tool converts into standard JavaScript function calls.

Answer

It allows developers to write raw HTML directly within JavaScript files for browser interpretation.

Answer

It is a new, standalone programming language for defining user interfaces.

Answer

It is a specialized string format that React parses directly into DOM elements.

Question 7

A child component needs to change a value it received from its parent. What is the correct React pattern?

Accepted Answer

Call a callback function passed down from the parent via props

Answer

Declare a local state variable with the same name to override the prop

Answer

Mutate the prop directly inside the child component

Answer

Use React's built-in two-way binding to sync the value automatically

Question 8

Which accurately describes the two primary ways to define a React component?

Accepted Answer

Function components and class components, with function components being the standard for new React 19 code

Answer

Arrow functions and function declarations, with arrow functions being the modern standard

Answer

Components defined with state and components defined without state, which dictates the syntax required

Answer

Class components and function components, but class components are deprecated and removed in React 19

Question 9

Which statement accurately describes a core principle of how React components should handle props?

Accepted Answer

Props facilitate a one-way data flow, allowing data to be passed from parent to child components.

Answer

A child component can directly modify the props it receives to update its UI.

Answer

Only primitive data types like strings and numbers can be passed as props to a component.

Answer

Props are primarily used for managing a component's internal state that changes over time.

Question 10

What is the main advantage of using a React Fragment (e.g., <>) over a

when a component needs to return multiple elements?

Accepted Answer

Fragments prevent the addition of an unnecessary wrapper DOM node, maintaining cleaner HTML structure.

Answer

Fragments ensure that the grouped elements are rendered as a single, valid HTML element in the DOM.

Answer

Fragments automatically attach event listeners to all child elements, simplifying interaction handling.

Answer

Fragments allow applying unique CSS classes to each child element more easily.

Question 11

When a dynamic list reorders and items have local state, what happens if array indices are used as React keys?

Accepted Answer

React reuses component instances by position, causing state from one data item to appear on another.

Answer

React requires keys to be globally unique, so duplicate indices across sibling lists cause errors.

Answer

React detects the reorder as a complete list replacement and resets all local state.

Answer

React cannot optimize rendering, so it re-renders the entire list instead of diffing efficiently.

Question 12

What is the immediate effect when a useState setter function, like setCount(count + 1), is invoked?

Accepted Answer

React schedules a re-render of the component with the new state value.

Answer

The count variable in the current component scope updates immediately.

Answer

The component's props are updated, triggering a re-render.

Answer

The component synchronously re-executes its function body.

Question 13

In React, when is an early return with if/else preferable to an inline ternary inside JSX?

Accepted Answer

When branches are large, structurally different, or to reduce nesting

Answer

When both branches are short UI elements inside the parent return statement

Answer

When conditionally including a single element without an else branch

Answer

When preventing unnecessary re-renders requires stopping execution before hooks

Question 14

Why would wrapping two table cells in a Fragment be preferable to wrapping them in a div?

Accepted Answer

Fragments avoid creating an invalid HTML structure since they do not add an extra DOM node.

Answer

Fragments allow you to assign a key prop using the empty tag shorthand syntax.

Answer

Fragments insert an invisible comment marker that helps React track sibling positions.

Answer

Fragments improve rendering performance by minimizing virtual DOM diffing overhead.

Question 15

What is the primary issue with using `onClick={myFunction()}` instead of `onClick={myFunction}` in a React component?

Accepted Answer

It executes `myFunction` immediately during the component's render phase, not when the user clicks.

Answer

It prevents React from optimizing event listener attachment, leading to performance degradation.

Answer

React's event system cannot correctly pass the event object to `myFunction` when called this way.

Answer

It causes a syntax error in JSX, preventing the component from rendering.

Question 16

What is the most comprehensive approach to accurately track page views in a Single Page Application (SPA)?

Accepted Answer

Implement both framework-specific router hooks for internal navigation and a window.popstate listener for browser back/forward actions.

Answer

Use a router hook (e.g., React's useEffect on location.pathname) to trigger a page view event when the URL changes.

Answer

Configure an analytics library to automatically track page views, as it inherently understands SPA routing mechanisms.

Answer

Attach an event listener to the window object for the popstate event to capture all URL changes initiated by the user.

Question 17

A team passes a user object through Layout, Header, Navigation, and finally to UserMenu. What is the strongest argument for replacing this with Context or composition?

Accepted Answer

Layout, Header, and Navigation are coupled to a prop they ignore, making refactors and reuse harder.

Answer

Each intermediary will re-render whenever the user object changes, wasting CPU cycles.

Answer

Props are inherently unsuitable for any data that travels more than two levels in the tree.

Answer

The user object creates a memory leak by being retained in every intermediary component's props.

Question 18

When using the logical AND operator (condition && <Component />) for conditional rendering in React, what is a crucial behavior to be aware of?

Accepted Answer

If 'condition' evaluates to 0, the number 0 might be displayed in the UI.

Answer

It can cause the component to re-render unnecessarily even when the condition is false.

Answer

It prevents the component from receiving props dynamically based on the condition.

Answer

It only works correctly if 'condition' is a boolean value.

Question 19

To reliably track navigation as 'page views' in a Single Page Application, what is the most appropriate client-side strategy?

Accepted Answer

Listen for `popstate` events and hook into the router's history object to detect navigation and send tracking events.

Answer

Place the analytics script in the main `index.html`; it will automatically fire on every route change within the SPA.

Answer

Use `setInterval` to periodically check `window.location.href` and send an analytics event if the URL has changed.

Answer

Attach `onClick` event listeners to all internal navigation links to manually trigger a page view event.

Question 20

Which call reflects how Babel transforms the JSX Go Home into React.createElement()?

Accepted Answer

React.createElement('a', {href: '/home', className: 'link'}, 'Go Home')

Answer

React.createElement('a', {href: '/home', className: 'link', children: 'Go Home'})

Answer

React.createElement(a, {href: '/home', className: 'link'}, 'Go Home')

Answer

React.createElement('a', {href: '/home', class: 'link'}, 'Go Home')

Question 21

When rendering a dynamic list, what problem does the key prop solve if items are later reordered or filtered?

Accepted Answer

It provides a stable identifier so React can distinguish individual elements as the collection changes

Answer

It forces React to re-render every list item whenever the parent updates

Answer

It passes the item's unique ID to the child component as a readable prop

Answer

It prevents React console warnings from appearing in development mode

Question 22

Why can using array indices as keys cause state pollution when a list is reordered?

Accepted Answer

React relies on keys to identify elements across renders; indices make React match DOM nodes to the wrong data, preserving state for the wrong item.

Answer

React uses keys purely to optimize diffing speed, so indices only slow down reconciliation without affecting which component state is attached to which DOM node.

Answer

React requires globally unique keys, so indices fail when multiple lists render and cause cross-component state leakage during reconciliation.

Answer

React interprets changed indices as new components, forcing a full remount of the list and resetting all state and focus on every update.

Question 23

Which of the following best describes the primary role of React's useEffect hook?

Accepted Answer

To synchronize the component with external systems like APIs or browser events.

Answer

To prevent unnecessary component re-renders and optimize performance.

Answer

To directly handle user interactions such as button clicks or form submissions.

Answer

To transform data received from props or state into a displayable format.

Question 24

What is the key architectural difference between passing a render function prop and passing a component reference prop in React?

Accepted Answer

A render function is called by the child with internal data, letting the parent control what renders while the child controls when and where.

Answer

A component reference can only receive primitive values as props, while a render function accepts any JavaScript object.

Answer

A component reference automatically receives shared state via Context, eliminating the need for prop drilling.

Answer

A render function wraps the component at definition time, behaving exactly like a Higher-Order Component.

Question 25

When decomposing a UI into React components, what is the most crucial principle to follow for effective design?

Accepted Answer

Adhering to the single responsibility principle, where each component does one thing.

Answer

Structuring components to directly mirror the backend API's data model.

Answer

Ensuring each component manages its own distinct piece of application state.

Answer

Grouping elements that share similar styling or visual characteristics.

Question 26

Which pattern correctly wires a text input as a controlled component using useState?

Accepted Answer

Initialize useState with an empty string at the top level, bind the input value to the state variable, and update it via onChange by calling the setter with event.target.value.

Answer

Declare the state variable with useState inside a useEffect hook so it runs after mount, bind value to the state, and mutate the variable directly in the onChange handler.

Answer

Call useState inside an if block to avoid unnecessary renders, set the input value to the state variable, and update it by assigning event.target.value directly to the state variable.

Answer

Initialize useState with null at the top level, leave the input uncontrolled by omitting the value attribute, and call the setter inside onChange to update the state.

Question 27

What happens to a useEffect's cleanup and setup when a value in its dependency array changes?

Accepted Answer

React runs the previous cleanup with old values first, then runs setup with the new values

Answer

React runs setup with the new values first, then runs the previous cleanup with old values

Answer

React checks if the dependency array itself is a new reference to decide whether to re-run

Answer

Cleanup only runs when the component unmounts, so only setup runs with the new values

Question 28

In a React component, for which scenario would using a ref be the most appropriate choice over state?

Accepted Answer

Holding an interval ID returned by setInterval that needs to be cleared later.

Answer

Storing a user's input that directly updates a displayed text field.

Answer

Storing a list of items that are rendered dynamically on the screen.

Answer

Managing a boolean flag that toggles the visibility of an element.

Question 29

You need to increment a React state variable three times within a single event handler. Which approach produces the correct final value?

Accepted Answer

Call setCount(prev => prev + 1) three times sequentially

Answer

Call setCount(count + 1) inside setTimeout callbacks to avoid automatic batching

Answer

Call setCount(count + 1) three times sequentially

Answer

Use useEffect to chain increments after each re-render

Question 30

When creating a WelcomeDialog component that uses a generic Dialog component to display a fixed title and message, which approach best exemplifies React's "favor composition" principle?

Accepted Answer

WelcomeDialog renders the Dialog component internally, passing it specific title and message props.

Answer

A Higher-Order Component (HOC) wraps Dialog to inject the fixed title and message props for WelcomeDialog.

Answer

WelcomeDialog extends the Dialog class component and overrides its default title and message properties.

Answer

WelcomeDialog uses React's Context API to provide the fixed title and message to the Dialog component.