React is one of the most popular JavaScript libraries used for building user interfaces, especially single-page applications. Whether you're a beginner or an experienced developer preparing for an interview, this guide covers the most commonly asked React interview questions — with clear explanations to help you stand out.

1. What is React?

React is an open-source JavaScript library developed by Facebook for building user interfaces, particularly for single-page applications. It allows developers to build reusable UI components.

2. What are the key features of React?

JSX – JavaScript syntax extension
Components – Modular and reusable UI building blocks
Virtual DOM – Improves performance by minimizing real DOM updates
One-way data binding
React Hooks – For managing state and side effects in functional components

3. What is the Virtual DOM?

The Virtual DOM is a lightweight JavaScript representation of the real DOM. React uses it to detect changes and update the real DOM efficiently using a process called reconciliation.

4. What are React Hooks?

Hooks are functions that let you "hook into" React state and lifecycle features from functional components. Common hooks include:

useState
useEffect
useContext
useRef
useMemo

5. What is the difference between state and props?

Feature	Props	State
Mutable	No	Yes
Accessible in child components	Yes	No
Used for	Data passing	Managing local component data

6. What is JSX?

JSX (JavaScript XML) is a syntax extension for JavaScript. It allows you to write HTML elements inside JavaScript code:

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

7. Explain useEffect Hook

useEffect is used to handle side effects (e.g., API calls, subscriptions):

useEffect(() => {
  // runs after the component renders
}, []);

The second argument is a dependency array. When empty, the effect runs once after the initial render.

8. What is the use of keys in React?

Keys help React identify which items have changed, are added, or are removed in a list. They should be unique:

{items.map(item => <li key={item.id}>{item.name}</li>)}

9. What is lifting state up?

It’s a pattern where the shared state is moved to the closest common ancestor of the components that need it. This allows multiple components to access and update the same data.

10. What is Redux?

Redux is a state management library for JavaScript apps. It’s often used with React to manage complex state logic. It follows three core principles:

Single source of truth
State is read-only
Changes are made with pure functions (reducers)

11. What is React's reconciliation process?

Reconciliation is the process through which React updates the DOM. It compares the current Virtual DOM with the previous one using a diffing algorithm and updates only the elements that have changed.

12. What is useRef in React?

useRef is a Hook that allows you to persist values across renders without causing a re-render. It can be used to access DOM elements directly:

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

13. What is useReducer?

useReducer is a React Hook used for managing more complex state logic in components:

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment': return { count: state.count + 1 };
    default: return state;
  }
};
const [state, dispatch] = useReducer(reducer, { count: 0 });

14. Explain React lifecycle methods

React class components have lifecycle methods like:

componentDidMount(): Called once after the initial render
componentDidUpdate(): Called after updates
componentWillUnmount(): Called before a component is removed

In functional components, similar effects can be achieved using useEffect().

15. What is the diffing algorithm in React?

The diffing algorithm efficiently compares two Virtual DOM trees and determines the minimal number of changes needed to update the real DOM. It uses heuristics for performance, such as assuming elements of different types will produce different trees.

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

Keys are used to uniquely identify elements in a list so React can track changes, additions, or deletions efficiently during re-renders.

17. What are controlled and uncontrolled components?

Controlled Component: React controls the form data via state.
Uncontrolled Component: The DOM handles the form data via refs.