‹ Back to previous section Course home All page URLs

React JS Telephonic Interview Questions & Answers

30 questions for the telephonic interview stage — 19 easy, 10 medium, 1 hard.

About the telephonic interview round

The telephonic or screening round is a 15-30 minute call with a recruiter or engineer. It checks your basics, your CV and whether you can explain React JS concepts clearly without a screen to point at.

Tips for the telephonic interview round

Keep your CV in front of you and be ready to explain every line on it.
Answer in short, clear sentences; there is no whiteboard, so structure matters.
Take the call somewhere quiet and confirm the time in advance.
Prepare one question to ask the interviewer at the end.

Solved — telephonic interviewStart 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

What changed with createRoot in React 18 and later compared to ReactDOM.render?

React FundamentalsMedium

Show answer

createRoot from react-dom/client replaces the legacy ReactDOM.render, which was removed in React 19. createRoot enables the concurrent renderer, automatic batching of all updates, and features like useTransition and Suspense for data. You call const root = createRoot(document.getElementById('root')) and then root.render(<App />). For server-rendered HTML you use hydrateRoot instead.

You import a component and get the error 'Element type is invalid: expected a string or a class/function but got undefined'. How do you debug it?

React FundamentalsEasy

Show answer

This almost always means the import does not match the export. If the file uses export default Header, import it as import Header from './Header'. If it uses export function Header, import it as import { Header } from './Header'. Also check the file path, circular imports and that the component name starts with a capital letter. Logging the imported value quickly confirms it is undefined.

What are Core Web Vitals and how do React apps affect them?

Performance OptimizationMedium

Show answer

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.

What are React hooks and what are the rules of hooks?

React HooksEasy

Show answer

Hooks are functions like useState and useEffect that let function components use state, side effects, context and other React features. Two rules apply: call hooks only at the top level of a component or custom hook, never inside loops, conditions or nested functions, and call them only from React functions. React relies on the call order being the same on every render to match state to each hook.

What are nested routes and what is the role of Outlet?

Routing and FormsMedium

Show answer

Nested routes let a parent route render a shared layout, like a dashboard sidebar, while child routes render inside it. The parent component places <Outlet /> where the matching child should appear. For example, /dashboard renders DashboardLayout, and /dashboard/orders renders Orders inside its Outlet. This keeps layouts consistent, avoids repeating headers and lets each section load its own data.

What is the Context API and when should you use it?

State ManagementEasy

Show answer

Context lets a parent provide a value to any component below it without passing props through every level. You create it with createContext, provide a value high in the tree and read it with useContext. It is ideal for values that many components need and that change rarely, such as theme, language, logged-in user or feature flags. It is not a full replacement for a state management library.

What does useContext do?

React HooksEasy

Show answer

useContext reads the current value of a context created with createContext. React finds the nearest matching Provider above the component and returns its value; if none exists, it returns the default value. Whenever the provider value changes, every component using that context re-renders. In React 19 you can render <ThemeContext value={theme}> directly instead of ThemeContext.Provider, and use(ThemeContext) also works.

Why is React Hook Form popular?

Routing and FormsMedium

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.

How does the dependency array of useEffect control when the effect runs?

React HooksEasy

Show answer

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.

A teammate writes user.name = 'Ravi' inside a click handler and the screen does not update. Why?

Props and StateEasy

Show answer

React decides to re-render when you call the state setter with a new value. Mutating the existing object does not call the setter, and even if you call setUser(user) with the same mutated object, React compares by reference with Object.is, sees no change and may skip rendering. Always create a new object, like setUser({ ...user, name: 'Ravi' }).

What are the common approaches to form validation in React?

Routing and FormsEasy

Show answer

You can validate manually in onChange or onSubmit and store errors in state, use HTML attributes like required and pattern for basic checks, or use a form library such as React Hook Form with a schema library like Zod or Yup. Schema validation keeps rules in one place and can be shared with the backend in TypeScript. Always validate again on the server, because client checks can be bypassed.

Write a test for a counter component that increments on click.

Testing and DebuggingEasy

Show answer

Use React Testing Library with user-event. import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import Counter from './Counter'; test('increments count', async () => { const user = userEvent.setup(); render(<Counter />); await user.click(screen.getByRole('button', { name: '+' })); expect(screen.getByRole('heading')).toHaveTextContent('1'); }); toHaveTextContent comes from @testing-library/jest-dom.

What do useActionState and useFormStatus do in React 19?

React HooksMedium

Show answer

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.

How do you set SEO metadata in a Next.js App Router page?

Next.js and Advanced ReactMedium

Show answer

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.

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

Routing and FormsMedium

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.

How do environment variables work in a React or Next.js app?

Next.js and Advanced ReactEasy

Show answer

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.

How do you respond when a senior developer leaves many comments on your pull request?

Testing and DebuggingEasy

Show answer

Situation: my first big PR received over twenty review comments. Task: address them and learn, not feel defensive. Action: I thanked the reviewer, fixed clear issues, asked questions on ones I did not understand and explained my reasoning politely on two where I had context. Result: the PR merged after one more round, and I created a personal checklist that reduced comments on later PRs.

Explain the core concepts of Redux.

State ManagementEasy

Show answer

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.

What is hydration?

Next.js and Advanced ReactMedium

Show answer

Hydration is the process where React, running in the browser, attaches event handlers and state to HTML that was already rendered on the server, making it interactive. React expects the first client render to match the server HTML exactly; if not, it reports a hydration mismatch. Until hydration finishes, the page is visible but buttons may not respond, which is why reducing client JavaScript matters.

A developer says the app is too slow, based on testing it with the development server. What do you tell them?

Performance OptimizationEasy

Show answer

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.

What is the difference between BrowserRouter and HashRouter?

Routing and FormsEasy

Show answer

BrowserRouter uses clean URLs like /products/5 with the HTML5 History API, but the server must be configured to serve index.html for every route. HashRouter puts the route after a hash, like /#/products/5; the server never sees the hash part, so it works on any static host without configuration. BrowserRouter is preferred for SEO and clean URLs; HashRouter suits simple static hosting or embedded apps.

What is the React Compiler?

Performance OptimizationMedium

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.

React changes fast. How do you keep your skills current?

React FundamentalsEasy

Show answer

I follow the official react.dev blog and docs, read release notes for React, Next.js and the libraries we use, and try new features in a small side project before using them at work. For example, when React 19 introduced Actions and useOptimistic, I rebuilt a form in my practice app first, noted pitfalls, and then shared a short demo with my team before we adopted it.

What is the difference between functional components and class components?

React FundamentalsEasy

Show answer

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.

Why do you want to work as a React developer?

Next.js and Advanced ReactEasy

Show answer

I enjoy building things people use directly, and React lets me turn designs into fast, interactive screens. During my training I built three projects with React, TypeScript and APIs, and I liked how components make code reusable. React also has strong demand across startups and service companies in India, a large community and paths into Next.js and React Native, so I see long-term growth in this role.

Jest or Vitest: what is the difference for React projects?

Testing and DebuggingEasy

Show answer

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.

What does React.memo do?

Performance OptimizationEasy

Show answer

React.memo wraps a component so React skips re-rendering it when its props are shallowly equal to the previous props. It is useful for components that render often with the same props and are expensive to render, like rows in a big table. It only works if props stay referentially stable, so objects and callbacks passed to it are usually memoised with useMemo and useCallback.

How would you build and maintain a shared component library for several React apps?

Next.js and Advanced ReactHard

Show answer

Start with design tokens for colours, spacing and typography, and build accessible primitives, often on top of headless libraries like Radix UI or React Aria. Document components in Storybook with usage examples, add visual regression and accessibility tests, and publish versioned packages from a monorepo with semantic versioning and changelogs. Keep APIs small and composable, and collect feedback from consuming teams before breaking changes.

You are building a 4-step onboarding wizard. How do you keep data when users move back and forth between steps?

Routing and FormsMedium

Show answer

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.

What kinds of tests are written for a React application?

Testing and DebuggingEasy

Show answer

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.

Frequently asked questions

What happens in the React JS telephonic interview round?

How do I clear the telephonic interview round?

Keep your CV in front of you and be ready to explain every line on it. Answer in short, clear sentences; there is no whiteboard, so structure matters. Take the call somewhere quiet and confirm the time in advance.

Which round comes next?

A typical order is online assessment, telephonic screening, one or two technical rounds, a managerial round and HR. Use the other round pages to practise each stage.

Practise every interview round

Online Assessment questions Technical Round questions Managerial Round questions Rapid-Fire questions HR & behavioural questions Full mock interview

More ways to practise

Company-wise React JS questions Experience-wise React JS questions Role-wise React JS questions City-wise React JS questions Most asked React JS questions Scenario-based questions Practical / hands-on questions HR & behavioural questions React JS mock interview Online assessment questions Technical round questions Managerial round questions React JS topic sheets