React JS Interview Questions in Gurgaon

Show answer

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 accessibility audit says your signup form fails screen reader checks. What would you fix to make the form accessible?

Show answer

Link every input to a visible label using htmlFor and id (useId helps), use correct input types, and mark required fields. Show errors as text, connect them with aria-describedby and set aria-invalid on failing fields. Move focus to the first error on submit, keep everything keyboard operable and do not rely on colour alone. Use native button and form elements instead of clickable divs.

How do you handle async API calls with createAsyncThunk?

Show answer

createAsyncThunk creates pending, fulfilled and rejected actions around an async function, and you handle them in extraReducers. export const fetchOrders = createAsyncThunk('orders/fetch', async () => { const res = await fetch('/api/orders'); return res.json(); }); extraReducers: builder => { builder .addCase(fetchOrders.pending, s => { s.status = 'loading'; }) .addCase(fetchOrders.fulfilled, (s, a) => { s.status = 'idle'; s.list = a.payload; }) .addCase(fetchOrders.rejected, (s, a) => { s.status = 'failed'; s.error = a.error.message; }); }

Your Next.js build fails with 'ReferenceError: window is not defined'. Why, and how do you fix it?

Show answer

Code that touches browser globals runs during server rendering, where window and document do not exist. This often comes from a library that accesses window at import time or from reading localStorage in render. Fix it by moving browser access into useEffect or event handlers inside a Client Component, checking typeof window !== 'undefined', or loading the library with next/dynamic and ssr: false from a client component.

What does the 'use client' directive do?

Show answer

'use client' at the top of a file marks a boundary: that module and everything it imports become part of the client bundle and can use state, effects, event handlers and browser APIs. It does not mean the component is only rendered on the client; it is still pre-rendered to HTML on the server and then hydrated. Keep 'use client' as low in the tree as possible to send less JavaScript.

Tell me about a mistake you made that reached production and what you learned.

Performance OptimizationEasy

Show answer

Situation: I removed what looked like an unused prop in a shared Button component. Task: after release, the payment page's disabled state broke. Action: I owned it immediately, rolled back, then fixed it and added a test plus a TypeScript type so the prop could not be removed silently. Result: the issue was live for under an hour, and I now search all usages and rely on types before deleting code.

What is the main performance pitfall of React Context and how do you avoid it?

Show answer

Every component that reads a context re-renders when the provider value changes. If you pass a new object like value={{ user, setUser }} on each render, all consumers re-render even if nothing changed. Memoise the value with useMemo, split one big context into smaller ones (for example state and dispatch separately), and keep fast-changing data in a dedicated store like Zustand that supports selectors.

How do you fetch data in a Next.js App Router page?

Show answer

Make the page an async Server Component and await data directly. // app/products/[id]/page.tsx export default async function ProductPage({ params }) { const { id } = await params; const product = await getProduct(id); if (!product) notFound(); return ( <main> <h1>{product.name}</h1> <AddToCartButton id={id} /> </main> ); } AddToCartButton is a Client Component. In recent Next.js versions params is a promise.

How do environment variables work in a React or Next.js app?

Next.js and Advanced ReactEasy

Show answer

Values are read at build time from .env files. In Next.js, only variables prefixed with NEXT_PUBLIC_ are exposed to the browser; others stay on the server. In Vite, the prefix is VITE_ and you read import.meta.env.VITE_API_URL. Anything sent to the browser is public, so never put secrets like database passwords or private API keys in client-exposed variables. Keep .env files out of Git.

What is automatic batching in React 18 and later?

Show answer

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.

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?

Show answer

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.

What is useId and why not use Math.random for ids?

React HooksMedium

Show answer

useId generates a unique, stable id for a component instance that matches between server and client rendering. It is used for accessibility attributes, like linking a label's htmlFor to an input's id. Math.random or a global counter would produce different values on the server and the browser, causing hydration mismatches, and would change on every render. useId should not be used as list keys.

How do you find what is making a React page slow?

Performance OptimizationMedium

Show answer

Use the React DevTools Profiler: record an interaction, then check the flame chart for components with long render times and the reason each one re-rendered (enable 'record why each component rendered'). Pair it with the Chrome Performance panel for long tasks, layout and network. Enable highlight updates to spot unnecessary renders. Measure first, fix the biggest cost, then measure again in a production build.

How do you read and update query parameters like ?page=2&sort=price?

Routing and FormsEasy

Show answer

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.

Where should you store the logged-in user's auth token in a React app?

Show answer

The safest common choice is an httpOnly, Secure, SameSite cookie set by the server, because JavaScript cannot read it, which protects it from XSS theft. Keep only non-sensitive user info, such as name and role, in React state or context. If you must use tokens in JavaScript, keep the access token in memory, use short expiry and refresh tokens via cookies. Avoid localStorage for tokens.

What is the use() API introduced in React 19?

React HooksHard

Show answer

use is a React 19 API that reads the value of a promise or a context during render. With a promise, the component suspends until it resolves, showing the nearest Suspense fallback, and errors go to the nearest error boundary. Unlike other hooks, use can be called inside conditions and loops. Promises should come from a framework, cache or server component, not be created fresh on every render.

Tell me about a time you had to learn a new tool or library quickly.

Testing and DebuggingMedium

Show answer

Situation: our project needed to switch from Jest to Vitest with a week's notice. Task: migrate around 300 tests. Action: I read the official migration guide, migrated one folder first to discover patterns, wrote a codemod for jest.fn to vi.fn replacements and documented gotchas for the team. Result: we finished in four days, test runs became much faster, and the guide helped others with later work.

A junior notices that every child component re-renders when the parent's state changes, even when their props did not change. How do you explain this?

Props and StateMedium

Show answer

By default, when a component renders, React re-renders all of its children, because it cannot know whether they depend on something else. Re-rendering is usually cheap since only real changes reach the DOM. If a child is expensive, wrap it in React.memo and keep its props stable with useCallback or useMemo, or let the React Compiler memoise automatically. Moving state down also helps.

What is RTK Query?

Show answer

RTK Query is the data fetching and caching tool included in Redux Toolkit. You define an API with createApi and endpoints, and it auto-generates hooks like useGetProductsQuery and useAddProductMutation. It handles loading states, caching, deduplicating requests, refetching and cache invalidation through tags. It removes most hand-written thunks and reducers for server data in Redux-based apps.

What does useContext do?

React HooksEasy

Show answer

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.

Your React app works locally, but after deployment refreshing /dashboard gives a 404 from the server. Why, and how do you fix it?

Show answer

The server looks for a real file at /dashboard, which does not exist because routing happens in the browser. Configure the server to return index.html for all unknown paths: a rewrite rule in Nginx (try_files $uri /index.html), a _redirects or rewrites setting on static hosts, or a fallback in Express. Alternatively, use a framework with server routing. HashRouter also avoids it but gives ugly URLs.

All unit tests passed, but users found that the delete button did nothing. The tests were checking that a handleDelete function was called. What went wrong?

Testing and DebuggingMedium

Show answer

The tests checked implementation details instead of user-visible behaviour. A mocked handler being called says nothing about whether the item actually disappears or the API is hit. Rewrite the test to click the button by role, mock the API with MSW and assert the item is removed from the screen. Behaviour-focused tests survive refactoring and catch real bugs like a broken wiring.

Describe a time you found and fixed a bug reported by a real user.

Show answer

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.

How do you update objects and arrays in state without mutating them?

Props and StateEasy

Show answer

Always create new copies so React detects the change by reference. // object setUser(u => ({ ...u, city: 'Pune' })); // add to array setItems(list => [...list, newItem]); // remove setItems(list => list.filter(i => i.id !== id)); // update one item setItems(list => list.map(i => i.id === id ? { ...i, done: true } : i));

What is prop drilling and how can you avoid it?

Props and StateEasy

Show answer

Prop drilling is passing props through several layers of components that do not use them, only to reach a deeply nested child. It makes code noisy and hard to refactor. Solutions include component composition (passing JSX as children so intermediate layers do not need the data), the Context API for app-wide values like theme or user, and state libraries such as Zustand or Redux Toolkit for complex shared state.

During a security review you find a payment provider's secret key in the browser's JavaScript bundle. What do you do?

Show answer

Treat it as leaked: rotate the key immediately in the provider dashboard and check logs for misuse. Then fix the cause, usually the secret was in a public env variable such as NEXT_PUBLIC_ or VITE_, or imported into a client component. Move the call to a server route or Server Function that uses a server-only variable, add the server-only package to guard imports, and add secret scanning in CI.

A developer says the app is too slow, based on testing it with the development server. What do you tell them?

Performance OptimizationEasy

Show answer

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.

A timer using setInterval inside useEffect always shows 1 and never goes higher. What is the bug?

Props and StateHard

Show answer

The effect probably runs once with an empty dependency array and calls setCount(count + 1). The interval callback closes over the count from the first render, which is 0 forever, a stale closure. Fix it with the updater form setCount(c => c + 1), so the callback never needs the current value, and return a cleanup that calls clearInterval to avoid leaks.

What is the difference between controlled and uncontrolled components?

Props and StateEasy

Show answer

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.

On a profile edit page, when you switch from one user to another the form still shows the old user's typed values. How can you reset it cleanly?

Props and StateMedium

Show answer

React preserves state when the same component stays at the same position in the tree. Give the form a key tied to the user, like <ProfileForm key={user.id} user={user} />. When the key changes, React unmounts the old form and mounts a fresh one with new initial state. This is cleaner than writing an effect that manually resets every field when the user prop changes.

Your team has hundreds of snapshot tests that developers update blindly whenever they fail. What are the drawbacks of snapshot tests and what would you suggest?

Testing and DebuggingMedium

Show answer

A snapshot test saves the rendered output to a file and fails when future output differs. It is quick to write and catches unexpected changes. Drawbacks: large snapshots are hard to review, developers often blindly update them, and they fail on harmless markup changes while saying nothing about behaviour. Use small, focused inline snapshots for stable output, and prefer behaviour assertions for most component tests.

A developer writes key={Math.random()} to silence the missing key warning. What problem does this create?

Performance OptimizationMedium

Show answer

A new random key on every render tells React each item is brand new, so it unmounts and remounts every row each time. This destroys component state such as typed input and focus, re-runs effects and is very slow for large lists. Keys must be stable and unique, ideally an id from the data. If items have no id, generate ids once when the data is created.

What is list virtualisation?

Performance OptimizationMedium

Show answer

Virtualisation, or windowing, renders only the rows visible in the viewport plus a small buffer, instead of thousands of DOM nodes. As the user scrolls, rows are recycled with new data. Libraries such as TanStack Virtual and react-window implement it. It dramatically cuts render time and memory for long lists, chat histories and data grids, but needs care with variable row heights and browser find-in-page.

How do you create an error boundary in React?

Show answer

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.

Why must Redux reducers be pure functions?

State ManagementEasy

Show answer

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.

How do you upload a file with a preview in React?

E-commerce & consumer tech

Show answer

Use a file input, create a preview URL and send FormData. function AvatarUpload() { const [file, setFile] = useState(null); const preview = useMemo(() => file && URL.createObjectURL(file), [file]); useEffect(() => () => preview && URL.revokeObjectURL(preview), [preview]); async function upload() { const fd = new FormData(); fd.append('avatar', file); await fetch('/api/avatar', { method: 'POST', body: fd }); } return (<> <input type="file" accept="image/*" onChange={e => setFile(e.target.files[0])} /> {preview && <img src={preview} alt="preview" />} <button onClick={upload}>Upload</button> </>); }

Companies with offices in Gurgaon (7)

Zomato

React JS interview questions

30 questions
4 rounds

Gurugram

E-commerce & consumer tech

MakeMyTrip

React JS interview questions

30 questions
5 rounds

Gurugram, Bengaluru

Product

Microsoft

React JS interview questions

30 questions
5 rounds

Hyderabad, Bengaluru, Noida +2

Product

Amazon

React JS interview questions

30 questions
5 rounds

Bengaluru, Hyderabad, Chennai +2

Consulting

Publicis Sapient

React JS interview questions

30 questions
5 rounds

Gurugram, Noida, Bengaluru

Consulting

Thoughtworks

React JS interview questions

30 questions
5 rounds

Pune, Bengaluru, Chennai +2

Consulting

Accenture

React JS interview questions

30 questions
4 rounds

Bengaluru, Hyderabad, Pune +2