Top 50 React JS Interview Questions and Answers

React JS has become the front-end library of choice for building fast, interactive, and scalable web applications. Maintained by Facebook and a strong developer community, React simplifies UI development through reusable components, a declarative approach, and a virtual DOM that enhances performance.

Because of its widespread use in startups, enterprises, and full-stack projects, React is frequently featured in technical interviews for both front-end and full-stack roles. Interviewers often assess candidates on their understanding of React fundamentals, hooks, state management, component design, and real-world implementation patterns.

This blog presents a curated list of 50 React JS interview questions and answers, organized by difficulty level. Whether you are a beginner learning the basics or an experienced developer preparing for senior-level interviews, this guide will help you reinforce your knowledge and practice explaining key React concepts with confidence.

Who should read this Blog?

This blog is designed for anyone preparing for technical interviews that involve React JS, regardless of their experience level. Whether you are just getting started with front-end development or aiming for advanced React roles, this guide offers practical insights and structured revision.

You will find this blog especially useful if you are:

• A student or fresher preparing for entry-level front-end or full-stack roles
• A front-end developer working with React in production and looking to switch companies or grow into a senior role
• A full-stack engineer who uses React alongside backend technologies like Node.js, Django, or Spring Boot
• A developer transitioning from other frameworks such as Angular or Vue.js to the React ecosystem
• A freelancer or self-taught developer aiming to validate your knowledge and improve your confidence in interviews

If you are looking to solidify your understanding of React’s core principles, component patterns, hooks, and real-world scenarios—this blog is for you.

Let us now begin with the Basic-Level React JS Interview Questions and Answers.

Basic-Level React JS Interview Questions (1–15)

1. What is React JS?

Answer:
React JS is a JavaScript library developed by Facebook for building user interfaces. It allows developers to create reusable UI components and manage the state of complex web applications efficiently using a declarative programming model.

2. What are the main features of React?

Answer:

• JSX: A syntax extension that allows writing HTML within JavaScript
• Virtual DOM: Improves performance by updating only changed parts of the UI
• Component-based architecture: Promotes reusability and modular code
• Unidirectional data flow: Ensures predictable data handling
• Hooks: Simplify state and side-effect management in functional components

3. What is JSX in React?

Answer:
JSX (JavaScript XML) is a syntax that allows writing HTML-like code inside JavaScript. It makes code more readable and enables the use of HTML and React components together.

Example:

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

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

Answer:

• Functional component: A simple JavaScript function that returns JSX. Uses hooks for state and lifecycle.
• Class component: Uses ES6 classes and this.state, with lifecycle methods like componentDidMount().

Functional components are now preferred due to the introduction of hooks in React 16.8.

5. What are props in React?

Answer:
Props (short for “properties”) are read-only attributes passed from a parent component to a child component. They allow data sharing and configuration of components.

Example:

<Greeting name="Alice" />

6. What is state in React?

Answer:
State is a built-in object used to store dynamic data in a component. When the state changes, the component re-renders. State is managed using useState() in functional components.

7. What is the difference between props and state?

Answer:

Feature	Props	State
Ownership	Passed from parent	Managed within component
Mutability	Immutable	Mutable (via setState or useState)
Purpose	Configure component	Manage internal data

8. How do you create a React component?

Answer:
Functional Component:

function Hello() {
  return <h1>Hello World</h1>;
}

Class Component:

class Hello extends React.Component {
  render() {
    return <h1>Hello World</h1>;
  }
}

9. How do you render a list in React?

Answer:
Using .map() with a unique key prop:

const items = ['A', 'B', 'C'];
const list = items.map((item, index) => <li key={index}>{item}</li>);

10. What is the purpose of the key prop in lists?

Answer:
key helps React identify which items have changed, are added, or are removed. It improves list rendering performance by maintaining element identity across re-renders.

11. What is the virtual DOM?

Answer:
The virtual DOM is an in-memory representation of the real DOM. React uses it to efficiently update only the parts of the actual DOM that changed, reducing costly DOM manipulations.

12. How does React handle events?

Answer:
React uses camelCase syntax and passes functions as event handlers:

<button onClick={handleClick}>Click me</button>

Event handling in React uses a synthetic event system for cross-browser consistency.

13. What is conditional rendering in React?

Answer:
Conditional rendering means displaying content based on conditions:

{isLoggedIn ? <Logout /> : <Login />}

React supports if-else, ternary operators, and logical && rendering.

14. What is the role of useState() in functional components?

Answer:
useState() is a React hook used to declare and manage state in functional components.

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

15. Can React components return multiple elements?

Answer:
Yes. React components can return multiple elements using:

• Fragments: <></> or <React.Fragment>
• Arrays with keys
  This avoids unnecessary wrapper divs.

Intermediate-Level React JS Interview Questions (16–30)

16. What are controlled and uncontrolled components in React?

Answer:

• Controlled components have their form inputs managed by React state.
• Uncontrolled components use the DOM to manage input state via refs.

Controlled Example:

<input value={name} onChange={e => setName(e.target.value)} />

Uncontrolled Example:

<input ref={inputRef} />

17. What is the virtual DOM and how does it improve performance?

Answer:
The virtual DOM is a lightweight copy of the actual DOM. React uses it to determine what has changed, and then efficiently updates only the affected parts of the real DOM, reducing rendering time and improving performance.

18. What is the significance of useEffect() in React?

Answer:
useEffect() is a React hook used to perform side effects in functional components—such as fetching data, updating the DOM, or setting up timers.

Example:

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

19. What is the difference between useEffect() and componentDidMount()?

Answer:

• componentDidMount() is used in class components and runs once after the component is mounted.
• useEffect() can mimic componentDidMount(), componentDidUpdate(), and componentWillUnmount() in functional components, depending on its dependency array.

20. How do you handle forms in React?

Answer:
Use controlled components with state to handle form inputs:

function Form() {
  const [name, setName] = useState('');
  const handleSubmit = e => {
    e.preventDefault();
    console.log(name);
  };
  return (
    <form onSubmit={handleSubmit}>
      <input value={name} onChange={e => setName(e.target.value)} />
    </form>
  );
}

21. What is lifting state up in React?

Answer:
Lifting state up refers to moving shared state to the nearest common ancestor component so that multiple child components can access or update it via props.

22. What is prop drilling and how can you avoid it?

Answer:
Prop drilling is the process of passing props through multiple layers of components that do not directly use them.

To avoid it:

• Use the Context API
• Use state management libraries like Redux or Zustand

23. How do you conditionally apply CSS classes in React?

Answer:
Using template literals or libraries like classnames:

const buttonClass = isActive ? 'btn active' : 'btn';

Or with classnames:

classNames('btn', { active: isActive });

24. What is React Router and why is it used?

Answer:
React Router is a library for handling routing in React applications. It allows navigation between components/pages without reloading the browser.

Core components include:

• <BrowserRouter>
• <Route>
• <Link>
• <Switch> or <Routes> (v6)

25. How do you pass functions as props?

Answer:
Functions can be passed just like any other value:

<Child onClick={handleClick} />

Inside the child:

<button onClick={props.onClick}>Click Me</button>

26. What is the purpose of useRef() in React?

Answer:
useRef() provides a way to access DOM nodes or persist values across renders without causing re-renders.

Example:

const inputRef = useRef();
<input ref={inputRef} />

27. What are fragments in React?

Answer:
Fragments let you return multiple elements without adding extra nodes to the DOM:

<>
  <h1>Title</h1>
  <p>Description</p>
</>

28. What are synthetic events in React?

Answer:
React wraps browser-native events in synthetic events to ensure consistency across browsers. They have the same interface as native events but are optimized for React’s event system.

29. How does React handle reconciliation?

Answer:
Reconciliation is React’s process of comparing the virtual DOM with the previous version to determine the minimal number of updates needed to synchronize with the real DOM.

30. How do you perform conditional rendering inside JSX?

Answer:

• Ternary Operator:

{isLoggedIn ? <Logout /> : <Login />}

• Logical AND:

{hasPermission && <EditButton />}

Advanced-Level React JS Interview Questions (31–40)

31. What is the Context API in React?

Answer:
The Context API provides a way to pass data through the component tree without having to pass props manually at every level. It is ideal for global state like user authentication, theme, or language preferences.

Example:

const ThemeContext = React.createContext();

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Header />
    </ThemeContext.Provider>
  );
}

32. What are custom hooks in React?

Answer:
Custom hooks are functions that allow you to extract and reuse logic across multiple components using React’s built-in hooks (like useState, useEffect).

Example:

function useCounter() {
  const [count, setCount] = useState(0);
  const increment = () => setCount(c => c + 1);
  return { count, increment };
}

33. What are error boundaries in React?

Answer:
Error boundaries are React components that catch JavaScript errors in child components during rendering, lifecycle methods, and constructors, and display a fallback UI instead of crashing the entire app.

Implemented using class components:

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() {
    return { hasError: true };
  }
  render() {
    return this.state.hasError ? <h1>Something went wrong.</h1> : this.props.children;
  }
}

34. What is memoization in React and how does React.memo() work?

Answer:
Memoization is a performance optimization technique to cache results of expensive calculations.
React.memo() is a higher-order component that prevents re-rendering of a component unless its props change.

const MyComponent = React.memo(function MyComponent(props) {
  return <div>{props.value}</div>;
});

35. What is the difference between useMemo() and useCallback()?

Answer:

• useMemo(): Memoizes the result of a computation
• useCallback(): Memoizes the function itself

Both are used to optimize performance in re-rendering scenarios.

36. What is server-side rendering (SSR) in React?

Answer:
SSR renders React components on the server and sends the fully rendered HTML to the client, improving performance and SEO. Tools like Next.js enable SSR in React applications.

37. What are portals in React?

Answer:
Portals allow rendering a child component into a DOM node outside the parent hierarchy.

Example:

ReactDOM.createPortal(<Modal />, document.getElementById('modal-root'));

38. How does lazy loading work in React?

Answer:
React supports code-splitting with React.lazy() and Suspense, which loads components only when they are needed.

Example:

const LazyComponent = React.lazy(() => import('./MyComponent'));

<Suspense fallback={<div>Loading...</div>}>
  <LazyComponent />
</Suspense>

39. How do you optimize React application performance?

Answer:

• Use React.memo() to avoid unnecessary re-renders
• Use useMemo() and useCallback() for heavy computations and stable function references
• Use dynamic imports and lazy loading
• Minimize use of global state and excessive re-renders
• Avoid anonymous functions in render

40. What is reconciliation and how does React determine which DOM updates to make?

Answer:
Reconciliation is the process by which React updates the DOM efficiently. It uses a diffing algorithm to compare the previous and current virtual DOM trees, and updates only the parts that changed.

React uses keys in lists and component identity to determine minimal changes.

Scenario-Based and Coding React JS Interview Questions (41–50)

41. Build a counter app using useState and useEffect.

Answer:

import React, { useState, useEffect } from 'react';

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

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

  return (
    <>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </>
  );
}

42. Create a dropdown list that fetches data asynchronously.

Answer:

function Dropdown() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    fetch('/api/options')
      .then(res => res.json())
      .then(data => setItems(data));
  }, []);

  return (
    <select>
      {items.map(item => (
        <option key={item.id}>{item.name}</option>
      ))}
    </select>
  );
}

43. How would you debounce a search input in React?

Answer:

function useDebounce(value, delay) {
  const [debounced, setDebounced] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);

  return debounced;
}

function SearchBox() {
  const [query, setQuery] = useState('');
  const debouncedQuery = useDebounce(query, 500);

  useEffect(() => {
    // fetch using debouncedQuery
  }, [debouncedQuery]);

  return <input onChange={e => setQuery(e.target.value)} />;
}

44. Implement a simple modal component using props.

Answer:

function Modal({ isOpen, onClose, children }) {
  if (!isOpen) return null;
  return (
    <div className="modal">
      <div className="modal-content">
        {children}
        <button onClick={onClose}>Close</button>
      </div>
    </div>
  );
}

45. How would you handle form validation in React?

Answer:

function Form() {
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');

  const handleSubmit = e => {
    e.preventDefault();
    if (!email.includes('@')) {
      setError('Invalid email');
    } else {
      setError('');
      // submit logic
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input value={email} onChange={e => setEmail(e.target.value)} />
      {error && <span>{error}</span>}
    </form>
  );
}

46. Implement a toggle button to switch between dark and light themes.

Answer:

function ThemeToggle() {
  const [darkMode, setDarkMode] = useState(false);

  return (
    <div className={darkMode ? 'dark' : 'light'}>
      <button onClick={() => setDarkMode(prev => !prev)}>
        Toggle Theme
      </button>
    </div>
  );
}

47. How do you implement infinite scroll in React?

Answer:
Use the IntersectionObserver API or scroll position:

useEffect(() => {
  window.addEventListener('scroll', handleScroll);
  return () => window.removeEventListener('scroll', handleScroll);
}, []);

function handleScroll() {
  if (window.innerHeight + document.documentElement.scrollTop >= document.documentElement.offsetHeight - 10) {
    // fetch more data
  }
}

48. How would you build a reusable button component?

Answer:

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

Usage:

<Button label="Save" onClick={handleSave} />

49. Build a component that updates only when a specific prop changes.

Answer:

const ExpensiveComponent = React.memo(({ data }) => {
  return <div>{data.value}</div>;
});

It only re-renders when data changes by reference.

50. Create a progress bar that fills based on a value prop.

Answer:

function ProgressBar({ value }) {
  return (
    <div className="progress">
      <div className="bar" style={{ width: `${value}%` }}></div>
    </div>
  );
}

Core React JS Concepts to Revise Before an Interview

To perform well in a React JS interview, it is essential to not only understand how React works but also be able to explain its principles, performance optimizations, and real-world use cases. Below is a list of core concepts you should revise thoroughly:

1. Component Architecture

• Functional vs. class components
• Component lifecycle (legacy in class components and modern with hooks)
• Reusability and modularity in UI design

2. JSX Syntax

• Embedding JavaScript expressions inside JSX
• Returning multiple elements using fragments
• Dynamic attribute and event binding

3. Props and State

• Immutable nature of props
• Managing local state with useState()
• Lifting state up and prop drilling
• State updates and re-rendering behavior

4. React Hooks

• useState, useEffect, and useRef
• useContext, useReducer, and custom hooks
• Rules of hooks and dependency arrays
• Difference between useMemo() and useCallback()

5. Event Handling and Form Management

• Handling synthetic events
• Controlled vs. uncontrolled components
• Basic validation and form submission flow

6. Conditional Rendering and Lists

• Using ternary operators, logical &&, and switch rendering
• Rendering lists with keys
• Avoiding unnecessary re-renders in large lists

7. React Router

• Declarative routing with <Route>, <Link>, and <Navigate>
• Nested routes and dynamic parameters
• Redirects and protected routes using wrappers or useNavigate

8. State Management Strategies

• Context API for lightweight global state
• Comparison of Context with Redux or Zustand
• Lifting state vs. centralized stores

9. Performance Optimization

• Memoization with React.memo(), useMemo(), and useCallback()
• Lazy loading and code splitting (React.lazy, Suspense)
• Efficient rendering and avoiding unnecessary DOM updates

10. Testing and Debugging

• Unit testing with Jest and React Testing Library
• Debugging with React DevTools
• Writing testable, predictable components using pure functions

Understanding these core areas will help you answer both theoretical and coding interview questions confidently. More importantly, they reflect real-world challenges and problem-solving patterns in modern React applications.

Conclusion

React JS remains a cornerstone of modern front-end development, powering dynamic and scalable applications across startups, enterprises, and open-source ecosystems. Its component-based architecture, powerful hooks system, and growing ecosystem make it a must-have skill for developers aiming for front-end or full-stack roles.

In this blog, we covered 50 carefully selected React JS interview questions, categorized by difficulty and aligned with real-world use cases. From basic JSX syntax and state management to advanced topics like custom hooks, memoization, and performance tuning, this guide is designed to prepare you for a wide range of interview scenarios.