Top React Interview Questions and Answers for 2025

1. What is React?

Answer:
React is an open-source JavaScript library developed by Meta (Facebook) for building user interfaces, especially single-page applications. It uses a component-based architecture and a virtual DOM to efficiently update the UI.

2. What are components in React?

Answer:
Components are independent, reusable building blocks of a React application. There are two types:

• Functional Components (with Hooks)
• Class Components (older and less used in 2025)

3. What is JSX?

Answer:
JSX stands for JavaScript XML. It’s a syntax extension for JavaScript that allows writing HTML in React code.

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

4. What are props in React?

Answer:
Props (short for “properties”) are read-only data passed from a parent component to a child component.

5. What is state in React?

Answer:
State is a built-in object that stores property values that belong to the component. When state changes, the component re-renders.

6. What are Hooks?

Answer:
Hooks are functions that let you use React features in functional components. Popular hooks:

• useState
• useEffect
• useContext
• useReducer
• useRef

7. What is the virtual DOM?

Answer:
Virtual DOM is a lightweight JavaScript object that is a copy of the real DOM. React uses it to optimize rendering by updating only the parts that changed.

8. Explain the useEffect hook.

Answer:

jsCopyEdituseEffect(() => {
  // Code runs after the render
  return () => {
    // Cleanup code (optional)
  };
}, [dependencies]);

• It replaces lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount.

9. What is the difference between controlled and uncontrolled components?

Answer:

• Controlled Component: React controls the form input via state.
• Uncontrolled Component: DOM handles the form input using ref.

10. What is the difference between state and props?

Props	State
Passed from parent	Managed within component
Immutable	Mutable
Used for configuration	Used for internal data

11. What is React Context API?

Answer:
Context provides a way to pass data through the component tree without manually passing props at every level.

jsCopyEditconst ThemeContext = React.createContext('light');

Use useContext(ThemeContext) to consume it.

12. What is memoization in React?

Answer:
Memoization improves performance by caching the result of expensive calculations or components.

• React.memo for components
• useMemo for values
• useCallback for functions

13. How does React handle rendering performance?

Answer:

• Virtual DOM diffing
• Component memoization (React.memo)
• Lazy loading (React.lazy, Suspense)
• Code splitting
• useMemo, useCallback

14. What is React Suspense?

Answer:
Suspense lets you “wait” for some code (like a lazy-loaded component or data fetching) before rendering.

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

15. What is Server-Side Rendering (SSR) in React?

Answer:
SSR means rendering the initial HTML of a React component on the server. Tools like Next.js are used for this. It improves performance and SEO.

16. What is Redux Toolkit?

Answer:
Redux Toolkit is the official, recommended way to write Redux logic, providing simplified configuration, createSlice, createAsyncThunk, and better DevTools support.

17. What is Next.js, and how does it differ from React?

Answer:
Next.js is a framework built on top of React with features like:

• Server-Side Rendering
• Static Site Generation
• File-based routing
• API routes
• Built-in CSS and image optimization

18. How to fetch data in React (2025 best practices)?

Answer:

• Use useEffect with fetch or Axios
• Use React Query or SWR for better caching and revalidation
• Use Next.js data-fetching methods (getStaticProps, getServerSideProps)

19. What are custom hooks?

Answer:
Custom hooks are reusable logic functions that start with use. Example:

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

20. What are common React performance optimization techniques?

• Use React.memo, useMemo, useCallback
• Avoid unnecessary re-renders
• Split components
• Lazy load components
• Debounce expensive operations