36 practice questions with answers for React JS interviews in Visakhapatnam.
React JS jobs in Visakhapatnam
Visakhapatnam (Vizag) has a developing IT market with delivery centres, start-ups and IT parks around Rushikonda. Many local candidates also apply to Hyderabad and remote roles, so a mix of service and product styles is common.
Below are 36 questions that match the mix of service, product and domain employers hiring react developers in Visakhapatnam.
Solved for VisakhapatnamStart 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
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.
02
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.
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.
04
A cart page keeps the selected item object in state and also the items array. After editing the item's quantity, the details panel shows the old quantity. Why?
The selected item is a copy duplicated from the array, so updating the array does not update the copy. This breaks the single source of truth. Store only selectedId in state and derive the item during render: const selected = items.find(i => i.id === selectedId). Now there is one place where each item lives, and every view stays in sync automatically.
05
A developer says the app is too slow, based on testing it with the development server. What do you tell them?
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.
useOptimistic shows a temporary optimistic state while an async action is running. For example, when a user likes a post, you immediately show the like count increased, call the server, and React automatically reverts to the real state when the action finishes or fails. It makes interfaces feel instant for actions that usually succeed, like sending a chat message or adding to a wishlist.
07
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.
08
How do you implement code splitting with React.lazy and Suspense?
Load a component only when it is needed with a dynamic import.
import { lazy, Suspense } from 'react';
const Reports = lazy(() => import('./Reports'));
function App() {
return (
<Suspense fallback={<Spinner />}>
{showReports && <Reports />}
</Suspense>
);
}
The bundler creates a separate chunk for Reports, reducing the initial JavaScript download.
09
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.
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.
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.
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.
13
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?
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.
14
How do you test a component that fetches data from an API?
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.
16
A search box fetches results on every keystroke and sometimes shows results for an older query. How do you fix this race condition?
Responses can arrive out of order, so a slow old request overwrites newer results. Cancel or ignore stale requests in the effect cleanup.
useEffect(() => {
const ctrl = new AbortController();
fetch(`/api/search?q=${q}`, { signal: ctrl.signal })
.then(r => r.json())
.then(setResults)
.catch(() => {});
return () => ctrl.abort();
}, [q]);
Also debounce the input, or use TanStack Query which handles this for you.
17
How do you persist part of your state, like the cart, across page reloads?
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.
Redux keeps global state in a single store. The UI dispatches actions, which are plain objects describing what happened, like { type: 'cart/added', payload }. Reducers are pure functions that take the current state and an action and return new state. Components read state with selectors. This strict one-way flow makes state changes predictable, traceable in DevTools and easy to test.
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}.
20
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.
21
What is a Higher-Order Component and is it still used?
A Higher-Order Component is a function that takes a component and returns a new component with extra behaviour, for example withAuth(Profile) that redirects unauthenticated users. HOCs were common for sharing logic like routing or Redux connect. Today custom hooks are preferred because they avoid wrapper nesting, prop name collisions and confusing component trees. You will still see HOCs in older codebases.
22
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.
23
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.
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.
25
What kinds of tests are written for a React application?
Unit tests check small pieces like utility functions, reducers and custom hooks. Component or integration tests render components with their children and check behaviour the user sees, usually with React Testing Library and Vitest or Jest. End-to-end tests run the full app in a real browser with Playwright or Cypress, covering flows like login and checkout. Static checks with TypeScript and ESLint catch many bugs before tests run.
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.
28
A blog feature must render HTML content that comes from a CMS. Why is dangerouslySetInnerHTML risky and how do you use it safely?
React escapes values in JSX by default, which protects against XSS. dangerouslySetInnerHTML bypasses this and inserts raw HTML, so if the content comes from users or an untrusted CMS, attackers can inject scripts. If you must render HTML, sanitise it first with a library like DOMPurify, restrict allowed tags, and add a Content Security Policy. Also never put user input into href attributes without validating the protocol.
29
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>
);
}
30
How do you handle a form with multiple controlled inputs using one change handler?
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.
32
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.
Lifting state up means moving shared state to the closest common parent of the components that need it. The parent holds the state and passes the value and a setter callback down as props. For example, a temperature input and a converter display both read from state kept in their parent. This keeps a single source of truth instead of two components trying to stay in sync.
34
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.
35
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.
36
Why should you use the functional form of setState? Show an example.
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
Few big employers listed in Visakhapatnam?
Many Visakhapatnam candidates also apply to teams in Hyderabad and to remote or hybrid roles. Practise the Hyderabad set as well.
Which companies hire React JS professionals in Visakhapatnam?
Companies with large offices in Visakhapatnam include many IT services and product firms. Use their company pages below to practise employer-specific sets.
Are React JS interviews in Visakhapatnam different from other cities?
The questions depend more on the company than the city. Visakhapatnam's mix of employers decides the style: Many local candidates also apply to Hyderabad and remote roles, so a mix of service and product styles is common
How do I find React JS jobs in Visakhapatnam?
Shortlist companies with Visakhapatnam offices, keep your CV focused on React JS projects, apply on company career pages and job portals with the Visakhapatnam filter, and practise the questions on this page before each interview.