36 practice questions with answers for React JS interviews in Coimbatore.
React JS jobs in Coimbatore
Coimbatore has a growing IT-services and engineering-services market around TIDEL Park and its SEZs, supported by a large pool of engineering graduates. Many roles are with delivery centres of bigger IT firms.
Below are 36 questions that match the mix of service, product and domain employers hiring react developers in Coimbatore.
Solved for CoimbatoreStart 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.
A portal renders children into a DOM node outside the parent component's DOM hierarchy while keeping them in the same React tree, so context and event bubbling still work.
import { createPortal } from 'react-dom';
function Modal({ children }) {
return createPortal(
<div className="modal">{children}</div>,
document.getElementById('modal-root')
);
}
They are used for modals, tooltips and dropdowns that must escape overflow hidden or z-index issues.
02
What is lazy initialisation in useState and when should you use it?
If the initial value is expensive to compute, pass a function instead of the value. React calls it only on the first render.
// runs on every render (wasteful)
const [data, setData] = useState(JSON.parse(localStorage.getItem('cart')));
// runs once
const [data, setData] = useState(() =>
JSON.parse(localStorage.getItem('cart') ?? '[]')
);
03
What is an effect cleanup function and why is it important?
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.
04
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.
05
Show a login form using React Hook Form with Zod validation.
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.
07
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.
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}.
09
How do you test a component that fetches data from an API?
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.
11
How does a child component send data back to its parent?
The parent passes a callback function as a prop, and the child calls it with the data.
function Parent() {
const [city, setCity] = useState('');
return <CityPicker onSelect={setCity} />;
}
function CityPicker({ onSelect }) {
return (
<select onChange={e => onSelect(e.target.value)}>
<option>Delhi</option>
<option>Noida</option>
</select>
);
}
12
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.
13
How do you handle a tight deadline when you know the code is not perfect?
Situation: a festive sale banner feature had to go live in two days. Task: ship safely without gold-plating. Action: I listed must-haves with the product owner, wrote tests for the critical checkout path, kept a simple implementation and logged clear tech-debt tickets for refactoring. Result: we launched on time with no incidents, and I cleaned up the code in the next sprint as planned.
14
Five components on one page each fetch the same user profile, causing duplicate API calls. How would you fix this?
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.
15
Tell me about a time you pushed back on adding a new library to the project.
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.
16
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.
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.
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.
19
What is the difference between functional components and class components?
Class components extend React.Component, use this.state and lifecycle methods like componentDidMount. Functional components are plain functions that return JSX and use hooks such as useState and useEffect for state and side effects. Modern React code is written almost entirely with functional components because they are shorter, easier to test and reuse logic through custom hooks. Class components are still needed only for error boundaries.
20
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.
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.
22
What is the difference between server state and client state?
Client state is owned by the browser, like whether a modal is open, form input or theme. Server state lives on a backend and is only cached on the client, like products or orders; it can become stale, be changed by other users and needs refetching. Tools like TanStack Query or RTK Query manage server state, while useState, Context or Zustand handle client state.
23
Your React app works locally, but after deployment refreshing /dashboard gives a 404 from the server. Why, and how do you fix it?
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.
24
What are the common styling options in React, and how do Server Components affect the choice?
Options include plain CSS or CSS Modules (scoped class names), Tailwind CSS utility classes, Sass, and CSS-in-JS libraries like styled-components or Emotion. Runtime CSS-in-JS needs client-side JavaScript and context, so it fits poorly with Server Components. That is why Tailwind and CSS Modules, or zero-runtime libraries, are the most common choice in modern Next.js projects. Component libraries like shadcn/ui build on Tailwind.
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
How do you set up a Redux store and use it in components?
Save it to localStorage and read it on startup. With Zustand, the persist middleware does this.
import { persist } from 'zustand/middleware';
const useCart = create(persist(
set => ({ items: [], add: i => set(s => ({ items: [...s.items, i] })) }),
{ name: 'cart-storage' }
));
With Redux, use redux-persist or a store.subscribe that writes a throttled snapshot. Never store secrets like tokens in localStorage.
28
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.
29
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.
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.
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.
32
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.
33
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.
34
A timer using setInterval inside useEffect always shows 1 and never goes higher. What is the bug?
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.
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.
36
How do you lazy load route components to reduce the initial bundle?
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.
Few big employers listed in Coimbatore?
Many Coimbatore candidates also apply to teams in Chennai and to remote or hybrid roles. Practise the Chennai set as well.
Which companies hire React JS professionals in Coimbatore?
Companies with large offices in Coimbatore include many IT services and product firms. Use their company pages below to practise employer-specific sets.
Are React JS interviews in Coimbatore different from other cities?
The questions depend more on the company than the city. Coimbatore's mix of employers decides the style: Many roles are with delivery centres of bigger IT firms
How do I find React JS jobs in Coimbatore?
Shortlist companies with Coimbatore offices, keep your CV focused on React JS projects, apply on company career pages and job portals with the Coimbatore filter, and practise the questions on this page before each interview.