Curated interview practice questions with answers. These are practice scenarios, not a verified list of past interview questions.
About Myntra hiring for React JS roles
Myntra is an Indian fashion and lifestyle e-commerce platform and part of the Flipkart group. Its technology and analytics teams work on search, personalisation, size recommendations, pricing, supply chain and marketing. It hires for software engineers, SDETs, business analysts, data analysts and data scientists. Fashion-specific data such as sizing matters a lot.
For React JS roles, this Myntra practice set focuses most on State Management (5), Props and State (5), Testing and Debugging (4), Routing and Forms (4). It has 2 easy, 22 medium, 6 hard questions, so you can start easy and work up to the harder ones.
Company type
E-commerce & consumer tech
Headquarters
Bengaluru, India
Main India offices
Bengaluru
Myntra React JS interview process
Online assessment (coding or SQL)
Technical or machine coding round
Problem solving or case round
Hiring manager round
Typical pattern based on public candidate experiences. Rounds vary by role, team and year.
Solved for MyntraStart 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
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.
02
How do you handle async API calls with createAsyncThunk?
State updates are scheduled, and each render sees a snapshot of state. If you call setCount(count + 1) several times in one handler, all calls read the same old value. The updater function receives the latest pending value.
function addThree() {
setCount(c => c + 1);
setCount(c => c + 1);
setCount(c => c + 1);
}
// count increases by 3, not 1
05
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?
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.
06
You are building a 4-step onboarding wizard. How do you keep data when users move back and forth between steps?
Store the wizard data in a parent component, a reducer, or a small store, not inside each step, because step components unmount when hidden. Each step receives its slice and an update callback. Validate each step before moving forward, and optionally save drafts to sessionStorage or the server so a refresh does not lose progress. The current step can also live in the URL for back-button support.
Zustand is a small state library with a hook-based API and no Provider.
import { create } from 'zustand';
const useCart = create(set => ({
items: [],
add: item => set(s => ({ items: [...s.items, item] })),
clear: () => set({ items: [] })
}));
const count = useCart(s => s.items.length);
Components subscribe with selectors, so they re-render only when the selected slice changes.
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.
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.
12
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?
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.
13
A teammate writes setCount(count + 1) three times in a click handler and is surprised that the count increases by only one. Explain why.
Inside one render, count is a constant snapshot, say 0. Each call schedules setCount(0 + 1), so all three set the same value 1, and React batches them into one render. State does not change immediately after calling the setter. To increment three times, use the updater form setCount(c => c + 1), which queues functions that each receive the latest pending value.
14
What are Core Web Vitals and how do React apps affect them?
Core Web Vitals are Google's user experience metrics: LCP (Largest Contentful Paint, loading, target under 2.5s), INP (Interaction to Next Paint, responsiveness, under 200ms, which replaced FID in 2024) and CLS (Cumulative Layout Shift, visual stability, under 0.1). Large React bundles hurt LCP and INP, heavy renders on clicks hurt INP, and images or content without reserved space hurt CLS. SSR, code splitting and transitions help.
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.
16
How would you implement an optimistic update with TanStack Query and roll back on failure?
In useMutation, use onMutate to cancel ongoing queries, save the previous cache data and update the cache with the expected result. In onError, restore the saved snapshot and show an error toast. In onSettled, invalidate the query so the cache syncs with the server. This makes actions like toggling a favourite feel instant while keeping data correct if the server rejects the change.
17
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.
18
What are the special files in the Next.js App Router?
Inside the app folder, each route segment can have page.tsx (the UI for that URL), layout.tsx (shared UI that persists across child routes), loading.tsx (Suspense fallback shown while the page loads), error.tsx (error boundary, must be a Client Component), not-found.tsx (404 UI) and route.ts (API route handler). Folders in square brackets like [slug] create dynamic segments, and folders in parentheses group routes without affecting the URL.
19
What is the main performance pitfall of React Context and how do you avoid it?
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.
20
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.
21
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.
22
Users lose their typed data when they accidentally click another menu link. How would you warn them about unsaved changes?
Track a dirty flag, for example formState.isDirty from React Hook Form. For in-app navigation, use React Router's useBlocker to block the transition and show a confirm dialog. For tab close or refresh, add a beforeunload listener while the form is dirty, and remove it in the effect cleanup. Also consider autosaving drafts, which is often a better user experience than blocking.
23
Typing in a search box feels laggy because a big product list is filtered on every keystroke. How do you fix it?
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.
24
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.
Disabling it usually hides a stale closure bug. The rule tells you the effect reads a value that can change. Instead, include the dependency, move a function inside the effect, use the updater form of setState so state is not needed, or move non-reactive logic into useEffectEvent. If an object dependency changes every render, create it inside the effect or memoise it. Suppress only with a clear comment.
27
After a release, the Lighthouse performance score of the home page dropped from 90 to 60. How do you find and fix the cause?
Compare the two builds instead of guessing. Run Lighthouse and WebPageTest on both versions, check which metric dropped (LCP, TBT or CLS), and diff bundle analyser reports to spot new heavy dependencies. Review the release changes: a new third-party script, an unoptimised hero image or a component moved from server to client are common causes. Fix it, then add a performance budget check in CI to prevent repeats.
Use vi.mock with a factory, then control return values per test.
import { vi } from 'vitest';
import { getProfile } from './api';
vi.mock('./api', () => ({
getProfile: vi.fn()
}));
test('shows name', async () => {
getProfile.mockResolvedValue({ name: 'Ravi' });
render(<Profile />);
expect(await screen.findByText('Ravi')).toBeInTheDocument();
});
In Jest, the same pattern uses jest.mock and jest.fn.
29
Should you keep related values in one state object or several useState calls?
Group values that always change together, like x and y coordinates, into one object. Keep unrelated values in separate useState calls, which makes updates simpler and avoids accidentally overwriting fields. Avoid contradictory or duplicated state, such as isLoading and isError both being true. When many values change together through clear events, useReducer is often a cleaner choice than a big object.
30
Your tests pass but print 'An update to Component inside a test was not wrapped in act(...)'. What does it mean and how do you fix it?
It means state changed after the test finished checking, usually because an async operation like a fetch or timer resolved later. The test may not be checking the final UI. Fix it by awaiting the result: use findBy queries or waitFor for the expected content, await user-event calls, and use fake timers with act when testing timeouts. Do not just wrap random code in act to hide the warning.
Tips to crack the Myntra React JS interview
Prepare cases on fashion e-commerce issues like returns due to size, discount depth or End of Reason Sale planning.
Practise SQL and Python for analytics roles, including cohort and funnel analysis on order data.
Read about Myntra's use of data science in size recommendations and visual search.
Keep a one-minute story ready for every project on your CV: problem, your part, tools, result.
Practise the hard questions on this page aloud; Myntra interviewers usually ask follow-ups on your first answer.
Frequently asked questions
How many rounds are there in the Myntra React JS interview?
Candidates usually go through 4 stages: Online assessment (coding or SQL); Technical or machine coding round; Problem solving or case round; Hiring manager round. The exact rounds change with the role, team, location and your experience, so confirm the process with the recruiter.
Which topics should I prepare for the Myntra React JS interview?
This practice set leans on State Management (5), Props and State (5), Testing and Debugging (4), Routing and Forms (4). Revise those first, then practise explaining one or two of your own projects end to end, because most Myntra interviewers ask you to walk through real work.
Are these the exact questions asked at Myntra?
No. These are curated practice questions that match the skills and difficulty usually tested in e-commerce & consumer tech interviews like Myntra's. They are not a leaked or verified list of past questions.
Where does Myntra hire React JS professionals in India?
Myntra has large teams in Bengaluru. Openings and locations change often, so check the Myntra careers page and filter by city and experience.