50+ React JS Interview Questions with Answers [ 2025 ]

React JS Interview Questions for Freshers

1. What is React.js, and why is it used?

React.js is a JavaScript library developed by Facebook for building fast and interactive user interfaces, especially for single-page applications. It uses a component-based architecture, allowing developers to build encapsulated components that manage their own state and compose them into complex UIs.

Why React is used:

• Efficient DOM (Document Object Model) updates via Virtual DOM
• Component reusability for better maintainability
• Strong ecosystem and community support
• Declarative approach for predictable UI rendering

2. What are components in React?

Components are the building blocks of any React application. They allow you to split the UI into independent, reusable pieces. There are two main types:

• Functional Components – Plain JavaScript functions that accept props and return JSX.
• Class Components – ES6 classes that extend React.Component and include a render method.

3. What is JSX in React?

JSX (JavaScript XML) is a syntax extension for JavaScript used with React to describe what the UI should look like. It allows you to write HTML elements directly within JavaScript.

Example:

const element = <h1>Hello, world!</h1>;

Under the hood, this JSX gets compiled to:

const element = React.createElement('h1', null, 'Hello, world!');

4. What is the Virtual DOM?

The Virtual DOM (VDOM) is a lightweight in-memory representation of the real DOM. When the state of a component changes, React updates the Virtual DOM first, compares it with the previous version (a process called “diffing”), and only updates the real DOM where necessary.

This improves performance by reducing expensive direct manipulations of the browser DOM.

5. What is the difference between a class component and a functional component?

Here’s a comparison of both types:

Feature	Class Component	Functional Component
Syntax	ES6 Class	JavaScript Function
State Management	Uses this.state	Uses useState()
Lifecycle Methods	Available	Handled with hooks
Performance	Slightly heavier	Generally faster

Today, functional components are preferred, especially with React Hooks, enabling them to efficiently manage state and side effects.

Related Read: Coding and Programming Interview Questions [ 2025 ]

React Intermediate Interview Questions

6. What is the difference between controlled and uncontrolled components in React?

Controlled components are React components where form data is handled by the component’s state. In contrast, uncontrolled components store form data in the DOM itself, accessed via refs.

Example – Controlled Component:

function ControlledInput()   onChange=  />
  );
}

Example – Uncontrolled Component:

function UncontrolledInput()  ;
  return (
    <>
      <input type="text" ref=  />
      <button onClick= >Submit</button>
    </>
  );
}

Controlled components give you more power for validation and user feedback, but uncontrolled ones may be simpler for non-dynamic forms.

7. What are React keys and why are they important?

React keys help identify which items in a list have changed, are added, or are removed. They are essential for optimal rendering and performance when rendering lists.

Bad Example (No Key):

 </li>)}

Better Example (With Unique Key):

 > </li>)}

Keys must be unique among siblings, and never use array indexes as keys unless the list is static and never changes.

8. What is the useEffect Hook and how does it work?

useEffect() is a React Hook used to handle side effects such as API calls, timers, or directly interacting with the DOM. It replaces lifecycle methods like componentDidMount and componentDidUpdate in class components.

Basic Example – API Fetch on Mount:

useEffect(() =>  , []); // Empty array = runs only once after initial render

Common mistake: Forgetting the dependency array can lead to infinite re-renders.

9. What are props drilling and how do you avoid it?

Props drilling happens when data is passed through many layers of components unnecessarily—just to reach a deeply nested child. It causes tight coupling and harder maintenance.

How to avoid it:

• Use the Context API for global state
• Use state management libraries like Redux or Zustand
• Refactor components to flatten the hierarchy if possible

10. What is React Fragment and why is it used?

React Fragment allows grouping multiple elements without adding an extra DOM node, unlike wrapping them in a <div>.

return (
  <>
    <h1>Title</h1>
    <p>Subtitle</p>
  </>
);

This helps avoid unnecessary nesting and improves rendering performance, especially when creating clean semantic HTML.

Related Read: 100+ Node.js Interview Questions and Answers [ 2025 ]

React JS Interview Questions for Experienced Developers

11. How does React’s reconciliation process work?

The reconciliation algorithm is how React determines which parts of the UI need to be re-rendered. It compares the new Virtual DOM with the previous one using a diffing algorithm. Only the changed nodes are updated in the actual DOM, making updates efficient.

React uses heuristics to assume:

• Elements of different types produce different trees
• Keys help identify items in lists, enabling correct reordering

Understanding reconciliation is key to writing performant apps and avoiding unnecessary re-renders.

12. What are some performance optimisation techniques in React?

Performance tuning becomes crucial in large-scale apps. Here are several React performance optimisation techniques used in real projects:

• Memoization: Use React.memo to avoid unnecessary renders of functional components.
• Lazy Loading: Split code using React.lazy() and Suspense.
• useCallback & useMemo: Prevent expensive function re-creation.
• Virtualisation: For large lists, use libraries like react-window or react-virtualized.
• Windowing: Render only visible portions of a large list.

Example: Using React.memo and useCallback

const ExpensiveComponent = React.memo(( ) =>  </div>;
});
function Parent()   />
      <button onClick= >Click</button>
    </>
  );
}

13. Explain context API vs Redux. When would you use one over the other?

Both Context API and Redux can be used for state management, but they serve slightly different purposes:

• Context API is great for prop drilling avoidance and small apps with simple global state.
• Redux is suitable for complex apps requiring actions, middleware, logging, and time-travel debugging.

When to prefer Redux:

• Multiple modules need to read/write from shared state
• App needs action logging or async middleware like redux-thunk
• You want to enforce predictable state transitions

14. How do you handle error boundaries in React?

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of crashing the app.

They catch: Rendering errors, lifecycle errors, constructor issues—but not event handler bugs or async code.

class ErrorBoundary extends React.Component  ;
  }
  static getDerivedStateFromError(error)  ;
  }
  componentDidCatch(error, info)  
  render()  
    return this.props.children;
  }
}

Usage: Wrap high-risk parts of your app in this component.

15. What is the role of custom hooks in advanced React development?

Custom hooks allow developers to extract and reuse component logic across different parts of an application. They’re a way to write clean, maintainable, DRY code using shared logic.

Example: useWindowSize hook

function useWindowSize()  , []);
  return size;
}
// Usage:
const [width, height] = useWindowSize();

This keeps your components clean and separates logic from UI. In larger projects, custom hooks become a powerful pattern for scalable React architecture.

Related Read: 100+ JavaScript Interview Questions and Answers [ 2025 ]

React Functional Component & Hooks Interview Questions

16. What are functional components in React, and why are they preferred today?

Functional components are React components defined as JavaScript functions that return JSX. With the introduction of React Hooks in version 16.8, functional components can now manage state, side effects, refs, and more—making them powerful and often preferred over class components.

Why they’re preferred:

• Less boilerplate code
• Simpler and easier to test
• Enhanced with hooks for full lifecycle capabilities

Example:

function Welcome( )  !</h1>;
}

17. How does useState work in functional components?

The useState hook lets you add state to functional components. It returns a pair—[state, setState]—allowing you to read and update the state.

Example – Counter component:

function Counter()   times</p>
      <button onClick= >Click me</button>
    </div>
  );
}

Pro tip: Avoid setting state directly in the body of the component—it causes an infinite loop.

18. How does the useEffect hook differ from lifecycle methods in class components?

The useEffect hook replaces lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount in functional components.

• Mount-only: useEffect with empty dependency array []
• Update-only: useEffect with specific dependency values
• Cleanup: return a function inside useEffect for unmount logic

Example – Subscribing to a data source and cleaning up:

useEffect(() =>  , 1000);
  return () => clearInterval(id); // cleanup
}, []);

Common mistake: Forgetting to include dependencies in the array can cause stale state or bugs.

19. What is the purpose of useMemo and when should you use it?

useMemo() is a performance optimisation hook used to memoise the result of a computation. It prevents recalculating expensive functions unless dependencies change.

Example – Avoiding slow recalculation:

const expensiveValue = useMemo(() =>  , [input]);

Use useMemo when your component does a heavy computation that shouldn’t re-run on every render.

20. How is useCallback different from useMemo?

While useMemo memoises the result of a function, useCallback memoises the function itself. This is especially useful when passing callbacks to child components to prevent unnecessary re-renders.

Example:

const handleClick = useCallback(() =>  , []);

Pass this to a memoised child to avoid triggering unnecessary renders.

Related Read: JavaScript ES6+ Features You Must Know for Interviews in [ 2025 ]

React Performance Optimisation Interview Questions

21. What causes unnecessary re-renders in React, and how can you prevent them?

Unnecessary re-renders happen when React components re-render despite no change in their relevant state or props. This can lead to sluggish UI and wasted processing.

Common causes:

• Parent component re-renders without prop changes
• Functions recreated on every render
• Anonymous functions passed as props

How to prevent:

• Use React.memo for functional components
• Memoise functions using useCallback
• Use useMemo for expensive derived values
• Keep components pure and minimise stateful logic

22. What is React.memo and when should you use it?

React.memo is a higher-order component that prevents re-rendering if the component’s props haven’t changed. It works only with pure components (no side effects).

Use it when:

• The component is frequently re-rendered with the same props
• Props are primitive values or shallow comparison is enough

Example:

const Greeting = React.memo(( ) =>  !</h3>;
});

If name doesn’t change, the component won’t re-render.

23. What is code-splitting in React and why is it useful?

Code-splitting allows you to split your app’s bundle into smaller chunks, so users only load what’s necessary. This improves initial load time and app performance.

How to implement: Use React.lazy and Suspense for dynamic imports.

const Dashboard = React.lazy(() => import('./Dashboard'));
function App()  >
      <Dashboard />
    </Suspense>
  );
}

This prevents large bundles from blocking the rendering of critical UI elements.

24. How does windowing/virtualisation improve performance in large lists?

Rendering thousands of DOM elements in a scrollable list can crash performance. Virtualisation renders only the visible portion of the list, reducing DOM node count.

Popular tools: react-window, react-virtualized

Example using react-window:

import   from 'react-window';
function MyList( )  
      itemCount= 
      itemSize= 
      width= 
    >
       ) => (
        <div style= > </div>
      )}
    </List>
  );
}

This is essential when building dashboards or real-time data tables in enterprise applications.

25. What is the difference between throttling and debouncing in React?

Both are techniques for optimising event-heavy operations like scrolling, typing, or window resizing.

• Debouncing: Delays execution until a pause in events
• Throttling: Limits execution to once per time interval

Use case: Use debounce for search input (wait after typing), throttle for scroll listeners (limit execution).

Debounce example using lodash:

const handleInput = debounce((value) =>  , 500);

Related Read: HTML and CSS Interview Questions & Answers [ 2025 ]

Architecture-Based & Scenario-Driven React Interview Questions

26. How should you structure a scalable React project?

For large-scale applications, a flat or feature-based folder structure is often more maintainable than a layered one (e.g., separating by components, pages, styles). The goal is to make the codebase intuitive and modular.

Recommended structure:

src/
├── components/
│   ├── Button/
│   │   ├── index.jsx
│   │   ├── styles.css
│   │   └── test.js
├── features/
│   ├── auth/
│   ├── dashboard/
├── hooks/
├── utils/
├── services/
├── App.js
├── index.js

This separation by domain/feature ensures encapsulation and faster onboarding for new developers.

27. How would you handle performance issues in a large, slow React app?

Performance issues typically stem from inefficient re-renders, large bundles, or non-optimised components. Here’s a step-by-step optimisation flow:

• Use React Profiler to identify bottlenecks
• Use React.memo and PureComponent for pure components
• Code-splitting via React.lazy and dynamic imports
• Virtualise long lists with react-window
• Move expensive calculations to useMemo

Don’t forget server-side rendering (SSR) and caching as non-code solutions to boost perceived performance.

28. How do you manage shared state across micro-frontends?

In enterprise setups where React apps are split into micro-frontends, sharing state becomes non-trivial.

Options include:

• Using an event bus (via Pub/Sub)
• Leveraging window global scope (less recommended)
• Storing shared data in a browser-based store like localStorage or IndexedDB
• State-sharing libraries like redux-broadcast

Where possible, decouple state from UI logic and keep micro-frontends independently deployable.

29. How do you architect a React app for SEO?

React apps by default are client-rendered, which poses challenges for SEO. To solve this:

• Use SSR: with Next.js or similar frameworks for server-rendered HTML
• Implement pre-rendering: for static content using tools like Gatsby
• Ensure dynamic metadata: using React Helmet or Next.js head management

SSR improves crawlability and speeds up time to first meaningful paint.

30. How would you implement role-based access control (RBAC) in a React app?

RBAC lets you control access to routes or UI elements based on user roles (admin, editor, viewer).

Steps:

• Store user roles in a global context or state manager
• Create higher-order components (HOCs) or wrappers for protected routes
• Hide UI controls or redirect unauthorised users based on role checks

// Example of role-based route guard
function ProtectedRoute( )   = useContext(AuthContext);
  return allowedRoles.includes(role) ? children : <Redirect to="/unauthorised" />;
}

This ensures security at both the navigation and component-rendering layers.

React Behavioral & HR Interview Questions

31. Tell us about a time you had to debug a complex React issue in production.

Hiring managers want to hear about your thought process. Share a specific scenario—such as a broken component due to stale props, a failed API call that wasn’t caught by error boundaries, or a memory leak in a large list.

Focus on how you investigated the issue, tools used (React DevTools, Sentry, logs), what you learned, and what preventive measures you took after fixing it.

32. How do you approach cross-functional collaboration as a React developer?

Interviewers look for team players. Describe how you work with designers (to understand component specs), with backend teams (to sync APIs and contracts), and with QA (to ensure accessibility and responsiveness).

Show examples where communication helped avoid rework or led to better UX outcomes.

33. What would you do if a new team member consistently pushed code that broke existing UI?

This tests your team maturity and leadership. Mention how you’d first understand the root cause—whether it’s lack of onboarding, unclear code ownership, or testing gaps.

Suggest practical steps like introducing pair programming, improving component tests, or initiating a review checklist—all while being empathetic.

34. Describe a project where you implemented reusable UI components in React.

Share how you created a Button, Modal, or Table component that was used across the app. Talk about how you made it customisable (via props or slots), maintained design consistency, and handled accessibility (a11y) concerns.

Bonus points if you mention testing it with Storybook or creating a component library.

35. What do you do when a deadline is tight and you’re not confident the feature is bug-free?

This reveals your sense of ownership. Avoid saying “ship anyway.” Explain how you’d raise risks early, prioritise critical paths, write unit tests, and collaborate with QA to minimise impact—perhaps releasing behind a feature flag.

Show that quality and transparency are important to you.

Related Read: React.js + Next.js Interview Questions and Answers

More Advanced React JS Interview Questions

36. How do you test React components using React Testing Library?

React Testing Library (RTL) encourages testing components the way users interact with them—by querying DOM nodes instead of implementation details.

import   from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import MyButton from './MyButton';
test('button click updates text', () =>  );

RTL is the industry-standard for unit and integration testing in React today.

37. What’s the difference between shallow rendering and full DOM rendering?

Shallow rendering tests a component in isolation, without rendering child components. It’s fast and useful for unit tests. Full rendering (e.g., with Enzyme’s mount or RTL) renders the entire component tree.

Use shallow when testing logic. Use full DOM when testing lifecycle or user interactions.

38. How do you implement Server-Side Rendering (SSR) in React?

React doesn’t support SSR natively—you typically use a framework like Next.js which renders components on the server and sends HTML to the client.

Benefits of SSR: SEO-friendly, faster initial load, better social sharing previews.

// Example: pages/index.js in Next.js
export async function getServerSideProps()   };
}
export default function Home( )  </div>;
}

39. What is useTransition in React 18?

useTransition lets you mark non-urgent state updates as “transitions,” allowing React to keep the UI responsive during heavy rendering tasks.

const [isPending, startTransition] = useTransition();
startTransition(() =>  );

This helps with deferred updates, e.g., updating search results after typing.

40. How do you ensure accessibility (a11y) in React apps?

React supports accessibility through standard HTML semantics. You should:

• Use semantic elements (button, nav, header)
• Use aria-* attributes as needed
• Ensure tab ordering and keyboard navigation
• Test using screen readers like NVDA or VoiceOver

41. What are Suspense and lazy in React?

React.lazy() allows code-splitting by dynamically importing components. Suspense provides a fallback UI while the component loads.

const Settings = React.lazy(() => import('./Settings'));
<Suspense fallback= >
  <Settings />
</Suspense>

42. How does React handle hydration in SSR?

Hydration is the process of attaching event listeners to the HTML already rendered by the server. React reconciles the DOM and “activates” it client-side.

Mismatches between server-rendered and client-rendered content can cause hydration warnings.

43. What is Context vs Redux for state sharing?

Use Context API for lightweight global state (e.g., theme, user auth). Use Redux when your state logic is complex, involves middleware, or needs debugging tools.

Redux offers fine control over how actions mutate state, useful in large enterprise apps.

44. What are controlled vs uncontrolled components?

Controlled components rely on React state for form inputs. Uncontrolled components use refs to access values directly from the DOM.

Use controlled for form validations, live feedback. Use uncontrolled for simple one-off inputs.

45. What’s the difference between useReducer and useState?

useState is ideal for simple state values. useReducer suits more complex state logic involving multiple transitions and conditions.

const reducer = (state, action) =>  ;
    default:
      return state;
  }
};
const [state, dispatch] = useReducer(reducer,  );

46. What are higher-order components (HOC)?

HOCs are functions that take a component and return a new one with added behaviour. They’re used for code reuse (e.g., authentication, logging, theming).

function withLogger(WrappedComponent)   />;
  };
}

47. How do you optimise bundle size in a large React app?

• Use code splitting via React.lazy
• Remove unused dependencies
• Replace large libraries with lightweight alternatives
• Tree shaking (enabled by default in Webpack)

48. What is the purpose of keys in React lists?

Keys help React identify which items have changed, are added, or removed. This improves reconciliation and rendering efficiency.

Always use stable, unique keys—avoid array index as key unless static.

49. How do you handle errors gracefully in a React SPA?

Use Error Boundaries for runtime crashes and centralised logging (e.g., Sentry). For async code, use try/catch with fallback UIs.

50. What are some alternatives to Redux for state management?

Alternatives include:

• Context API (for simple global state)
• Recoil (minimal boilerplate, great DX)
• Zustand (fast and tiny)
• XState (state machines)

Frequently Asked Questions (FAQs)

Q1. What are the essential React JS interview topics for freshers?

Freshers should focus on JSX syntax, components, props vs state, lifecycle methods, and basic hooks like useState and useEffect. These form the foundation for entry-level React interviews.

Q2. Are React hooks frequently asked in interviews?

Yes, React hooks like useState, useEffect, useCallback, and useMemo are among the most commonly asked topics in modern React.js interviews.

Q3. How can I explain performance optimisation in React interviews?

Talk about using React.memo, useCallback, useMemo, code-splitting with lazy loading, and virtualisation for rendering large lists efficiently.

Q4. What are some React.js questions asked for 2+ years experience?

Interviewers may ask about context vs Redux, performance bottlenecks, SSR, component architecture, and advanced hook usage scenarios like useReducer.

Q5. Do React.js interviews include testing questions?

Yes, especially in mid to senior-level roles. Be prepared to answer questions about React Testing Library, Jest, mocking functions, and writing unit/integration tests.

Q6. Is knowledge of Next.js required for React interviews?

It depends on the company. While not mandatory, having knowledge of Next.js for SSR, routing, and performance is a big plus for product-based companies.

Q7. How should I prepare for behavioural questions as a React developer?

Expect questions about debugging, cross-team collaboration, code ownership, and how you handle pressure during tight deadlines. Soft skills are critical for team roles.

Q8. What is the best way to practice React interview questions?

Build small projects, write component tests, and contribute to open-source. Platforms like LeetCode and GitHub can help strengthen your fundamentals and showcase real skills.