React remains one of the most sought-after skills in web development. Whether you’re a fresher preparing for your first development role or an experienced developer aiming for senior positions, mastering React interview questions is essential. This guide covers 30+ carefully curated questions spanning fundamental concepts, practical scenarios, and advanced patterns.
Freshers: Foundational React Concepts
1. What is React and why is it used?
Answer: React is a JavaScript library for building user interfaces with reusable components. It’s used because it simplifies UI development through a component-based architecture, provides efficient rendering through the Virtual DOM, and ensures predictable UI updates via one-way data flow. This makes applications faster, more maintainable, and easier to scale.
2. What is JSX and why do we use it?
Answer: JSX is a syntax extension that allows you to write HTML-like code inside JavaScript. It makes UI development more intuitive and readable by enabling developers to visualize the component structure directly in their code. JSX is transpiled to JavaScript function calls during compilation.
3. What is the Virtual DOM?
Answer: The Virtual DOM is a lightweight copy of the real DOM that React maintains in memory. When state or props change, React creates a new Virtual DOM representation and compares it with the previous one using a diffing algorithm. Only the changed parts are updated in the real DOM, which improves performance significantly.
4. Explain the diffing algorithm in React.
Answer: React’s diffing algorithm compares the new Virtual DOM with the previous Virtual DOM to identify minimal changes needed. It performs a depth-first traversal of the component tree and identifies differences between the two trees. This ensures that only the necessary updates are applied to the real DOM, reducing reflow and improving performance.
5. What are the two types of components in React?
Answer: React has two component types:
- Functional Components: JavaScript functions that return JSX. They use hooks for state management and are considered the modern standard for React development.
- Class Components: ES6 classes that extend React.Component. They have lifecycle methods and use this.state for state management, though they are less commonly used today.
6. What is State in React?
Answer: State is data that belongs to a component and can change over time. When state changes, React automatically re-renders the component to reflect the new data. State should be used for data that affects the component’s rendering. In functional components, state is managed using the useState hook.
7. What are Props in React?
Answer: Props are arguments passed to React components, similar to function parameters. They allow parent components to pass data to child components. Props are read-only and follow a one-way data flow from parent to child, ensuring predictable component behavior.
8. What is the difference between State and Props?
Answer: State is internal to a component and can be modified, while props are passed from parent to child and are read-only. State is managed within the component, but props flow downward from parent components. When state changes, the component re-renders, but changing props from a parent also triggers child re-renders.
9. What are React Hooks?
Answer: Hooks are functions that let you use state and other React features in functional components. They eliminate the need for class components in most scenarios. Common hooks include useState for managing state, useEffect for side effects, and useContext for accessing context values. Custom hooks can be created to reuse logic across components.
10. What is the useState Hook?
Answer: useState is a built-in hook that allows functional components to have state. It returns an array with two elements: the current state value and a function to update it. Example:
const [count, setCount] = useState(0);When setCount is called, the component re-renders with the new state value.
1–3 Years Experience: Intermediate Concepts
11. What is the useEffect Hook and how does it work?
Answer: useEffect allows you to perform side effects in functional components, such as fetching data, subscribing to events, or updating the document title. It runs after the component renders. The hook accepts a dependency array: if empty, it runs once after mount; if omitted, it runs after every render; if it contains dependencies, it runs only when those values change.
12. What is a dependency array in useEffect?
Answer: The dependency array specifies which values useEffect depends on. If the array is empty, the effect runs once after the initial render. If it contains dependencies, the effect runs whenever those dependencies change. Omitting the array causes the effect to run after every render, which can impact performance.
13. How do you fetch data in React?
Answer: Data fetching is typically done in useEffect with an async function. Here’s a basic example:
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch('API_URL');
const data = await response.json();
setData(data);
} catch (error) {
console.error('Error fetching data:', error);
}
};
fetchData();
}, []);The empty dependency array ensures the fetch happens only once on mount.
14. What is React Context API?
Answer: Context API is a built-in feature for managing global state without prop drilling. It’s appropriate when data needs to be accessed by multiple components at different levels, such as theme settings, authentication state, or language preferences. Context API is ideal for small to medium-scale global state needs but may not be sufficient for complex state management.
15. How do you use Context API?
Answer: Context API involves three steps: create a context using createContext(), wrap components with a Provider that supplies the context value, and consume the context using useContext() hook. This eliminates the need to pass props through intermediate components.
16. What is the useContext Hook?
Answer: useContext allows functional components to consume context values without nesting Provider components. Simply pass the context object created with createContext() to useContext(), and it returns the current context value. This simplifies accessing global state in components.
17. What are Higher-Order Components (HOC)?
Answer: A Higher-Order Component is a pattern where a function takes a component and returns a new enhanced component. HOCs are used for logic reuse, state abstraction, and prop manipulation. For example, a withAuthentication HOC could wrap a component and provide an isAuthenticated prop indicating whether the user is authenticated.
18. What is React.memo?
Answer: React.memo is a performance optimization technique that memoizes a functional component. It prevents unnecessary re-renders by checking if props have changed. If props remain the same, the component uses the cached version instead of re-rendering, improving performance for expensive components.
19. What is the useCallback Hook?
Answer: useCallback memoizes a function and returns the same function reference across renders if dependencies haven’t changed. It’s useful for preventing unnecessary re-renders of child components that receive the function as a prop. Avoid using anonymous functions in render methods; use useCallback instead for better performance.
20. What is the useMemo Hook?
Answer: useMemo memoizes expensive computations and only recalculates them when dependencies change. It returns the cached result if dependencies haven’t changed, avoiding redundant calculations. This is useful for optimizing performance when dealing with complex calculations in components.
21. What is the useReducer Hook?
Answer: useReducer manages complex state logic with multiple sub-values or when the next state depends on the previous one. It takes a reducer function and initial state, returning the current state and a dispatch function. It’s more suitable than useState for intricate state management scenarios.
22. What is Local Storage and why use it in React?
Answer: Local Storage is browser storage that persists data across sessions. In React, it’s useful for saving user preferences, authentication tokens, or application state. You can save data using localStorage.setItem() and retrieve it using localStorage.getItem(). It improves user experience by maintaining state even after page refresh or browser closure.
23. What are controlled and uncontrolled components?
Answer: A controlled component has its value managed by React state, with onChange handlers updating the state. An uncontrolled component manages its own internal state through refs. Controlled components are preferred because they provide more control and predictability, making form handling more reliable.
24. What is a ref in React?
Answer: Refs provide a way to access DOM nodes directly. Created using useRef() hook, they bypass React’s normal data flow. Refs are useful for managing focus, triggering animations, or integrating third-party DOM libraries. However, they should be used sparingly as they can make code less predictable.
3–6 Years Experience: Advanced Concepts
25. What is Redux and how does it differ from Context API?
Answer: Redux is a state management library for complex applications with intricate state logic. Unlike Context API, Redux provides predictable state management through actions, reducers, and a centralized store. Redux is widely used for large-scale applications where Context API’s simplicity becomes a limitation. Redux offers better developer tools, time-travel debugging, and middleware support.
26. Explain the concept of reconciliation in React.
Answer: Reconciliation is React’s process of comparing old and new Virtual DOM and updating only the changed parts in the real DOM. This algorithm ensures efficient updates by minimizing direct DOM manipulation. React uses a depth-first traversal and diffing algorithm to identify the minimal set of changes needed, which is central to React’s performance.
27. What is Code Splitting and how do you implement it?
Answer: Code splitting breaks your bundle into smaller chunks that load on demand, improving performance. In React, use React.lazy() and Suspense for component-level code splitting. React.lazy() allows you to render a dynamic import as a component, and Suspense handles the loading state while the component loads.
28. What is Strict Mode in React?
Answer: StrictMode, added in React version 16.3, is a tool that highlights potential problems in your application. It performs additional checks during development, including identifying components with impure rendering, checking for missing Effect cleanup, and detecting deprecated lifecycle methods and legacy patterns. Strict Mode can be applied at any level of the component hierarchy and is adopted incrementally within a codebase. It’s a development-only feature and doesn’t affect production builds.
29. How do you optimize a large list in React?
Answer: For large lists, use libraries like react-window or react-virtualized that implement windowing. This technique renders only visible items in the viewport, dramatically improving performance. Also ensure each list item has a proper key prop, avoid inline function definitions, and consider using React.memo for list items. For server-side data, use React Query or SWR with caching to reduce unnecessary refetching.
30. What are the lifecycle methods in class components?
Answer: Key lifecycle methods include:
- componentDidMount(): Called after the component renders; use for initial data fetching or DOM setup.
- shouldComponentUpdate(): Returns a boolean determining if React should proceed with rendering; useful for performance optimization.
- getSnapshotBeforeUpdate(): Provides access to props and state before updates; allows checking previously present values.
- componentDidUpdate(): Called after the component updates; useful for side effects after DOM changes.
- componentWillUnmount(): Called before component removal; use for cleanup like removing event listeners.
31. What are custom hooks and how do you create them?
Answer: Custom hooks are JavaScript functions that use other hooks to encapsulate reusable logic. They follow the naming convention useXxx and must be called at the top level of functional components. Custom hooks let you reuse stateful logic across components, keeping your code clean and maintainable. For example, a useForm hook can manage form state and handle changes across multiple forms.
32. How do you test React components?
Answer: Use testing libraries like React Testing Library and Jest. For data fetching tests, use waitFor() to wait for asynchronous operations. For API testing, mock functions with jest.mock(). For Redux components, use redux-mock-store with Provider wrapper. Write tests that verify behavior rather than implementation details, focusing on user interactions and expected outcomes.
33. What is the useRef Hook and when should you use it?
Answer: useRef creates a mutable reference that persists across renders without causing re-renders. It’s useful for accessing DOM nodes directly, managing focus, triggering animations, or integrating third-party libraries. Unlike state, updating a ref doesn’t trigger a re-render. Use refs sparingly as they can make code less predictable and should be a last resort when normal React patterns don’t suffice.
34. How do you handle errors in React components?
Answer: Use try-catch blocks for synchronous errors and async operations. For component-level errors, use Error Boundaries (class components only) that catch errors during rendering. For API calls in useEffect, wrap fetch or API calls in try-catch. Display user-friendly error messages and log errors for debugging. Consider using libraries that provide enhanced error handling and monitoring capabilities.
35. What is the difference between functional and class components in terms of performance?
Answer: Functional components with hooks are generally more performant than class components because they avoid unnecessary method bindings and have smaller bundle sizes. React.memo, useCallback, and useMemo provide fine-grained control over re-renders. Class components require more boilerplate and can’t optimize as easily. Modern React development favors functional components with hooks for better performance and maintainability.
These 35 questions cover the breadth of React knowledge expected at different career stages. Freshers should focus on understanding foundational concepts, while mid-level developers should master hooks and state management patterns. Advanced developers should be comfortable with optimization techniques, testing strategies, and architectural decisions. Regular practice with these questions and building real projects will solidify your React expertise.
