Skip to content
React JS
All coursesPlacement Report
‹ Back to previous sectionCourse homeAll page URLs

React JS Interview Questions in Pune

36 practice questions with answers for React JS interviews in Pune.

React JS jobs in Pune

Pune combines IT-services campuses in Hinjewadi and Kharadi with product, automotive and BFSI technology centres. It has a large mid-level job market for data and QA roles, and interviews are often practical and project-based.

Below are 36 questions that match the mix of service, product and domain employers hiring react developers in Pune.

Solved for PuneStart 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 the React Compiler?

Performance OptimizationMedium
Save to ▾
Show answer
The React Compiler, released as stable version 1.0 in late 2025, is a build-time tool (Babel plugin, also integrated in Vite and Next.js setups) that automatically memoises components and values. It analyses your code and inserts caching similar to useMemo, useCallback and React.memo, so developers write plain code. It requires following the rules of React, such as pure rendering, and can be adopted gradually per directory.
02

How do you lazy load route components to reduce the initial bundle?

Routing and FormsMedium
Save to ▾
Show answer
Use React.lazy with dynamic import and wrap routes in Suspense, so each page becomes a separate chunk downloaded only when visited. In React Router data mode you can also use the route's lazy property to load the component and loader together. This greatly reduces the first load size for big apps like admin panels. Show a lightweight fallback, such as a skeleton, while chunks load.
03

How do you handle async API calls with createAsyncThunk?

State ManagementMedium
Save to ▾
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; }); }
04

Why does React prefer composition over inheritance?

React FundamentalsMedium
Save to ▾
Show answer
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.
05

After adding an AuthContext at the root, profiling shows the whole app re-rendering every few seconds. What would you check?

State ManagementHard
Save to ▾
Show answer
Check what the provider value is and what updates it. Likely the value is a new object each render, or it includes fast-changing data such as a token refresh timer or a clock. Memoise the value with useMemo, move frequently changing data out of the context, and split it into separate contexts, so components reading only the user do not re-render when unrelated fields change.
06

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

State ManagementMedium
Save to ▾
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.
07

What is tree shaking?

Performance OptimizationMedium
Save to ▾
Show answer
Tree shaking is dead code elimination done by bundlers like Rollup (used by Vite), esbuild and webpack. They analyse ES module import and export statements and drop exports that are never used. It works only with static ESM syntax, not CommonJS require, and can be blocked by modules with side effects. Importing import { debounce } from 'lodash-es' instead of the whole lodash library keeps the bundle small.
08

How do you optimise images in a React app?

Performance OptimizationEasy
Save to ▾
Show answer
Serve modern formats like WebP or AVIF, resize images to their display size and use srcset with sizes for responsive images. Add loading="lazy" for images below the fold and fetchpriority="high" for the main hero image. Always set width and height or aspect-ratio to prevent layout shift. In Next.js, the next/image component automates resizing, formats and lazy loading.
09

A test in CI fails randomly about one time in ten. How do you handle a flaky test?

Testing and DebuggingHard
Save to ▾
Show answer
First reproduce it by running the test repeatedly and in random order. Common causes are shared state between tests, missing awaits, real timers or dates, network calls not mocked and tests depending on execution order. Fix the root cause: reset mocks and stores in afterEach, use findBy or waitFor instead of fixed sleeps, freeze time with fake timers. Quarantine it with a ticket only temporarily, never ignore it.
10

Why use Link instead of a normal anchor tag in a React app?

Routing and FormsEasy
Save to ▾
Show answer
A normal <a href> causes a full page reload, which throws away all React state and re-downloads the app. <Link to="/cart"> intercepts the click, updates the URL with the History API and lets the router render the new route instantly. It still renders a real anchor, so accessibility, middle-click and right-click open in new tab work. NavLink adds active styling for menus.
11

When would you add end-to-end tests with Playwright or Cypress?

Testing and DebuggingMedium
Save to ▾
Show answer
Add E2E tests for critical business flows that cross many components and the backend, such as signup, login, search, add to cart and payment. They run in real browsers and catch integration issues unit tests miss. They are slower and more brittle, so keep them few and focused, use stable selectors like roles or data-testid, seed test data and run them in CI on every pull request.
12

What does the 'use client' directive do?

Next.js and Advanced ReactMedium
Save to ▾
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.
13

How do you include accessibility checks in your React tests?

Testing and DebuggingMedium
Save to ▾
Show answer
Use jest-axe or vitest-axe to run axe-core on rendered components. import { axe } from 'vitest-axe'; test('form has no a11y violations', async () => { const { container } = render(<SignupForm />); expect(await axe(container)).toHaveNoViolations(); }); Also query by role and label in tests, run Lighthouse or axe DevTools in the browser, and test keyboard navigation manually, since automated tools catch only part of the issues.
14

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

Next.js and Advanced ReactMedium
Save to ▾
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.
15

Show how to fetch data with TanStack Query.

State ManagementMedium
Save to ▾
Show answer
TanStack Query caches by query key and handles loading, errors, retries and background refetching. const queryClient = new QueryClient(); // wrap app: <QueryClientProvider client={queryClient}> function Orders({ userId }) { const { data, isPending, error } = useQuery({ queryKey: ['orders', userId], queryFn: () => fetch(`/api/users/${userId}/orders`).then(r => r.json()), staleTime: 60_000 }); if (isPending) return <Spinner />; if (error) return <p>Error</p>; return <OrderList orders={data} />; }
16

How do form Actions work in React 19?

Routing and FormsMedium
Save to ▾
Show answer
In React 19 you can pass a function to a form's action prop: <form action={saveAddress}>. React calls it with the FormData when the form submits, runs it inside a transition, tracks pending state and resets uncontrolled fields after success. Combined with useActionState for results and useFormStatus for button state, this removes manual onSubmit, preventDefault and loading flags. In Next.js the action can be a Server Function.
17

What is an effect cleanup function and why is it important?

React HooksMedium
Save to ▾
Show answer
The function you return from useEffect is the cleanup. React runs it before the effect runs again and when the component unmounts. Use it to clear timers, remove event listeners, close WebSocket connections, unsubscribe from stores or abort fetch requests. Without cleanup you get memory leaks, duplicate listeners and state updates on components that are no longer on the screen.
18

A developer stores fullName in state and updates it in a useEffect whenever firstName or lastName changes. What would you suggest?

Props and StateMedium
Save to ▾
Show answer
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.
19

Typing in a search box feels laggy because a big product list is filtered on every keystroke. How do you fix it?

Performance OptimizationHard
Save to ▾
Show answer
Keep the input state urgent and make the expensive part deferred. Use const deferredQuery = useDeferredValue(query) and filter with deferredQuery inside useMemo, and wrap the list in React.memo. The input updates instantly while React renders the list in the background and can interrupt it. If filtering is still heavy, debounce it, move it to a Web Worker or filter on the server.
20

What is the difference between props and state?

Props and StateEasy
Save to ▾
Show answer
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.
21

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
Save to ▾
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.
22

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

Next.js and Advanced ReactMedium
Save to ▾
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.
23

What is prop drilling and how can you avoid it?

Props and StateEasy
Save to ▾
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.
24

Show a login form using React Hook Form with Zod validation.

Routing and FormsMedium
Save to ▾
Show answer
Define a schema and pass it through zodResolver. const schema = z.object({ email: z.string().email('Invalid email'), password: z.string().min(8, 'Min 8 characters') }); function Login() { const { register, handleSubmit, formState: { errors, isSubmitting } } = useForm({ resolver: zodResolver(schema) }); return ( <form onSubmit={handleSubmit(data => login(data))}> <input {...register('email')} /> {errors.email && <p>{errors.email.message}</p>} <input type="password" {...register('password')} /> <button disabled={isSubmitting}>Login</button> </form> ); }
25

What is React and why is it so widely used for building web interfaces?

React FundamentalsEasy
Save to ▾
Show answer
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.
26

Tell me about a time you pushed back on adding a new library to the project.

State ManagementMedium
Save to ▾
Show answer
Situation: a teammate proposed adding Redux to a small admin app. Task: decide whether it was worth the added complexity. Action: I listed our actual shared state, which was just the user and a few filters, and showed a prototype using TanStack Query for API data and one small context. Result: we shipped faster with less code, and agreed to revisit if requirements grew.
27

In development your API call inside useEffect fires twice, but only once in production. Why does this happen, and what does StrictMode do?

React FundamentalsMedium
Save to ▾
Show answer
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.
28

Why is React Hook Form popular?

Routing and FormsMedium
Save to ▾
Show answer
React Hook Form registers inputs as uncontrolled by default and reads values through refs, so typing does not re-render the whole form. This makes large forms fast. It provides validation, error messages, field arrays for dynamic rows, and integrates with Zod or Yup through resolvers. It has a small bundle and works with UI libraries through a Controller component for custom controlled inputs.
29

How do you add multiple languages to a React app?

Next.js and Advanced ReactMedium
Save to ▾
Show answer
Use an i18n library such as react-i18next or, in Next.js, next-intl. Store translations in JSON files per locale, reference keys like t('cart.title') instead of hard-coded text, and handle plurals, dates, numbers and currency with Intl APIs. Put the locale in the URL, like /hi/products, for SEO and shareable links. For Indian audiences, check fonts for Devanagari and other scripts and test longer translated text.
30

What are the risks of spreading all props like <Input {...props} />?

Props and StateMedium
Save to ▾
Show answer
Spreading is convenient for wrapper components, but it can pass unknown attributes to DOM elements, causing console warnings, and it hides what the component actually accepts. It can also override props you set explicitly, depending on order. Prefer destructuring the props you use and spreading only the rest onto the underlying element, for example const { label, ...inputProps } = props.
31

An orders table renders 10,000 rows and the page freezes on load and scroll. What would you do?

Performance OptimizationMedium
Save to ▾
Show answer
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.
32

What is the difference between the App Router and the Pages Router in Next.js?

Next.js and Advanced ReactMedium
Save to ▾
Show answer
The Pages Router uses the pages directory with getServerSideProps and getStaticProps for data. The App Router, the recommended default, uses the app directory with nested layouts, React Server Components by default, streaming with loading.js, error.js boundaries and Server Functions. Data is fetched directly in async server components. Many older projects still use Pages Router, and both can coexist during migration.
33

Describe how you led a large frontend migration.

Next.js and Advanced ReactHard
Save to ▾
Show answer
Situation: our app ran on an unmaintained Create React App setup with slow builds. Task: move to Vite without stopping feature work. Action: I wrote a migration plan, fixed incompatible imports and env variables in a branch, ran both builds in CI for a week, and trained the team on differences. Result: we switched over a weekend, local start time went from over a minute to a few seconds, and nothing broke for users.
34

How do you type props for a component in TypeScript?

Props and StateMedium
Save to ▾
Show answer
Define a type or interface and annotate the destructured props. type ProductCardProps = { title: string; price: number; tags?: string[]; onAdd: (id: string) => void; children?: React.ReactNode; }; function ProductCard({ title, price, tags = [], onAdd, children }: ProductCardProps) { return <div onClick={() => onAdd(title)}>{title} - Rs {price}{children}</div>; }
35

What is atomic state management, as in Jotai or Recoil-style libraries?

State ManagementMedium
Save to ▾
Show answer
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.
36

Five components on one page each fetch the same user profile, causing duplicate API calls. How would you fix this?

State ManagementMedium
Save to ▾
Show answer
Lift the data fetching into a shared cache instead of each component fetching on its own. With TanStack Query or RTK Query, all components using the same query key share one request and one cached result, and get updates together. Alternatively, fetch once in a parent or route loader and pass data down. This also removes inconsistent loading spinners across the page.

Companies with offices in Pune (7)

Fintech

PhonePe

React JS interview questions

  • 30 questions
  • 5 rounds

Bengaluru, Pune

View questions
Product

Microsoft

React JS interview questions

  • 30 questions
  • 5 rounds

Hyderabad, Bengaluru, Noida +2

View questions
Product

Amazon

React JS interview questions

  • 30 questions
  • 5 rounds

Bengaluru, Hyderabad, Chennai +2

View questions
Consulting

Thoughtworks

React JS interview questions

  • 30 questions
  • 5 rounds

Pune, Bengaluru, Chennai +2

View questions
IT services

Infosys

React JS interview questions

  • 30 questions
  • 4 rounds

Bengaluru, Mysuru, Pune +2

View questions
Consulting

Accenture

React JS interview questions

  • 30 questions
  • 4 rounds

Bengaluru, Hyderabad, Pune +2

View questions
IT services

TCS

React JS interview questions

  • 30 questions
  • 4 rounds

Mumbai, Chennai, Pune +2

View questions

Frequently asked questions

Which companies hire React JS professionals in Pune?

Companies with large offices in Pune include PhonePe, Microsoft, Amazon, Thoughtworks, Infosys, Accenture, TCS. Use their company pages below to practise employer-specific sets.

Are React JS interviews in Pune different from other cities?

The questions depend more on the company than the city. Pune's mix of employers decides the style: It has a large mid-level job market for data and QA roles, and interviews are often practical and project-based

How do I find React JS jobs in Pune?

Shortlist companies with Pune offices, keep your CV focused on React JS projects, apply on company career pages and job portals with the Pune filter, and practise the questions on this page before each interview.

Other cities

DelhiNoidaGurgaonBangaloreHyderabadChennaiMumbaiKolkataAhmedabadJaipurLucknowChandigarhIndoreKochiCoimbatoreBhubaneswarNagpurVisakhapatnamThiruvananthapuram

More ways to practise

Company-wise React JS questionsExperience-wise React JS questionsRole-wise React JS questionsCity-wise React JS questionsMost asked React JS questionsScenario-based questionsPractical / hands-on questionsHR & behavioural questionsReact JS mock interviewOnline assessment questionsTechnical round questionsManagerial round questionsReact JS topic sheets