Top 25 React JS Interview Questions and Answers

Are you preparing for a React JS interview?

Whether you’re a beginner or an experienced developer, mastering React’s core concepts is essential to succeed.

In this guide, we’ve compiled the top 25 React JS interview questions and answers to help you build confidence and improve your technical understanding.

From the basics like components and JSX, to advanced concepts like hooks, Redux, and performance optimization, this post covers everything you need to shine in your React interview.

1. ❓ What are Components in React?

Components are the building blocks of a React application. They encapsulate UI, logic, and styles, and can be reused across your app. There are two main types:

Functional Components – Simple JavaScript functions that return JSX
Class Components – ES6 classes extending React.Component

// Functional Component
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// Class Component
class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

2. 🖱️ How Do You Handle Events in React?

React handles events using camelCase attributes like onClick, onChange, etc., which accept callback functions.

class Button extends React.Component {
  handleClick() {
    console.log('Button clicked!');
  }

  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

3. 🔁 What are Lifecycle Methods in React?

Lifecycle methods allow you to run code at specific points in a component’s life:

componentDidMount() – Runs after the component mounts; useful for data fetching.
componentDidUpdate() – Runs after updates; ideal for handling prop/state changes.
componentWillUnmount() – Runs before the component is removed; used for cleanup.

4. 🔑 What is the Purpose of Keys in React Lists?

Keys uniquely identify list items and help React optimize rendering.

const items = ['Apple', 'Banana', 'Orange'];

<ul>
  {items.map((item, index) => (
    <li key={index}>{item}</li>
  ))}
</ul>

Ideally, use unique IDs instead of array indices for stable key assignment.

5. 📤 What is Lifting State Up in React?

“Lifting state up” means moving shared state to a common ancestor component.

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

  return (
    <div>
      <h2>Counter: {count}</h2>
      <Controls
        onIncrement={() => setCount(count + 1)}
        onDecrement={() => setCount(count - 1)}
      />
    </div>
  );
}

function Controls({ onIncrement, onDecrement }) {
  return (
    <div>
      <button onClick={onIncrement}>Increment</button>
      <button onClick={onDecrement}>Decrement</button>
    </div>
  );
}

6. 🔁 How Do You Pass Data Between Components?

Use props to pass data from parent to child. For deeper communication, lift state or use Context API/Redux.

7. ⚠️ What are the Limitations of React?

React is a library, not a full framework.
JSX and component-based architecture may confuse beginners.
Frequent updates require staying up-to-date.

8. 🧩 What are Custom Hooks?

Custom Hooks are functions that reuse stateful logic using other hooks.

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

Custom Hooks must start with use and cannot be used in class components.

9. 🔐 What is a Key in React?

Keys help React identify which items in a list are updated, added, or removed.

10. 🔄 What is Conditional Rendering in React?

Render components based on a condition:

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

11. 🔄 Controlled vs. Uncontrolled Components

Controlled: React controls the component’s state.
Uncontrolled: The DOM manages its own state using refs.

12. 🧱 What are React Fragments?

Fragments let you return multiple elements without extra nodes:

<>
  <h1>Title</h1>
  <p>Paragraph</p>
</>

13. 🧠 What is useMemo and useCallback?

useMemo: Caches expensive computations.
useCallback: Caches function definitions.

14. 📦 What are Render Props?

A pattern where a component shares its logic via a function as a prop.

15. 📉 What is Code Splitting?

Load components only when needed using React.lazy() and Suspense to reduce initial load time.

16. 🔍 What are React Refs?

Refs provide a way to access DOM nodes or React elements directly:

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

17. ⚙️ How Does React Optimize Performance?

Virtual DOM
React.memo
Lazy loading
useMemo, useCallback
Efficient diffing algorithm

18. 🌐 What is Context API?

Provides global state without prop drilling:

const ThemeContext = React.createContext();

19. 📥 What is useState?

Hook to manage component state:

const [value, setValue] = useState('');

20. 📦 What is useEffect?

Performs side effects like API calls or subscriptions:

useEffect(() => {
  fetchData();
}, []);

21. 🗃️ What is Redux?

A state management library that uses actions, reducers, and a global store to manage app-wide state.

22. 🔑 Why are Keys Important in Lists?

Keys help React track changes, improving rendering performance.

23. 🚦 What is React Router?

Enables navigation and routing in single-page applications.

<Route path="/home" element={<Home />} />

24. 📊 What is State in React?

State holds dynamic data that affects how components render.

25. 📤 What are Props in React?

Props are read-only data passed from parent to child components.

🎯 Final Thoughts

These 25 questions cover the most common and essential React JS interview topics. Whether you’re preparing for TCS, Capgemini, or any product-based company, practicing these concepts will boost your confidence.

Stay consistent, build projects, and review React docs regularly to become interview-ready!

Top Interview Questions