React Developer Interview Questions 2026

You finally got the React interview invite, and now your brain is doing that annoying thing where it remembers useState, forgets closures, and suddenly thinks every question will be about Fiber internals. Relax. Most React developer interviews in 2026 are not trying to destroy you, they are trying to figure out if you can build real features, debug weird UI bugs, work with APIs, and not accidentally rerender the whole app every time someone types into a search box.

React Developer Interview Questions 2026: What Companies Actually Ask#

If you are applying to companies like Meta, Shopify, Booking.com, Klarna, Revolut, Spotify, Amazon, Zalando, or smaller SaaS teams, the React interview usually has a few predictable parts.

You will often face:

1. JavaScript fundamentals
2. React core concepts
3. Hooks and state management
4. Performance questions
5. Testing
6. API and async handling
7. TypeScript
8. Architecture and real-world debugging
9. Behavioral questions
10. A live coding or take-home task

For salary context, React developers are still paid well in 2026, especially if you know TypeScript, Next.js, testing, and performance basics.

Typical salary ranges:

• United States junior React developer: $75k to $105k
• United States mid-level React developer: $105k to $145k
• United States senior React developer: $145k to $210k
• Germany React developer: €55k to €95k
• Netherlands React developer: €60k to €105k
• Ireland React developer: €65k to €115k
• United Kingdom React developer: £45k to £95k
• Remote EU senior React roles: €80k to €130k

At companies like Meta, Netflix, Stripe, Datadog, and Airbnb, total compensation can go much higher, especially in the US. But even at regular product companies, React is still a strong career bet.

How React Interviews Changed in 2026#

React interviews are less about memorizing class lifecycle methods now. You might still get asked about them if the company has older code, but most teams care more about modern React.

In 2026, expect more questions about:

• React Server Components
• Next.js App Router
• Client vs server rendering
• Suspense
• State management tradeoffs
• TypeScript patterns
• Accessibility
• Performance profiling
• Testing user behavior
• AI-assisted coding workflows

The big shift is this: companies want developers who can reason. Not just someone who can say, “use useMemo.”

If you can explain why something rerenders, where data should live, and how you would debug a production issue, you are already ahead of many candidates.

Basic React Interview Questions#

Let’s start with the questions that show up everywhere.

1. What is React?

React is a JavaScript library for building user interfaces. It lets you create reusable components that manage their own state and render UI based on data.

A good interview answer sounds like this:

“React is a component-based UI library. It helps developers build interactive interfaces by breaking the UI into small reusable pieces. React uses a virtual representation of the UI and updates the browser efficiently when state or props change.”

You do not need to make it sound fancy. Keep it clear.

2. What are components in React?

Components are reusable building blocks of a React app.

They can be:

• Function components
• Class components, mostly legacy now
• Server components in frameworks like Next.js
• Client components when interactivity is needed

Example:

function Button({ label, onClick }) {
  return <button onClick=\{onClick\}>\{label\}</button>;
}

A strong answer mentions props, reusability, and composition.

3. What is JSX?

JSX is a syntax extension that lets you write UI code that looks like HTML inside JavaScript.

Example:

const title = <h1>Hello React</h1>;

JSX gets transformed into JavaScript function calls. In modern React tooling, you usually do not manually import React just to write JSX.

4. What are props?

Props are inputs passed from a parent component to a child component.

They are read-only from the child’s perspective.

Example:

function UserCard({ name, role }) {
  return <p>\{name\} works as a \{role\}</p>;
}

You can say:

“Props allow data to flow down the component tree. If a child needs to change something, it usually calls a function passed down from the parent.”

5. What is state?

State is data that belongs to a component and can change over time. When state changes, React rerenders the component.

Example:

const [count, setCount] = useState(0);

A nice answer:

“State should be used for data that affects rendering and changes during the component lifecycle, like form input, selected tabs, loading flags, or fetched data.”

React Hooks Interview Questions#

Hooks are interview favorites because they reveal whether you have actually built React apps.

6. What is useState?

useState lets a function component store and update local state.

Example:

const [email, setEmail] = useState("");

Common follow-up:

“What happens when you call the setter?”

Answer:

React schedules a state update. The component rerenders with the new value. State updates can be batched, so you should not always expect the state value to change immediately in the same synchronous line.

7. What is useEffect?

useEffect runs side effects after render.

Common use cases:

• Fetching data
• Subscribing to events
• Updating document title
• Setting timers
• Syncing with external systems

Example:

useEffect(() => {
  document.title = `Count: $\{count\}`;
}, [count]);

A strong interview answer mentions the dependency array.

If the dependency array is empty, the effect runs after the first render. If it includes values, it reruns when those values change. If there is no dependency array, it runs after every render.

8. What is the cleanup function in useEffect?

The cleanup function runs before the effect reruns and when the component unmounts.

Example:

useEffect(() => {
  const id = setInterval(() => {
    console.log("tick");
  }, 1000);

  return () => clearInterval(id);
}, []);

You use cleanup for:

• Clearing timers
• Removing event listeners
• Canceling subscriptions
• Avoiding memory leaks

9. What is the difference between useMemo and useCallback?

useMemo memoizes a computed value.

useCallback memoizes a function reference.

Example:

const total = useMemo(() => calculateTotal(items), [items]);

const handleClick = useCallback(() => {
  sendAnalytics(id);
}, [id]);

A good answer says:

“I do not use them everywhere. I use them when there is a real performance reason, like expensive calculations or preventing unnecessary rerenders in memoized child components.”

That answer sounds like someone who has been burned before. Hiring managers like that.

10. What is useRef used for?

useRef stores a mutable value that does not trigger a rerender when it changes.

Common uses:

• Accessing DOM elements
• Storing timer IDs
• Keeping previous values
• Holding mutable instance-like data

Example:

const inputRef = useRef(null);

function focusInput() {
  inputRef.current.focus();
}

Important line:

“Changing ref.current does not rerender the component.”

Intermediate React Interview Questions#

Now we get into the stuff that separates “I watched a tutorial” from “I can ship features.”

11. What causes a React component to rerender?

A component rerenders when:

1. Its state changes
2. Its parent rerenders
3. Its context value changes
4. A hook it uses triggers an update
5. External store subscriptions notify it

A clean answer:

“Rerendering does not always mean the DOM changes. React can rerender components and then decide the actual DOM does not need updates.”

That little distinction makes you sound much more senior.

12. What is the virtual DOM?

The virtual DOM is an in-memory representation of the UI. React compares the new version with the previous version and figures out what needs to change in the real DOM.

Do not over-explain it. Many senior engineers will roll their eyes if you act like the virtual DOM is magic.

Say this instead:

“It is an implementation detail that helps React manage UI updates. The more important thing for day-to-day work is understanding render behavior, keys, state location, and expensive component trees.”

13. Why are keys important in React lists?

Keys help React identify which list items changed, were added, or were removed.

Example:

users.map(user => <UserRow key={user.id} user=\{user\} />);

Avoid using array indexes as keys when list order can change.

Using indexes can cause bugs with:

• Input values moving to the wrong row
• Animation glitches
• Incorrect preserved component state
• Weird UI behavior after sorting or filtering

14. What is prop drilling?

Prop drilling happens when you pass props through multiple layers of components that do not actually need them, just to reach a deeply nested child.

Solutions include:

• Component composition
• React Context
• State management libraries
• Moving state closer to where it is needed
• Custom hooks

A good answer adds:

“I do not reach for global state immediately. Sometimes composition is enough.”

15. What is React Context?

Context lets you pass data through the component tree without passing props manually at every level.

Common uses:

• Theme
• Auth user
• Locale
• Feature flags
• App settings

But context is not always the best choice for frequently changing state. If a context value changes often, many consumers may rerender.

In interviews, say:

“Context is great for shared app-level data, but I am careful with performance when the value updates frequently.”

Advanced React Interview Questions#

These are more common for senior React developer roles, especially at companies paying $150k plus in the US or €90k plus in Europe.

16. What is reconciliation?

Reconciliation is the process React uses to compare the previous rendered tree with the next one and decide what needs to change.

React uses assumptions to make this efficient:

1. Different element types produce different trees
2. Keys help match children across renders
3. Component identity matters

This matters in real work because changing keys or component structure can cause React to remount components and lose state.

17. What is React Fiber?

React Fiber is React’s internal rendering architecture. It allows React to split rendering work into units, prioritize updates, pause work, resume work, and support features like concurrent rendering.

A simple interview answer:

“Fiber is the internal architecture that lets React schedule rendering work more flexibly. I do not usually work with Fiber directly, but it helps explain why React can prioritize urgent updates like typing over less urgent UI updates.”

That is enough for most interviews.

18. What is concurrent rendering?

Concurrent rendering means React can prepare multiple versions of the UI and interrupt lower-priority rendering work when something more important happens.

Example:

If a user types in a search box while a heavy list is updating, React can prioritize keeping the input responsive.

Related APIs:

• startTransition
• useTransition
• useDeferredValue
• Suspense

19. What is useTransition?

useTransition lets you mark some updates as non-urgent.

Example:

const [isPending, startTransition] = useTransition();

function handleSearch(value) {
  setInput(value);

  startTransition(() => {
    setQuery(value);
  });
}

The urgent update is the input value. The non-urgent update is the expensive search result rendering.

Good explanation:

“It helps keep the UI responsive when an update may take longer, like filtering a large list or switching tabs with expensive content.”

20. What is Suspense?

Suspense lets components wait for something before rendering, usually data or code.

Common uses:

• Lazy loading components
• Showing fallback UI
• Streaming UI with frameworks
• Data fetching in supported setups

Example:

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

In 2026, Suspense is especially important if the role uses Next.js, Remix, or modern server rendering.

React Server Components and Next.js Interview Questions#

A lot of React jobs are really Next.js jobs wearing a React hoodie. If the job description mentions Vercel, App Router, SEO, server rendering, or full-stack React, prepare for these.

21. What are React Server Components?

React Server Components render on the server and send a special payload to the client. They do not ship their JavaScript to the browser by default.

They are useful for:

• Fetching data closer to the database
• Reducing client bundle size
• Keeping secrets on the server
• Improving initial load performance

You cannot use client-only hooks like useState or useEffect inside a server component.

22. What is the difference between server components and client components?

Server components:

• Run on the server
• Can access server-side resources
• Do not use browser APIs
• Do not use useState or useEffect
• Help reduce client JavaScript

Client components:

• Run in the browser
• Support interactivity
• Can use hooks
• Can access browser APIs
• Need "use client" in Next.js App Router

A practical answer:

“I try to keep components server-side by default, then move only interactive pieces to client components.”

23. What is hydration?

Hydration is the process where React attaches event listeners and makes server-rendered HTML interactive in the browser.

Hydration issues happen when the server-rendered HTML does not match what the client expects.

Common causes:

• Rendering dates differently on server and client
• Using random values during render
• Accessing window too early
• Locale differences
• Auth state mismatch

24. How do you improve React app performance?

You can improve performance by:

1. Keeping state local when possible
2. Avoiding unnecessary global state updates
3. Splitting code with lazy loading
4. Memoizing expensive calculations only when needed
5. Using proper keys
6. Virtualizing long lists
7. Reducing client bundle size
8. Profiling before guessing
9. Avoiding huge context values that update often
10. Moving work to the server when appropriate

Tools to mention:

• React DevTools Profiler
• Chrome Performance panel
• Lighthouse
• WebPageTest
• Sentry Performance
• Datadog RUM

Real example:

“At Shopify, Zalando, or any high-traffic ecommerce company, shaving 300ms off product page interaction can matter because slow UI hurts conversion.”

JavaScript Questions React Developers Still Get#

React interviews are often JavaScript interviews in disguise. You cannot skip the basics.

25. What is a closure?

A closure happens when a function remembers variables from its outer scope even after that outer function has finished running.

Example:

function createCounter() {
  let count = 0;

  return function increment() {
    count += 1;
    return count;
  };
}

Closures matter in React because hooks and event handlers often capture values from render.

26. What is the difference between let, const, and var?

Short version:

• const cannot be reassigned
• let can be reassigned
• var is function-scoped and hoisted in ways that can cause bugs
• let and const are block-scoped

In React code, you mostly use const, then let when reassignment is needed.

27. What is event bubbling?

Event bubbling means an event starts at the target element and then moves up through parent elements.

Example:

Clicking a button inside a card can trigger both the button click handler and the card click handler unless you stop propagation.

<button onClick={(e) => e.stopPropagation()}>
  Delete
</button>

28. What are promises and async/await?

A promise represents a value that may be available now, later, or never.

async/await makes promise-based code easier to read.

Example:

async function loadUser() {
  const response = await fetch("/api/user");
  const user = await response.json();
  return user;
}

Interviewers may ask how you handle errors:

try {
  const user = await loadUser();
} catch (error) {
  console.error(error);
}

TypeScript React Interview Questions#

Many React roles in 2026 expect TypeScript. Even startups now ask for it because it reduces silly bugs.

29. How do you type props in React?

Example:

type ButtonProps = {
  label: string;
  disabled?: boolean;
  onClick: () => void;
};

function Button({ label, disabled, onClick }: ButtonProps) {
  return (
    <button disabled=\{disabled\} onClick=\{onClick\}>
      \{label\}
    </button>
  );
}

Mention optional props, function types, and avoiding any unless there is a very good reason.

30. What is the difference between type and interface?

Both can describe object shapes.

Common answer:

“I usually use type for unions and utility types, and interface when I expect extension. In many React codebases, either is acceptable if the team is consistent.”

That last part matters. Teams care about consistency.

31. How do you type children?

Example:

import type { ReactNode } from "react";

type CardProps = {
  children: ReactNode;
};

function Card({ children }: CardProps) {
  return <div>\{children\}</div>;
}

Avoid overcomplicating it unless the interviewer asks about stricter child types.

React Testing Interview Questions#

You do not need to be a QA engineer, but you should know how to test user behavior.

32. What tools do you use for React testing?

Common tools:

• Jest
• Vitest
• React Testing Library
• Playwright
• Cypress
• Storybook
• Mock Service Worker

A good answer:

“I prefer testing behavior instead of implementation details. For example, I test that a user can submit a form and see a success message, not that a specific state setter was called.”

33. What is React Testing Library’s philosophy?

React Testing Library encourages testing components the way users interact with them.

That means you query by:

• Role
• Label text
• Placeholder text
• Visible text
• Alt text

Example:

expect(screen.getByRole("button", { name: /submit/i })).toBeInTheDocument();

This also pushes you toward more accessible UI.

34. What would you test in a login form?

Good test cases:

1. Email and password fields render
2. Submit button is disabled when inputs are invalid
3. Validation messages appear
4. API error shows to the user
5. Successful login redirects or updates UI
6. Loading state appears during submission
7. Password manager and accessibility basics work

This is a very common practical interview scenario.

State Management Interview Questions#

State management is where candidates often ramble. Keep your answer grounded.

35. When would you use local state vs global state?

Use local state for:

• Form fields
• Dropdown open state
• Modal visibility
• Selected tab
• Temporary UI state

Use global state for:

• Auth user
• Theme
• Shopping cart
• Feature flags
• Shared data used across distant parts of the app

Good line:

“I start local, then lift state only when multiple components need it.”

36. Redux, Zustand, Jotai, React Query, or Context?

Here is a simple way to explain it:

• Redux Toolkit: great for larger apps with structured state and debugging needs
• Zustand: lightweight global state with simple API
• Jotai: atom-based state, good for flexible shared state
• React Query or TanStack Query: best for server state like API data, caching, retries, and loading states
• Context: good for low-frequency shared values

Important distinction:

“Server state and client state are different. API data should often be handled by TanStack Query instead of manually stuffing everything into Redux.”

That answer wins points.

Common React Coding Interview Tasks#

You may get a live coding challenge. Most are not impossible, they are just stressful because someone is watching you type.

37. Build a todo list

Expected features:

1. Add item
2. Delete item
3. Mark complete
4. Filter active and completed
5. Persist to localStorage, sometimes
6. Basic accessibility

They are checking:

• State updates
• Controlled inputs
• List keys
• Component structure
• Edge cases

38. Build a searchable list

Common requirements:

• Fetch users from an API
• Show loading and error states
• Filter by search input
• Debounce input
• Show empty state

Nice improvement:

Use useMemo for filtered results only if the list is large enough to justify it.

39. Build a modal

They may check:

• Escape key closes modal
• Clicking backdrop closes modal
• Focus management
• ARIA attributes
• Preventing background scroll
• Portal usage

If you mention accessibility here, you look thoughtful.

40. Build pagination or infinite scroll

They want to see if you understand:

• API parameters
• Loading more data
• Avoiding duplicate requests
• Empty states
• Error recovery
• Scroll behavior

For companies like Pinterest, Reddit, TikTok, or Instagram-style products, this kind of UI task is common.

Behavioral Questions for React Developers#

Do not sleep on behavioral questions. You can be technically solid and still lose the offer if your stories are vague.

41. Tell me about a difficult bug you fixed

Use this structure:

1. What was broken?
2. How did users or the business feel it?
3. How did you investigate?
4. What was the root cause?
5. What did you change?
6. How did you prevent it happening again?

Example:

“In a checkout flow, users sometimes lost their shipping form data after changing delivery options. I traced it to unstable keys causing a form component to remount. I fixed the keys, added a regression test, and we saw fewer checkout support tickets afterward.”

That sounds real because it is specific.

42. Tell me about a time you disagreed with a teammate

Strong answer:

• You listened first
• You explained tradeoffs
• You looked at data or constraints
• You accepted the best solution, not just your solution
• You kept the relationship healthy

Avoid sounding like, “I was right and everyone eventually realized I am a genius.” Nobody wants that teammate.

43. How do you handle tight deadlines?

Good answer:

“I clarify scope, identify the risky parts, split must-have from nice-to-have, communicate early, and avoid silent surprises.”

Mention examples:

• Feature flags
• Staged rollout
• Cutting non-essential animations
• Reusing existing components
• Pairing on blockers

Questions You Should Ask the Interviewer#

At the end, never say, “No questions.” Ask smart questions.

Try these:

1. “What does success look like for this role in the first 90 days?”
2. “How do you decide between client rendering and server rendering?”
3. “What is your current React stack?”
4. “How much time does the team spend on new features versus maintenance?”
5. “How do you handle design system work?”
6. “What are the biggest frontend performance issues you are working on?”
7. “How are code reviews handled?”
8. “What is the deployment process like?”
9. “Do frontend engineers own testing and monitoring?”
10. “What would make someone struggle in this role?”

These questions make you sound like a future coworker, not just a quiz contestant.

How to Prepare in 7 Days#

If your interview is soon, do not try to learn every React API ever created. Focus on high-return topics.

Day 1: React fundamentals

Review:

• Components
• Props
• State
• Rendering
• Keys
• Controlled inputs

Build a tiny form and list app.

Day 2: Hooks

Practice:

• useState
• useEffect
• useRef
• useMemo
• useCallback
• Custom hooks

Explain each one out loud. If you cannot explain it simply, you do not fully own it yet.

Day 3: JavaScript basics

Review:

• Closures
• Promises
• Async/await
• Array methods
• Event bubbling
• Scope
• Equality
• Destructuring

React interviews love sneaking JavaScript into UI tasks.

Day 4: API work and state

Practice:

• Fetching data
• Loading state
• Error state
• Empty state
• Retry button
• Debounced search

If you know TanStack Query, review caching, invalidation, and stale data.

Day 5: Performance

Review:

• Rerenders
• React DevTools Profiler
• Memoization
• List virtualization
• Bundle size
• Lazy loading
• Server components

Practice explaining when not to optimize too.

Day 6: Testing and TypeScript

Write tests for:

• Form validation
• Button clicks
• API error message
• Loading state

Review TypeScript props, union types, optional props, and event types.

Day 7: Mock interview

Do one full mock:

1. Explain your last React project
2. Answer 10 theory questions
3. Build a small component
4. Debug a broken useEffect
5. Ask interviewer questions
6. Review your resume bullets

Record yourself if you can stand the awkwardness. Yes, it is painful. Yes, it works.

Final Tips Before Your React Interview#

A few last things, because this is where people lose easy points.

Do this:

• Talk through your thinking during coding
• Ask clarifying questions before building
• Handle loading and error states
• Use semantic HTML
• Keep components readable
• Name variables clearly
• Admit when you do not know something
• Explain tradeoffs

Avoid this:

• Adding useMemo everywhere
• Ignoring accessibility
• Mutating state directly
• Using array index keys without thinking
• Pretending you know an API you do not
• Going silent for 15 minutes during live coding
• Turning every answer into a lecture

React interviews in 2026 reward practical developers. If you can build, explain, debug, and communicate, you are in good shape.

Before you start applying, make sure your resume is not quietly failing ATS scans before a human sees it. Run it through JobRise’s free checker here: https://jobrise.io/en/free-ats-checker/