React Fundamentals Interview Questions for React JS
25 React Fundamentals questions with answers for react js roles — 13 easy, 11 medium, 1 hard.
About React Fundamentals
Start with how React thinks: JSX, function components, the Virtual DOM and reconciliation, keys in lists, fragments, conditional rendering and one-way data flow. You will also learn patterns like composition, error boundaries and portals, and how to set up a modern project with Vite instead of the deprecated Create React App.
Sheet progressStart practicing
3 QUESTIONS FREESign up to unlock the full question bank and track your progress.Unlock every question and answer, then continue practising company-wise and package-wise.
✓ 3 questions free • Unlock the rest in seconds
01
What is React and why is it so widely used for building web interfaces?
React is an open-source JavaScript library for building user interfaces from reusable components. You describe what the UI should look like for a given state and React updates the DOM efficiently when that state changes. It is popular because of its component model, huge ecosystem, strong job market, React Native for mobile, and frameworks like Next.js that add routing and server rendering on top.
02
What is JSX and how does the browser understand it?
JSX is a syntax extension that lets you write HTML-like markup inside JavaScript. Browsers cannot run JSX directly, so a compiler such as Babel, SWC or esbuild (used by Vite) transforms it into calls like jsx('div', props) from react/jsx-runtime. JSX is just expressions, so you can embed values with curly braces, but attributes use camelCase names like className and onClick.
03
Explain the Virtual DOM and reconciliation in React.
The Virtual DOM is a lightweight JavaScript tree describing the UI. When state changes, React renders a new tree, compares it with the previous one (reconciliation, or diffing) and applies only the minimal real DOM changes. It assumes elements of different types produce different trees and uses keys to match list items, which makes the diff roughly linear instead of very expensive full tree comparison.
04
What is the difference between functional components and class components?
Class components extend React.Component, use this.state and lifecycle methods like componentDidMount. Functional components are plain functions that return JSX and use hooks such as useState and useEffect for state and side effects. Modern React code is written almost entirely with functional components because they are shorter, easier to test and reuse logic through custom hooks. Class components are still needed only for error boundaries.
05
What are keys in React lists and why are they required?
A key is a stable, unique identifier given to each element in a list so React can tell which items were added, removed or moved between renders. Without good keys React may reuse the wrong DOM nodes or component state. Use an id from your data, for example key={user.id}. Keys only need to be unique among siblings, not across the whole app.
06
How do you return multiple elements from a component without adding an extra div?
Use a Fragment. The short syntax <>...</> groups children without adding a DOM node. Use the long form when you need a key, for example inside a map.
function Row({ item }) {
return (
<>
<td>{item.name}</td>
<td>{item.price}</td>
</>
);
}
items.map(i => <React.Fragment key={i.id}>...</React.Fragment>)
07
Show the common ways to do conditional rendering in React.
You can use if statements before return, the ternary operator, or logical AND. Be careful with && and numbers, because 0 is rendered.
function Status({ user, count }) {
if (!user) return <Login />;
return (
<div>
{user.isAdmin ? <AdminPanel /> : <Dashboard />}
{count > 0 && <Badge count={count} />}
</div>
);
}
Data in React flows down from parent to child through props. A child cannot directly change its parent's data; instead the parent passes a callback function, and the child calls it to request a change. This makes the app predictable because you can trace where every value comes from. Two-way binding, as in some other frameworks, is done manually with value and onChange.
09
Your manager asks you to set up a new React project in 2026 and suggests Create React App. What would you recommend?
The React team deprecated Create React App in 2025. For a single-page app, use Vite (npm create vite@latest, choose React with TypeScript), which gives very fast dev server and builds. For full-stack apps with routing, SSR and server components, the React docs recommend a framework such as Next.js or React Router in framework mode. Choose based on whether you need server rendering and SEO.
10
You import a component and get the error 'Element type is invalid: expected a string or a class/function but got undefined'. How do you debug it?
This almost always means the import does not match the export. If the file uses export default Header, import it as import Header from './Header'. If it uses export function Header, import it as import { Header } from './Header'. Also check the file path, circular imports and that the component name starts with a capital letter. Logging the imported value quickly confirms it is undefined.
11
Write a simple counter component with increment, decrement and reset buttons.
A counter is the classic useState example. Use the functional updater so each click works on the latest value.
import { useState } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<h2>{count}</h2>
<button onClick={() => setCount(c => c + 1)}>+</button>
<button onClick={() => setCount(c => c - 1)}>-</button>
<button onClick={() => setCount(0)}>Reset</button>
</div>
);
}
12
Tell me about a React project you built and the hardest problem you solved in it.
Situation: in my final year I built a hostel complaint portal with React, Vite and a Node API. Task: the complaint list became slow and buggy when filters changed. Action: I found I was storing filtered data in state and syncing it with effects, so I derived it during render with useMemo and fixed missing keys. Result: bugs disappeared, the page felt instant, and I learned to keep state minimal.
13
React changes fast. How do you keep your skills current?
I follow the official react.dev blog and docs, read release notes for React, Next.js and the libraries we use, and try new features in a small side project before using them at work. For example, when React 19 introduced Actions and useOptimistic, I rebuilt a form in my practice app first, noted pitfalls, and then shared a short demo with my team before we adopted it.
14
Your team uses the array index as key in a todo list and users report that checkboxes get ticked on the wrong item after deleting a row. What is happening?
When an item is deleted, every later item shifts to a new index, so React matches old state and DOM nodes to the wrong items. Uncontrolled inputs and component state stay attached to the index, not the data. The fix is to use a stable unique id from the data as the key. Index keys are only safe for static lists that never reorder, filter or delete.
15
What changed with createRoot in React 18 and later compared to ReactDOM.render?
createRoot from react-dom/client replaces the legacy ReactDOM.render, which was removed in React 19. createRoot enables the concurrent renderer, automatic batching of all updates, and features like useTransition and Suspense for data. You call const root = createRoot(document.getElementById('root')) and then root.render(<App />). For server-rendered HTML you use hydrateRoot instead.
React wraps native browser events in a SyntheticEvent object that has the same interface (preventDefault, stopPropagation, target) across browsers. Since React 17, listeners are attached to the root container instead of document, which makes it safer to mix multiple React versions. Event pooling was removed, so you can read event properties asynchronously. Handlers are passed as functions, like onClick={handleClick}.
17
In development your API call inside useEffect fires twice, but only once in production. Why does this happen, and what does StrictMode do?
StrictMode is a development-only wrapper that helps find bugs. It renders components twice to catch impure rendering, and mounts, unmounts and remounts components to check that effects clean up properly. This is why a fetch in useEffect may appear to fire twice locally. It does not happen in production. The fix is to write proper cleanup, not to remove StrictMode.
18
Why does React prefer composition over inheritance?
React reuses UI by combining components, not by extending classes. You pass components or JSX as props or children, so a generic Card or Modal can wrap any content. Specialisation is done by configuring a general component with props, like <Button variant='danger'>. The React team found no use cases where inheritance hierarchies were better, and composition keeps components flexible and loosely coupled.
19
What is a Higher-Order Component and is it still used?
A Higher-Order Component is a function that takes a component and returns a new component with extra behaviour, for example withAuth(Profile) that redirects unauthenticated users. HOCs were common for sharing logic like routing or Redux connect. Today custom hooks are preferred because they avoid wrapper nesting, prop name collisions and confusing component trees. You will still see HOCs in older codebases.
Render props means passing a function as a prop that the component calls to decide what to render, for example <MouseTracker render={pos => <Cursor pos={pos} />} />. It lets a component share its state or behaviour while the caller controls the UI. Like HOCs, it has mostly been replaced by custom hooks, but libraries for forms and virtualised lists still expose render-prop or children-as-function APIs.
An error boundary catches errors thrown while rendering its children and shows a fallback UI. It must be a class component (or use the react-error-boundary package).
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError() {
return { hasError: true };
}
componentDidCatch(error, info) {
logError(error, info.componentStack);
}
render() {
return this.state.hasError ? <p>Something went wrong</p> : this.props.children;
}
}
It does not catch errors in event handlers or async code.
A portal renders children into a DOM node outside the parent component's DOM hierarchy while keeping them in the same React tree, so context and event bubbling still work.
import { createPortal } from 'react-dom';
function Modal({ children }) {
return createPortal(
<div className="modal">{children}</div>,
document.getElementById('modal-root')
);
}
They are used for modals, tooltips and dropdowns that must escape overflow hidden or z-index issues.
23
A user types into an input inside a list row, then sorts the list, and the typed text appears in a different row. How would you fix this?
The rows are probably keyed by index or by a value that changes after sorting, so React keeps the DOM input in the same position while the data moves. Give each row a stable key from the data, such as the record id. Better still, make the input controlled and store its value in state keyed by id, so the text always follows the correct record.
Batching means React groups several state updates into one re-render. Before React 18 this only happened inside React event handlers. With createRoot, updates inside promises, setTimeout and native event handlers are also batched automatically. This reduces unnecessary renders. If you truly need a synchronous DOM update in between, you can use flushSync from react-dom, but that is rarely needed.
Fiber is the reconciliation engine introduced in React 16. It represents each component as a unit of work (a fiber node) so rendering can be split into chunks, paused, prioritised and resumed. This makes concurrent features possible: urgent updates like typing can interrupt less urgent renders. Rendering happens in an interruptible render phase, then changes are applied in a synchronous commit phase.
Frequently asked questions
How important is React Fundamentals in React JS interviews?
Start with how React thinks: JSX, function components, the Virtual DOM and reconciliation, keys in lists, fragments, conditional rendering and one-way data flow. You will also learn patterns like composition, error boundaries and portals, and how to set up a modern project with Vite instead of the deprecated Create React App.
How should I use the React Fundamentals sheet?
Go top to bottom — easy to hard. Answer before opening each answer, tick what you solved and save misses to Last-Minute Revision.