36 practice questions with answers for React JS interviews in Indore.
React JS jobs in Indore
Indore is one of central India's fastest-growing IT hubs, with IT-services campuses and product start-ups in its Super Corridor and IT parks. Companies here hire many freshers and value hands-on project work.
Below are 36 questions that match the mix of service, product and domain employers hiring react developers in Indore.
Solved for IndoreStart 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.
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.
02
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.
fireEvent dispatches a single DOM event, such as one change event. user-event simulates full user interactions: typing fires keydown, keypress, input and keyup for every character, clicking includes pointer and focus events, and it respects disabled elements and visibility. This finds bugs that fireEvent misses. In current versions, call userEvent.setup() and await each interaction because they are asynchronous.
04
How would you explain to a non-technical manager why our marketing pages need server rendering?
I would keep it simple: a pure client-side React page sends an almost empty HTML file, so some crawlers and social previews see little content and users on slow phones see a blank screen longer. Server rendering sends ready HTML, improving SEO and first load. I would back this with a Lighthouse comparison and search console data, and suggest a framework like Next.js only for pages that need it.
05
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.
06
Where should you store the logged-in user's auth token in a React app?
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
Write a custom hook to fetch data with loading and error states.
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.
10
How do you analyse and reduce JavaScript bundle size?
Generate a visual report with rollup-plugin-visualizer in Vite or @next/bundle-analyzer in Next.js. Look for large dependencies, duplicate packages and code that loads on every page. Fixes include importing only what you need, replacing heavy libraries such as moment with date-fns or dayjs, lazy loading routes and rarely used components, and checking that libraries support tree shaking. Track size in CI to prevent regressions.
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.
12
How do environment variables work in a React or Next.js app?
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.
13
How do you fetch data in a Next.js App Router page?
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.
14
How do you create a protected route that redirects users who are not logged in?
Create a wrapper that checks auth and either renders the child routes or redirects.
import { Navigate, Outlet, useLocation } from 'react-router';
function RequireAuth() {
const { user } = useAuth();
const location = useLocation();
if (!user) return <Navigate to="/login" replace state={{ from: location }} />;
return <Outlet />;
}
<Route element={<RequireAuth />}>
<Route path="/account" element={<Account />} />
</Route>
The server must still enforce authorisation.
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.
'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.
17
Your component fetches data in useEffect and the network tab shows thousands of requests in a loop. What could cause it?
Common causes are a missing dependency array, so the effect runs after every render and its setState triggers another render, or a dependency that is a new object or array each render, like options={{ page: 1 }}. Since Object.is compares by reference, the effect always sees a change. Fix by adding correct dependencies, depending on primitive values, or memoising the object with useMemo.
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}.
19
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?
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.
20
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.
21
How do you set up a Redux store and use it in components?
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.
23
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.
24
Which queries should you prefer in React Testing Library and why?
Prefer queries accessible to everyone: getByRole (with the name option) first, then getByLabelText for form fields, getByPlaceholderText, getByText and getByDisplayValue. Use getByAltText and getByTitle for images and titles. getByTestId is a last resort when nothing else works. Role-based queries also check accessibility, because if a button cannot be found by role and name, screen reader users will struggle too.
25
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.
26
Describe a time you disagreed with a teammate about how a component should be designed.
Situation: a teammate wanted one large Table component with over twenty boolean props. Task: we needed a design that both of us and future developers could maintain. Action: I built a quick prototype using composition with Table.Header and Table.Row, and we compared both on two real screens. Result: the team chose composition, prop count dropped sharply, and we agreed to prototype before arguing in future.
27
What is the difference between the App Router and the Pages Router in Next.js?
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.
28
Tell me about a time a requirement changed late in a sprint. How did you handle it?
Situation: two days before release, the product owner asked to add a GST number field with validation to our checkout form. Task: deliver it without risking the release. Action: I estimated the impact, proposed shipping the field with basic format validation first and the full verification API in the next sprint, and added tests. Result: we released on time and the follow-up shipped a week later.
Server Components run only on the server or at build time. They can be async, read databases or files directly and send rendered output to the client without shipping their JavaScript, which reduces bundle size. They cannot use state, effects or browser APIs. Client Components, marked with 'use client', handle interactivity. Server Components can render Client Components and pass them serialisable props.
In data or framework mode, a route can define a loader that fetches data before the route renders, and an action that handles form submissions or mutations for that route. Components read data with useLoaderData. After an action runs, the router automatically revalidates loaders so the UI shows fresh data. This moves data fetching out of effects and avoids request waterfalls between parent and child components.
31
How do you test a component that depends on Redux and React Router?
Create a custom render helper that wraps the UI with real providers.
function renderWithProviders(ui, { route = '/', preloadedState } = {}) {
const store = configureStore({ reducer: rootReducer, preloadedState });
return render(
<Provider store={store}>
<MemoryRouter initialEntries={[route]}>{ui}</MemoryRouter>
</Provider>
);
}
Using a real store with preloaded state is better than mocking useSelector, because it tests actual behaviour.
32
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>)
33
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.
34
What do useActionState and useFormStatus do in React 19?
useActionState wraps an action function and returns [state, formAction, isPending]; you pass formAction to a form's action prop and the returned state holds the result, like a validation error. useFormStatus, from react-dom, lets a child component such as a submit button read the pending status of the parent form without prop drilling. Together they remove a lot of manual loading and error state code.
35
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.
Use renderHook from React Testing Library and wrap state changes in act.
import { renderHook, act } from '@testing-library/react';
import { useCounter } from './useCounter';
test('increments', () => {
const { result } = renderHook(() => useCounter(5));
act(() => result.current.increment());
expect(result.current.count).toBe(6);
});
If the hook needs context, pass a wrapper option with the provider.
Few big employers listed in Indore?
Many Indore candidates also apply to teams in Pune and to remote or hybrid roles. Practise the Pune set as well.
Which companies hire React JS professionals in Indore?
Companies with large offices in Indore include many IT services and product firms. Use their company pages below to practise employer-specific sets.
Are React JS interviews in Indore different from other cities?
The questions depend more on the company than the city. Indore's mix of employers decides the style: Companies here hire many freshers and value hands-on project work
How do I find React JS jobs in Indore?
Shortlist companies with Indore offices, keep your CV focused on React JS projects, apply on company career pages and job portals with the Indore filter, and practise the questions on this page before each interview.