40 questions with answers for candidates with Freshers — 32 easy, 8 medium.
What interviewers expect: freshers
Fresher interviews focus on JavaScript fundamentals and core React: JSX, components, props versus state, keys, useState and useEffect, controlled forms and basic routing. Expect a simple live coding task such as a counter, todo list or API-driven list, plus questions about your college or training projects. Interviewers check whether you understand why things work, not only syntax.
This set is weighted towards Props and State (8), React Fundamentals (7), Routing and Forms (6), State Management (6).
JavaScript ES6 and async basics Props, state and keys useState and useEffect One well-explained project
Solved at this levelStart 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
An orders table renders 10,000 rows and the page freezes on load and scroll. What would you do?
First question whether users need all rows at once: server-side pagination or infinite scroll with cursor-based loading may solve it. If a long scrollable list is required, virtualise it with TanStack Virtual so only around 30 rows exist in the DOM. Also memoise row components, avoid heavy formatting in render by precomputing, and move sorting or filtering off the main thread if it is expensive.
02
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.
Lifting state up means moving shared state to the closest common parent of the components that need it. The parent holds the state and passes the value and a setter callback down as props. For example, a temperature input and a converter display both read from state kept in their parent. This keeps a single source of truth instead of two components trying to stay in sync.
04
Write a test for a counter component that increments on click.
This is redundant derived state. It causes an extra render and risks the values going out of sync. Compute it during render instead: const fullName = firstName + ' ' + lastName. If the calculation is expensive, wrap it in useMemo. As a rule, if a value can be calculated from existing props or state, do not store it in state and do not sync it with an effect.
06
Jest or Vitest: what is the difference for React projects?
Both are test runners with a similar API (describe, it, expect, mocks). Jest is the long-established choice and still common in older projects. Vitest is built on Vite, reuses the same config and transforms, supports ESM and TypeScript natively and is much faster in watch mode, so it is the default for new Vite-based React apps. React Testing Library works with either.
07
Show a basic React Router setup with a home page, a product page and a 404 page.
No. Props are read-only, and a component must behave like a pure function with respect to its props. Mutating a prop object would not trigger a re-render and would cause confusing bugs in the parent. If a child needs to change something, the parent should own that state and pass down a callback such as onChange, which the child calls with the new value.
09
How do you read a dynamic URL parameter like a product id?
Define the segment with a colon and read it with useParams.
// route: <Route path="/products/:id" element={<Product />} />
import { useParams } from 'react-router';
function Product() {
const { id } = useParams();
const { data } = useQuery({
queryKey: ['product', id],
queryFn: () => getProduct(id)
});
return <h1>{data?.name}</h1>;
}
Params are always strings, so convert with Number(id) if needed.
10
How do you set up a Redux store and use it in components?
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.
12
A developer says the app is too slow, based on testing it with the development server. What do you tell them?
The development build includes extra warnings, StrictMode double rendering, checks and unminified code, so it is much slower and can mislead you. Production builds created with npm run build are minified, tree-shaken and optimised. Test performance on the production build, ideally on a mid-range Android phone with throttled network, because many Indian users browse on such devices and slower connections.
13
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.
14
How do you update objects and arrays in state without mutating them?
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>)
16
How do you implement code splitting with React.lazy and Suspense?
Load a component only when it is needed with a dynamic import.
import { lazy, Suspense } from 'react';
const Reports = lazy(() => import('./Reports'));
function App() {
return (
<Suspense fallback={<Spinner />}>
{showReports && <Reports />}
</Suspense>
);
}
The bundler creates a separate chunk for Reports, reducing the initial JavaScript download.
17
What is the difference between BrowserRouter and HashRouter?
BrowserRouter uses clean URLs like /products/5 with the HTML5 History API, but the server must be configured to serve index.html for every route. HashRouter puts the route after a hash, like /#/products/5; the server never sees the hash part, so it works on any static host without configuration. BrowserRouter is preferred for SEO and clean URLs; HashRouter suits simple static hosting or embedded apps.
18
What is the difference between controlled and uncontrolled components?
In a controlled component, the form value lives in React state and the input gets value and onChange props, so React is the single source of truth. In an uncontrolled component the DOM keeps the value and you read it with a ref or FormData when needed. Controlled inputs make validation and conditional UI easy; uncontrolled inputs are simpler and can perform better for large forms.
Redux keeps global state in a single store. The UI dispatches actions, which are plain objects describing what happened, like { type: 'cart/added', payload }. Reducers are pure functions that take the current state and an action and return new state. Components read state with selectors. This strict one-way flow makes state changes predictable, traceable in DevTools and easy to test.
20
What is the difference between useMemo and useCallback?
useMemo caches the result of a calculation between renders, like a filtered list: useMemo(() => filter(items, q), [items, q]). useCallback caches a function definition itself: useCallback(fn, deps), which equals useMemo(() => fn, deps). Both are performance tools, useful when passing values to React.memo children or effect dependencies. With the React Compiler enabled, much of this manual memoisation becomes unnecessary.
21
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.
I enjoy building things people use directly, and React lets me turn designs into fast, interactive screens. During my training I built three projects with React, TypeScript and APIs, and I liked how components make code reusable. React also has strong demand across startups and service companies in India, a large community and paths into Next.js and React Native, so I see long-term growth in this role.
23
What is atomic state management, as in Jotai or Recoil-style libraries?
Atomic state splits state into small independent units called atoms. Components subscribe to only the atoms they use, and derived atoms compute values from others, similar to a spreadsheet. This gives fine-grained re-renders without selectors or a big central store. Jotai is the popular option today; Recoil is no longer maintained. It suits apps with many independent pieces of interactive state.
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.
25
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.
useContext reads the current value of a context created with createContext. React finds the nearest matching Provider above the component and returns its value; if none exists, it returns the default value. Whenever the provider value changes, every component using that context re-renders. In React 19 you can render <ThemeContext value={theme}> directly instead of ThemeContext.Provider, and use(ThemeContext) also works.
Props are inputs passed from a parent component and are read-only inside the child. State is data owned and managed by the component itself with useState or useReducer, and changing it triggers a re-render. A simple rule: if a value comes from outside and the component does not change it, it is a prop; if it changes over time due to user action or data loading, it is state.
28
A teammate writes user.name = 'Ravi' inside a click handler and the screen does not update. Why?
React decides to re-render when you call the state setter with a new value. Mutating the existing object does not call the setter, and even if you call setUser(user) with the same mutated object, React compares by reference with Object.is, sees no change and may skip rendering. Always create a new object, like setUser({ ...user, name: 'Ravi' }).
Install the Redux DevTools browser extension; configureStore enables it automatically in development. You can see every dispatched action, the state before and after, the diff, and jump back in time to earlier states. Check whether the expected action was dispatched, whether its payload is correct and whether the reducer updated the right slice. For selectors, log their output or use the React DevTools profiler.
useRef returns a mutable object { current } that persists across renders without causing a re-render when changed. It has two main uses: holding a reference to a DOM node, for example to focus an input, and storing mutable values like timer ids, previous values or flags that should not trigger rendering. Do not read or write ref.current during rendering, except for lazy initialisation.
A pure reducer returns new state based only on its inputs and has no side effects: no API calls, no random values, no mutation of arguments. This makes state changes predictable, testable and replayable, which is what enables time-travel debugging in Redux DevTools. Side effects belong in thunks, listeners or RTK Query. Redux Toolkit uses Immer, so draft mutations inside createSlice are still safe.
32
How do you set SEO metadata in a Next.js App Router page?
Export a metadata object or a generateMetadata function from a page or layout.
export async function generateMetadata({ params }) {
const { slug } = await params;
const post = await getPost(slug);
return {
title: post.title,
description: post.summary,
alternates: { canonical: `/blog/${slug}` },
openGraph: { title: post.title, images: [post.cover] }
};
}
Next.js renders the tags in the head during server rendering.
33
Describe a time you found and fixed a bug reported by a real user.
Situation: customers reported that the address form sometimes submitted an empty PIN code. Task: find the root cause quickly. Action: I reproduced it with browser autofill, which changed the DOM value without firing our onChange in a custom input. I switched to a native controlled input, added a schema check before submit and wrote a regression test. Result: the issue stopped and support tickets dropped.
34
How do you read and update query parameters like ?page=2&sort=price?
Use useSearchParams, which works like useState for the query string.
import { useSearchParams } from 'react-router';
function ProductList() {
const [params, setParams] = useSearchParams();
const page = Number(params.get('page') ?? 1);
const sort = params.get('sort') ?? 'popular';
const next = () => setParams({ page: String(page + 1), sort });
return <Pagination page={page} onNext={next} />;
}
Keeping filters in the URL makes them shareable and bookmarkable.
35
What is the guiding philosophy of React Testing Library?
React Testing Library encourages testing components the way users use them, not their internal implementation. You find elements by role, label or text, interact with them through user events and assert what appears on screen. You avoid checking state variables or component instances. Its motto is that the more your tests resemble the way your software is used, the more confidence they give you, and refactors do not break them.
Flux is the unidirectional data flow pattern that inspired Redux. Actions describe events, a dispatcher sends them to stores, stores update data and notify views, and views render and trigger new actions. Data never flows backward directly. Redux simplified Flux into a single store with pure reducers. Understanding Flux explains why React state management favours one-way flow over two-way binding.
37
How does the dependency array of useEffect control when the effect runs?
With no array, the effect runs after every render. With an empty array [], it runs once after the first mount (and twice in development StrictMode to test cleanup). With values like [userId], it runs after mount and again whenever any listed value changes, compared using Object.is. Every reactive value the effect reads, such as props and state, should be included in the array.
38
How do you respond when a senior developer leaves many comments on your pull request?
Situation: my first big PR received over twenty review comments. Task: address them and learn, not feel defensive. Action: I thanked the reviewer, fixed clear issues, asked questions on ones I did not understand and explained my reasoning politely on two where I had context. Result: the PR merged after one more round, and I created a personal checklist that reduced comments on later PRs.
39
How do you give default values to props in a function component?
Use JavaScript default parameters while destructuring props. defaultProps for function components was removed in React 19, so this is the standard way.
function Button({ label = 'Submit', variant = 'primary', onClick }) {
return (
<button className={`btn btn-${variant}`} onClick={onClick}>
{label}
</button>
);
}
40
What is client-side routing and how does React Router provide it?
In client-side routing, the browser loads one HTML page and JavaScript swaps components when the URL changes, without a full page reload. React Router uses the History API to listen to URL changes, matches the path against your route definitions and renders the matching component. Navigation feels instant, state can be kept between pages and only data needs to be fetched from the server.
Frequently asked questions
What is asked in React JS interviews for Freshers?
Fresher interviews focus on JavaScript fundamentals and core React: JSX, components, props versus state, keys, useState and useEffect, controlled forms and basic routing. Expect a simple live coding task such as a counter, todo list or API-driven list, plus questions about your college or training projects. Interviewers check whether you understand why things work, not only syntax.
How many questions should I practise before a React JS interview?
Work through all 40 questions here, then the company-wise sets for the employers you are targeting. Quality matters more than count: be able to explain why each answer is right.
Which topics matter most for Freshers?
Focus first on JavaScript ES6 and async basics, Props, state and keys, useState and useEffect, One well-explained project.