‹ Back to previous section Course home All page URLs

React Developer Interview Questions & Answers

40 questions for React Developer interviews — 26 easy, 14 medium.

About the React Developer role

A React developer builds and maintains user interfaces as reusable components, connects them to REST or GraphQL APIs and manages state with hooks and libraries such as Redux Toolkit or TanStack Query. Freshers usually start by building screens from Figma designs, fixing bugs and writing component tests under a senior's guidance, in product startups or IT service projects for global clients.

JSX and components React hooks REST API integration TypeScript basics Git and pull requests

Solved for this roleStart 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

When should you choose useReducer over useState? Show a small example.

React HooksMedium

Show answer

Use useReducer when state has several related fields or many update types, so logic lives in one pure, testable function. function reducer(state, action) { switch (action.type) { case 'added': return [...state, action.item]; case 'removed': return state.filter(i => i.id !== action.id); default: return state; } } const [cart, dispatch] = useReducer(reducer, []); dispatch({ type: 'added', item });

Can a child component modify its props?

Props and StateEasy

Show answer

No. Props are read-only, and a component must behave like a pure function with respect to its props. Mutating a prop object would not trigger a re-render and would cause confusing bugs in the parent. If a child needs to change something, the parent should own that state and pass down a callback such as onChange, which the child calls with the new value.

How do you update objects and arrays in state without mutating them?

Props and StateEasy

Show answer

Always create new copies so React detects the change by reference. // object setUser(u => ({ ...u, city: 'Pune' })); // add to array setItems(list => [...list, newItem]); // remove setItems(list => list.filter(i => i.id !== id)); // update one item setItems(list => list.map(i => i.id === id ? { ...i, done: true } : i));

What is the children prop?

Props and StateEasy

Show answer

children is a special prop containing whatever JSX you place between a component's opening and closing tags. For example, in <Card><h3>Title</h3></Card>, the h3 is passed as props.children. It lets you build wrapper components like layouts, modals and cards that do not need to know their content in advance. It is the foundation of composition in React.

What is an effect cleanup function and why is it important?

React HooksMedium

Show answer

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.

Tell me about a React project you built and the hardest problem you solved in it.

React FundamentalsEasy

Show answer

Situation: in my final year I built a hostel complaint portal with React, Vite and a Node API. Task: the complaint list became slow and buggy when filters changed. Action: I found I was storing filtered data in state and syncing it with effects, so I derived it during render with useMemo and fixed missing keys. Result: bugs disappeared, the page felt instant, and I learned to keep state minimal.

What is automatic batching in React 18 and later?

React FundamentalsMedium

Show answer

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.

How do you set up a Redux store and use it in components?

State ManagementEasy

Show answer

Use configureStore, wrap the app with Provider and use hooks. const store = configureStore({ reducer: { counter: counterReducer } }); createRoot(el).render( <Provider store={store}><App /></Provider> ); function Counter() { const value = useSelector(state => state.counter.value); const dispatch = useDispatch(); return <button onClick={() => dispatch(increment())}>{value}</button>; }

Your component fetches data in useEffect and the network tab shows thousands of requests in a loop. What could cause it?

React HooksMedium

Show answer

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.

Describe a time you found and fixed a bug reported by a real user.

Routing and FormsMedium

Show answer

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.

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 does one-way data flow mean in React?

React FundamentalsEasy

Show answer

Data in React flows down from parent to child through props. A child cannot directly change its parent's data; instead the parent passes a callback function, and the child calls it to request a change. This makes the app predictable because you can trace where every value comes from. Two-way binding, as in some other frameworks, is done manually with value and onChange.

Show a basic React Router setup with a home page, a product page and a 404 page.

Routing and FormsEasy

Show answer

In React Router v7 (library mode) you can use declarative routes. import { BrowserRouter, Routes, Route } from 'react-router'; function App() { return ( <BrowserRouter> <Routes> <Route path="/" element={<Home />} /> <Route path="/products/:id" element={<Product />} /> <Route path="*" element={<NotFound />} /> </Routes> </BrowserRouter> ); } The * path catches any unmatched URL.

Your manager asks you to set up a new React project in 2026 and suggests Create React App. What would you recommend?

React FundamentalsEasy

Show answer

The React team deprecated Create React App in 2025. For a single-page app, use Vite (npm create vite@latest, choose React with TypeScript), which gives very fast dev server and builds. For full-stack apps with routing, SSR and server components, the React docs recommend a framework such as Next.js or React Router in framework mode. Choose based on whether you need server rendering and SEO.

What is the difference between useMemo and useCallback?

React HooksMedium

Show answer

useMemo caches the result of a calculation between renders, like a filtered list: useMemo(() => filter(items, q), [items, q]). useCallback caches a function definition itself: useCallback(fn, deps), which equals useMemo(() => fn, deps). Both are performance tools, useful when passing values to React.memo children or effect dependencies. With the React Compiler enabled, much of this manual memoisation becomes unnecessary.

What is the difference between props and state?

Props and StateEasy

Show answer

Props are inputs passed from a parent component and are read-only inside the child. State is data owned and managed by the component itself with useState or useReducer, and changing it triggers a re-render. A simple rule: if a value comes from outside and the component does not change it, it is a prop; if it changes over time due to user action or data loading, it is state.

What is React and why is it so widely used for building web interfaces?

React FundamentalsEasy

Show answer

React is an open-source JavaScript library for building user interfaces from reusable components. You describe what the UI should look like for a given state and React updates the DOM efficiently when that state changes. It is popular because of its component model, huge ecosystem, strong job market, React Native for mobile, and frameworks like Next.js that add routing and server rendering on top.

Tell me about a mistake you made that reached production and what you learned.

Performance OptimizationEasy

Show answer

Situation: I removed what looked like an unused prop in a shared Button component. Task: after release, the payment page's disabled state broke. Action: I owned it immediately, rolled back, then fixed it and added a test plus a TypeScript type so the prop could not be removed silently. Result: the issue was live for under an hour, and I now search all usages and rely on types before deleting code.

What is the difference between controlled and uncontrolled components?

Props and StateEasy

Show answer

In a controlled component, the form value lives in React state and the input gets value and onChange props, so React is the single source of truth. In an uncontrolled component the DOM keeps the value and you read it with a ref or FormData when needed. Controlled inputs make validation and conditional UI easy; uncontrolled inputs are simpler and can perform better for large forms.

You see the error 'Rendered more hooks than during the previous render'. What is wrong?

React HooksEasy

Show answer

A hook is being called conditionally or after an early return, so the number of hooks changes between renders. For example, if (!user) return null; placed before a useState call. React matches hooks by call order, so this breaks. Move all hook calls to the top of the component before any condition or early return, and put the condition inside the hook logic instead.

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.

How do you handle a form with multiple controlled inputs using one change handler?

Routing and FormsEasy

Show answer

Use the input's name attribute to update the right field. function SignupForm() { const [form, setForm] = useState({ name: '', email: '', city: '' }); const handleChange = e => { const { name, value } = e.target; setForm(f => ({ ...f, [name]: value })); }; const handleSubmit = e => { e.preventDefault(); console.log(form); }; return ( <form onSubmit={handleSubmit}> <input name="name" value={form.name} onChange={handleChange} /> <input name="email" value={form.email} onChange={handleChange} /> <button>Submit</button> </form> ); }

A teammate writes setCount(count + 1) three times in a click handler and is surprised that the count increases by only one. Explain why.

Props and StateMedium

Show answer

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.

What is JSX and how does the browser understand it?

React FundamentalsEasy

Show answer

JSX is a syntax extension that lets you write HTML-like markup inside JavaScript. Browsers cannot run JSX directly, so a compiler such as Babel, SWC or esbuild (used by Vite) transforms it into calls like jsx('div', props) from react/jsx-runtime. JSX is just expressions, so you can embed values with curly braces, but attributes use camelCase names like className and onClick.

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.

What are keys in React lists and why are they required?

React FundamentalsEasy

Show answer

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.

What is prop drilling and how can you avoid it?

Props and StateEasy

Show answer

Prop drilling is passing props through several layers of components that do not use them, only to reach a deeply nested child. It makes code noisy and hard to refactor. Solutions include component composition (passing JSX as children so intermediate layers do not need the data), the Context API for app-wide values like theme or user, and state libraries such as Zustand or Redux Toolkit for complex shared state.

The linter shows a react-hooks/exhaustive-deps warning and a teammate wants to disable the rule. What do you advise?

React HooksMedium

Show answer

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.

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?

Props and StateMedium

Show answer

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.

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?

Props and StateMedium

Show answer

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.

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.

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.

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' }).

Show the common ways to do conditional rendering in React.

React FundamentalsEasy

Show answer

You can use if statements before return, the ternary operator, or logical AND. Be careful with && and numbers, because 0 is rendered. function Status({ user, count }) { if (!user) return <Login />; return ( <div> {user.isAdmin ? <AdminPanel /> : <Dashboard />} {count > 0 && <Badge count={count} />} </div> ); }

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?

React FundamentalsMedium

Show answer

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.

Write a simple counter component with increment, decrement and reset buttons.

React FundamentalsEasy

Show answer

A counter is the classic useState example. Use the functional updater so each click works on the latest value. import { useState } from 'react'; export default function Counter() { const [count, setCount] = useState(0); return ( <div> <h2>{count}</h2> <button onClick={() => setCount(c => c + 1)}>+</button> <button onClick={() => setCount(c => c - 1)}>-</button> <button onClick={() => setCount(0)}>Reset</button> </div> ); }

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.

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.

How do you return multiple elements from a component without adding an extra div?

React FundamentalsEasy

Show answer

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>)

What does lifting state up mean?

Props and StateEasy

Show answer

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.

Frequently asked questions

What does a React Developer do?

Which skills are tested in a React Developer interview?

Expect questions on JSX and components, React hooks, REST API integration, TypeScript basics, Git and pull requests. Most rounds also ask you to explain a project and solve one practical problem live.

How do I prepare for a React Developer interview?

Revise React Fundamentals, Props and State, React Hooks first using the topic sheets, practise the questions on this page aloud, then do one full mock interview to practise timing.

Topic sheets for this role

React Fundamentals questions Props and State questions React Hooks questions

Other roles

Frontend Developer MERN Stack Developer Next.js Developer Senior React Developer Frontend Architect

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