JavaScript React Interview Questions: Freshers to Experts

JavaScript React Interview Questions: Freshers to Experts

Whether you are about to sit for a front-end interview or you are the one asking the questions, a weak React round wastes everyone's time. Candidates memorize definitions and freeze when asked why. Interviewers reuse the same five questions and cannot tell a fresher from a five-year developer. This guide covers JavaScript React interview questions that actually separate the two.

Here is the short answer. Expect JSX, props, state, and the virtual DOM at the fresher level. At the experienced level, expect hooks, performance tuning, and state management trade-offs. Strong answers are short, accurate, and backed by a small example from real work.

Below you will find react js interview questions and answers grouped by level: fundamentals, hooks, advanced topics, and senior-level design questions. Each answer is written to be spoken aloud in under a minute. At Olibr, we help recruiters screen and hire developers faster, so we also note what a good answer looks like. That makes this list useful for candidates and hiring teams alike.

1. React fundamentals, JSX, and the virtual DOM

Every round starts here, and it is where react js interview questions for freshers do most of their filtering. Interviewers are not hunting for trivia. They want to know whether you understand what React does for you and why it works the way it does.

Core questions to expect

• What is React, and how does it differ from a framework like Angular?
• What is JSX, and can you use React without it?
• What is the virtual DOM, and how does reconciliation work?
• Why must a component return a single root element or a Fragment?
• What is the difference between an element and a component?

Most interview questions on react js at this level end with the same follow-up: is the virtual DOM faster than the real DOM? Have your answer ready before you walk in.

Sample answers and what interviewers look for

React is a JavaScript library for building user interfaces out of components. It owns the view layer only, so you choose routing and data fetching yourself. Angular is a full framework that makes those choices for you.

JSX is syntax that compiles into function calls. The browser never sees it, and you can write React without it, though nobody wants to.

const el = <h1 className="title">Hi</h1>;
// roughly equivalent to
const el = React.createElement("h1", { className: "title" }, "Hi");

The virtual DOM is a lightweight JavaScript representation of the UI. When state changes, React builds a new tree, compares it with the previous one, and applies only the minimal set of real DOM updates. That comparison is called reconciliation.

The virtual DOM is not magic speed, it is a way to make UI updates declarative and batched.

Good candidates use the word "declarative" unprompted and explain that you describe the UI for a given state instead of mutating nodes by hand. Interviewers also listen for precision over buzzwords. A short, correct answer with one example beats a long one that wanders.

Common mistakes to avoid

• Claiming the virtual DOM is always faster than direct DOM updates. It is not.
• Calling JSX "HTML in JavaScript" and ignoring className, camelCase attributes, and {} expressions.
• Describing React as a framework without explaining what it leaves out.

Beyond these, watch for candidates who recite definitions but cannot write a small component from memory. If you are interviewing, ask for a ten-line component. If you are the candidate, practice typing one without autocomplete, because that is exactly what a whiteboard or screen-share round will demand.

2. Components, props, and state

Next comes the part of interview questions for react js that shows whether you can build real screens. Components, props, and state are the daily vocabulary, so vague answers get noticed fast and strong ones set the tone for the rest of the round.

Core questions to expect

• What is the difference between a function component and a class component?
• What are props, and why are they read-only?
• What is state, and how does it differ from props?
• What does "lifting state up" mean?
• Why should you never mutate state directly?

Expect a follow-up like "where would you put this state?" Interviewers use it to test your component design instincts and your grasp of one-way data flow.

Sample answers and what interviewers look for

Props are inputs passed from parent to child, and a component must never modify them. State is data a component owns and can change, and changing it triggers a re-render. When two siblings need the same data, you lift state to their closest common parent.

function Counter() {
  const [count, setCount] = useState(0);
  return <button => setCount(c => c + 1)}>{count}</button>;
}

Props are inputs, state is memory, and neither should ever be mutated directly.

Strong candidates explain that React compares references, so mutating an array or object in place can skip the update. They also use the functional updater form when new state depends on old state. Many react js interview questions for experience build on exactly this point.

Common mistakes to avoid

• Copying props into state without a reason, which creates stale data.
• Calling setCount(count + 1) twice and expecting +2 in one render.
• Using push on a state array instead of creating a new array.

Avoid answering "state is just a variable." Say that state persists between renders, which ordinary variables do not, and that props are owned by the parent, not the child receiving them.

3. Lists, keys, and conditional rendering

Rendering data is the bread and butter of js react interview questions, and keys are the topic that quietly shows who has built real, changing screens. Almost every round touches it.

Core questions to expect

• How do you render a list in React?
• Why does a list item need a key prop?
• Is using the array index as a key acceptable?
• What are the ways to render conditionally?
• Why does {count && <Item />} sometimes print 0?

Interviewers love the last one because it catches people who only watched tutorials. It also tests whether you know what JSX can actually render.

Sample answers and what interviewers look for

You render lists with map(), returning one element per item. The key lets React identify which items changed, moved, or were removed during reconciliation. Keys must be stable and unique among siblings.

{users.map(u => <li key={u.id}>{u.name}</li>)}

A key is an identity, not a position, and React uses it to decide what to keep and what to destroy.

Index keys are fine only for static lists that never reorder or filter. In dynamic lists, state such as typed input attaches to the wrong row. For conditions, use a ternary, &&, or an early return. With &&, a left side of 0 renders as text, so write count > 0 && <Item />. Strong candidates mention both points without being prompted.

Common mistakes to avoid

• Using Math.random() as a key, which remounts every item on each render.
• Using index keys on lists that can be sorted, filtered, or reordered.
• Writing {items.length && ...} and showing a stray 0.

Finally, watch for answers that treat the key warning as noise. A candidate who silences the console warning instead of fixing the cause rarely debugs well under pressure.

4. Events, forms, and controlled components

Forms show whether a candidate really understands React's data flow, so interview questions in react js almost always include one. Expect a small coding task, such as a login form with validation and a disabled submit button.

Core questions to expect

These come up in nearly every screening round:

• What is a synthetic event in React?
• Why write onClick={handle} and not onClick={handle()}?
• What is a controlled component, and how does it differ from an uncontrolled one?
• How do you stop a form from reloading the page on submit?
• When is an uncontrolled input the better choice?

Sample answers and what interviewers look for

A synthetic event is React's cross-browser wrapper around the native event. You pass a function reference, because calling it in JSX runs it during render. A controlled component has its value driven by state, and onChange updates that state.

const [email, setEmail] = useState("");
<input value={email} => setEmail(e.target.value)} />

In a controlled input, React state is the single source of truth, not the DOM.

Uncontrolled inputs keep their value in the DOM and you read it through a ref. That suits file inputs or simple one-off forms. For react js interview questions for experienced roles, expect follow-ups on form libraries like React Hook Form and why they avoid re-rendering on every keystroke.

Common mistakes to avoid

• Forgetting e.preventDefault() in a submit handler.
• Setting value without onChange, which makes the input read-only.
• Switching an input between undefined and a string, which triggers the controlled-to-uncontrolled warning.

Finally, listen for candidates who put every field in its own useState with no plan for validation. A single state object, or a form library, shows they have built a real form before.

5. Class components and lifecycle methods

Hooks dominate new code, yet plenty of production apps still run on classes, so react javascript interview questions keep asking about them. Interviewers use this topic to check whether you can read and maintain older code, not whether you prefer it.

Core questions to expect

• What are the three lifecycle phases of a class component?
• What do componentDidMount, componentDidUpdate, and componentWillUnmount do?
• Why call super(props) in a constructor?
• Why do event handlers need binding or arrow functions?
• Where would you fetch data in a class component?

Sample answers and what interviewers look for

A class component goes through mounting, updating, and unmounting. You fetch data in componentDidMount, react to changed props in componentDidUpdate, and clean up timers and listeners in componentWillUnmount. Handlers lose this when passed as callbacks, so bind them or use class fields.

Lifecycle methods are about when code runs, while useEffect is about what the code depends on.

Strong candidates say the mapping is not one to one. Those aiming at react js interview questions for 5 years experience should also mention that error boundaries still require a class, through getDerivedStateFromError.

Common mistakes to avoid

• Calling setState inside render, which causes an infinite loop.
• Reading this.state right after setState and expecting the new value.
• Forgetting to remove subscriptions in componentWillUnmount.

One more warning sign: candidates who call classes "obsolete" and stop there. A good answer respects the legacy code and still explains why teams migrate.

6. Basic hooks: useState, useEffect, and rules of hooks

Hooks are where react js interview questions for fresher candidates turn into live coding. You will write a component, not recite a definition. Interviewers mainly want to see that you know when effects run and why.

Core questions to expect

These show up in almost every screening:

• What problem did hooks solve?
• How does useState work, and is the update synchronous?
• What does the dependency array in useEffect do?
• How do you clean up an effect?
• What are the rules of hooks, and why do they exist?

Sample answers and what interviewers look for

useState returns the current value and a setter. Updates are batched and applied on the next render, so the variable does not change mid-function. useEffect runs after render and re-runs only when a value in its dependency array changes.

useEffect(() => {
  const id = setInterval(tick, 1000);
  return () => clearInterval(id);
}, []);

Hooks rely on call order, so call them at the top level, never inside loops or conditions.

React tracks hooks by the order they are called. That is why you can only call them from function components or custom hooks. Strong candidates also mention the exhaustive-deps ESLint rule and explain that an empty array means run once on mount.

Common mistakes to avoid

• Leaving out dependencies, which creates stale closures.
• Putting an object or array literal in the dependency array, which re-runs the effect every render.
• Passing an async function straight to useEffect.

Also watch for candidates who use effects to compute derived values. If a value can be calculated from props and state, calculate it during render. Skipping that extra state and effect is simpler and avoids an extra render.

7. Advanced hooks: useRef, useMemo, useCallback, useReducer

This is where react js advanced interview questions begin, and where candidates who only memorized useState get exposed. Interviewers want to hear when you reach for each hook and, just as important, when you skip it.

Core questions to expect

These questions test judgment more than syntax. Expect a mix of definitions and trade-offs in any round of javascript react interview questions at this level.

• What is useRef, and does changing it trigger a re-render?
• What does useMemo do, and when is it worth using?
• How does useCallback differ from useMemo?
• When would you pick useReducer over useState?

Sample answers and what interviewers look for

A ref is a mutable box that survives renders without causing one. Use it for DOM nodes, timers, or the previous value of a prop. The other three hooks are easiest to explain side by side.

Memoization is a performance tool you measure first, not a default you sprinkle everywhere.

Strong candidates add that useCallback only pays off when the child is wrapped in React.memo. They also say useReducer makes state transitions predictable and testable, because the logic lives in one pure function.

Common mistakes to avoid

• Wrapping every function and value in useCallback or useMemo, which adds cost and noise.
• Updating ref.current during render and expecting the screen to change.
• Mutating state inside a reducer instead of returning a new object.

Finally, be wary of anyone who treats these hooks as free speed-ups. A good candidate can name a case where they profiled first and removed a memo because it did nothing.

8. Custom hooks and component composition

This topic separates developers who use React from developers who design with it. Among javascript react interview questions, it is a mid-level favorite because the answers show how you reuse logic and how you structure components.

Core questions to expect

• What is a custom hook, and how does it differ from a regular function?
• Why must a custom hook's name start with use?
• Do two components calling the same custom hook share state?
• What is composition, and why does React prefer it to inheritance?
• When would you use the children prop instead of render props?

Sample answers and what interviewers look for

A custom hook is a function that calls other hooks to package reusable stateful logic. Each call gets its own state, so components using the same hook never share data. The use prefix lets linters enforce the rules of hooks.

function useToggle(initial = false) {
  const [on, setOn] = useState(initial);
  const toggle = useCallback(() => setOn(v => !v), []);
  return [on, toggle];
}

A custom hook shares logic, never state.

Composition means building UIs by nesting components and passing children or other components as props. It keeps components small and avoids deep inheritance chains. Strong candidates also point out that composition often removes the need for prop drilling, because you can pass a ready-made element down instead of raw data.

Common mistakes to avoid

• Extracting a hook that wraps one useState and adds nothing.
• Calling a custom hook conditionally, which breaks call order.
• Returning a new object or function every render, which defeats React.memo downstream.

Watch for candidates who cannot name a hook they wrote. Good answers cite something real, such as useDebounce, useFetch, or useLocalStorage, and explain what problem it removed from the components.

9. Context API, prop drilling, and state management

State placement is where javascript react interview questions start to feel like design reviews. Interviewers want to see that you can choose the lightest tool for sharing data, not that you can name every library.

Core questions to expect

Expect these in most mid-level rounds:

• What is prop drilling, and why is it a problem?
• How does the Context API work?
• Does a context change re-render every consumer?
• When would you pick Redux, Zustand, or React Query over context?
• What is the difference between server state and client state?

Sample answers and what interviewers look for

Prop drilling means passing props through components that do not use them. Context fixes that by letting a provider expose a value to any descendant that calls useContext.

const ThemeContext = createContext("light");

function Toolbar() {
  const theme = useContext(ThemeContext);
  return <div className={theme}>...</div>

;
}

Context is a way to deliver state, not a way to manage it.

Strong candidates add that every consumer re-renders when the provider value changes, so context suits slow-changing data such as theme, locale, or the signed-in user. For frequent updates, they reach for an external store. They also separate server state, which tools like React Query cache and refetch, from client state such as an open modal. That split comes up in many react js interview questions and answers about architecture.

Common mistakes to avoid

• Passing a new object literal as the provider value on every render.
• Putting all app state into one giant context.
• Reaching for Redux when two components share a single form.

Lastly, be wary of anyone who says "context replaces Redux" or the reverse. A good answer names the trade-off and points to a project where they made the call.

10. React Router and navigation

Routing shows up in most javascript react interview questions for mid-level roles. Interviewers use it to check that you understand client-side navigation, not just the syntax of one router version.

Core questions to expect

Version matters here, so confirm whether the team runs v6 or v7 before you answer.

• How does client-side routing differ from server-side routing?
• What is the difference between <Link> and an <a> tag?
• How do you read URL params and query strings?
• What are nested routes and <Outlet>?
• How do you build a protected route?

Sample answers and what interviewers look for

Client-side routing means the router intercepts link clicks, updates the URL through the History API, and renders the matching component without a reload. A plain <a> causes a full page reload and wipes your state. Use useParams for path segments and useSearchParams for query strings.

function RequireAuth({ user }) {
  return user ? <Outlet /> : <Navigate to="/login" replace />;
}

A router maps the URL to the UI, so the URL becomes part of your app state.

Strong candidates also mention data loaders in v6.4 and later. They add that a client-side guard is not real security, because the API must enforce access itself.

Common mistakes to avoid

• Using <a href> for internal links.
• Calling navigate() during render instead of inside a handler or effect.
• Treating a route guard as authorization.

Finally, ask candidates to deep link into a nested page and refresh. Anyone who has shipped a real app knows the server must serve index.html for unknown paths, and they will say so without a hint.

11. Performance optimization and re-rendering

Performance is where react js interview questions get practical. Interviewers want to know if you can find a slow screen, explain why it re-renders, and fix it without guessing.

Core questions to expect

• When does a React component re-render?
• What does React.memo do, and when does it fail?
• How do you keep a long list fast?
• What is code splitting, and how do React.lazy and Suspense help?
• How do you find a performance bottleneck?

Sample answers and what interviewers look for

A component re-renders when its state changes, its parent re-renders, or a context it reads changes. React.memo skips the render when props are shallowly equal, so it fails if you pass a new object or function literal every time. For long lists, use virtualization with a library like react-window so only visible rows mount.

const Chart = React.lazy(() => import("./Chart"));

<Suspense fallback={<Spinner />}>
  <Chart />
</Suspense>

Measure with the React DevTools Profiler first, then optimize the one component that is actually slow.

Strong candidates mention code splitting to shrink the initial bundle. They also describe reading the Profiler's flame graph to see which commit was slow and why, instead of memoizing by instinct.

Common mistakes to avoid

• Wrapping every component in React.memo, which adds comparison cost for no gain.
• Defining a component inside another component, which remounts it on every render.
• Keeping fast-changing values, like typed text, in a high-level state or context.

Finally, ask for a real story. A good candidate describes a screen that felt slow, what the Profiler showed, and the measured improvement after the fix.

12. Higher-order components, error boundaries, and patterns

Pattern questions reveal whether you have maintained a large codebase. Among javascript react interview questions, this group targets mid-level and senior roles, because HOCs and error boundaries still live in production code.

Core questions to expect

• What is a higher-order component?
• Would you write a HOC or a custom hook today?
• What is an error boundary, and why must it be a class?
• Which errors does a boundary not catch?
• What are render props and compound components?

Sample answers and what interviewers look for

A higher-order component is a function that takes a component and returns a new one with added behavior, such as withAuth. Hooks replace most HOCs now, but HOCs still wrap components you cannot edit.

class ErrorBoundary extends React.Component {
  state = { failed: false };
  static getDerivedStateFromError() { return { failed: true }; }
  componentDidCatch(error, info) { logError(error, info); }
  render() { return this.state.failed ? <p>Something broke.</p> : this.props.children; }
}

An error boundary contains a crash to one part of the tree, so the rest of the screen survives.

Boundaries catch errors thrown during rendering and in lifecycle methods below them. They skip event handlers, async code, and server rendering. Strong candidates mention the react-error-boundary package and place boundaries around routes and widgets, not only at the root.

Common mistakes to avoid

• Creating a HOC inside render, which remounts the wrapped component every time.
• Expecting a boundary to catch errors thrown in a click handler.
• Showing a fallback but never logging the error.
• Reaching for a HOC when a custom hook is simpler.

Ask for a trade-off, not a definition. A good candidate explains why render props and HOCs create wrapper nesting and when a hook removed it.

13. Testing React applications

Testing questions show whether a candidate ships code with confidence. In javascript react interview questions for experienced roles, this topic appears because teams want people who protect behavior, not implementation. Freshers usually get a lighter version.

Core questions to expect

• What is the difference between unit, integration, and end-to-end tests?
• Why does React Testing Library favor queries by role and text?
• How do you test a component that fetches data?
• When do you use getBy, queryBy, and findBy?
• How do you test a custom hook?

Sample answers and what interviewers look for

React Testing Library renders a component and queries it the way a user sees it, so tests survive refactors. Jest or Vitest runs them. For async UI, use findBy, which waits, and mock the network with Mock Service Worker instead of stubbing fetch by hand.

test("shows error on empty email", async () => {
  const user = userEvent.setup();
  render(<LoginForm />);
  await user.click(screen.getByRole("button", { name: /submit/i }));
  expect(await screen.findByText(/email is required/i)).toBeInTheDocument();
});

Test what the user sees and does, not how the component is built inside.

Strong candidates explain that getBy throws when nothing matches, while queryBy returns null so you can assert that something is absent. They test hooks with renderHook and keep Playwright or Cypress for a few critical end-to-end flows, such as login and checkout.

Common mistakes to avoid

• Asserting on internal state or method calls instead of rendered output.
• Relying on snapshot tests as the only coverage.
• Forgetting await on async queries, which makes tests flaky.
• Querying by class name before trying roles and labels.

Ask what a candidate does when a test fails randomly. Good answers point to missing awaits, shared state between tests, or real timers, and they fix the cause instead of adding retries.

14. React 18 and 19 features, Server Components, Compiler

Few javascript react interview questions age as fast as this group. Interviewers use it to check that your knowledge is current, because answers that stop at React 16 are easy to spot.

Core questions to expect

Expect a mix of concepts and "which would you use" prompts:

• What changed with createRoot and automatic batching in React 18?
• What do useTransition and useDeferredValue do?
• What is a Server Component, and how does it differ from a Client Component?
• What are Actions, useActionState, and useOptimistic in React 19?
• What does the React Compiler replace?

Sample answers and what interviewers look for

React 18 introduced concurrent rendering, so React can pause low-priority work. useTransition marks an update as non-urgent, which keeps typing responsive while a heavy list filters. Automatic batching now groups updates inside timeouts and promises too.

Server Components move work to the server, they do not replace client interactivity.

Strong candidates add that Server Components cannot use state or effects. They also say the Compiler makes most manual useMemo and useCallback calls unnecessary, though not all of them. In React 19, ref is a regular prop, so forwardRef is rarely needed.

Common mistakes to avoid

Most errors here come from mixing up old and new ideas:

• Calling Server Components the same thing as server-side rendering. SSR still ships and hydrates JavaScript.
• Adding "use client" to every file, which cancels the benefit.
• Saying the Compiler means you can ignore how re-renders work.
• Claiming React 19 removed class components. It did not.

15. Questions for 5+ years of experience and scenarios

At this level, react js interview questions for 5 years experience stop asking what a hook is. They ask what you decided, what it cost, and what you would change. Expect scenarios, not definitions.

Core questions to expect

• How would you structure a large React app that several teams work in?
• A page re-renders constantly and feels slow. How do you diagnose it?
• How do you choose between client rendering, SSR, and Server Components?
• How would you move a class-based codebase to hooks without a rewrite?
• How do you handle data fetching, caching, and errors at scale?

Many rounds end with "tell me about a bug you shipped." Prepare one honest story with a clear lesson.

Sample answers and what interviewers look for

Start with the constraint, not the tool. For the slow page, say you reproduce it, profile with the React DevTools Profiler, find the slowest commit, and fix the cause, such as state held too high. For the migration, convert incrementally: write new components as functions, move leaf components first, and leave stable classes alone.

Senior answers name the trade-off, the evidence, and the outcome, in that order.

Listen for ownership. Say what you measured, what you chose, what it cost, and what changed. Many interview questions react js seniors face also test whether you can explain a decision to a non-engineer, so practice that.

Common mistakes to avoid

• Listing tools without saying why you picked them.
• Saying only "we" and never naming your own contribution.
• Proposing a full rewrite as the first answer.
• Reaching for useMemo before measuring anything.

Finally, do not inflate your experience. Interviewers probe one level deeper, and a vague story collapses fast. Pick two real projects and rehearse the details before the call.

Preparing for your React interview

Good preparation for javascript react interview questions comes down to one habit: explain the why, then show a small example. Whether the topic is keys, hooks, or Server Components, interviewers reward short, accurate answers over long memorized ones.

Candidates should pick two real projects, rehearse the details, and type a few components from memory. Spend extra time on hooks and re-rendering, because those two areas decide most rounds.

If you are the one hiring, treat the common-mistakes lists as a scoring guide and ask for a trade-off story at every level. When you are ready to find people who can pass this bar, you can hire React developers in India with AI screening and a free ATS to manage the pipeline.

For engineers

Find work worth your time.

Live engineering roles across India and the US, matched to your stack. Build a profile recruiters actually discover.

Browse jobsHow it works