React Interview Questions

Comprehensive React interview questions covering fundamentals, advanced concepts, and practical scenarios:

Fundamentals

1. What is React and why use it?

React is a JavaScript library for building user interfaces, particularly web applications. It uses a component-based architecture, virtual DOM for efficient updates, and a unidirectional data flow. Benefits include reusable components, better performance, and a large ecosystem.

2. What is JSX?

JSX (JavaScript XML) is a syntax extension that allows you to write HTML-like code in JavaScript. It gets transpiled to React.createElement() calls and makes component code more readable and maintainable.

3. What is the Virtual DOM?

The Virtual DOM is a JavaScript representation of the real DOM. React uses it to optimize rendering by comparing the virtual DOM with the previous version and only updating the parts that changed in the real DOM, making updates more efficient.

4. What is the difference between props and state?

• Props: Read-only data passed from parent to child components

• State: Mutable data managed within the component

• Props flow down, state flows up

5. What are React keys and why are they important?

Keys help React identify which items have changed, been added, or removed in lists. They should be unique among siblings and stable across re-renders. Without keys, React may incorrectly reuse DOM elements, leading to performance issues and bugs.

Components & Lifecycle

6. What is the difference between functional and class components?

• Functional: Modern approach using functions and hooks

• Class: Traditional approach using ES6 classes and lifecycle methods

• Functional components are preferred in modern React development

7. What are the different phases of the component lifecycle?

• Mounting: Component is created and inserted into the DOM

• Updating: Component re-renders due to state or props changes

• Unmounting: Component is removed from the DOM

8. What is component composition?

Component composition is the pattern of building complex UIs by combining simpler components. It promotes reusability, maintainability, and follows the single responsibility principle.

Hooks

9. What are React hooks?

Hooks are functions that let you use state and other React features in functional components. They allow you to reuse stateful logic between components without changing component hierarchy.

10. What is useState and how does it work?

useState is a hook that returns a stateful value and a function to update it. It takes an initial value and returns an array with the current state and a setter function.

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

11. What is useEffect and when to use it?

useEffect lets you perform side effects in functional components. It combines componentDidMount, componentDidUpdate, and componentWillUnmount from class components.

useEffect(() => {
  // Side effect
  return () => {
    // Cleanup
  };
}, [dependencies]);

12. What is useContext?

useContext provides a way to pass data through the component tree without having to pass props down manually at every level. It consumes a context created by React.createContext().

13. What is useReducer and when to use it?

useReducer is an alternative to useState for managing complex state logic. It follows the reducer pattern and is useful when state updates depend on previous state or when you have multiple sub-values.

14. What is useMemo and useCallback?

• useMemo: Memoizes the result of a computation

• useCallback: Memoizes a function to prevent unnecessary re-renders

Performance & Optimization

15. How do you optimize React performance?

• React.memo() for preventing unnecessary re-renders

• useMemo() and useCallback() for expensive calculations

• Code splitting with React.lazy() and Suspense

• Virtual scrolling for large lists

16. What is React.memo()?

React.memo() is a higher-order component that memoizes the result of a component. It only re-renders if its props have changed, helping to prevent unnecessary re-renders.

17. What is code splitting in React?

Code splitting is the technique of splitting your code into smaller chunks that can be loaded on demand. React.lazy() and Suspense make it easy to implement code splitting for components.

State Management

18. What are the different ways to manage state in React?

• Local state with useState

• Context API for sharing state across components

• External libraries like Redux, Zustand, or Jotai

19. What is Redux and when to use it?

Redux is a predictable state container for JavaScript apps. It centralizes application state and makes state changes predictable through pure functions called reducers. Use it when you have complex state logic or need to share state across many components.

20. What is the Context API?

The Context API provides a way to pass data through the component tree without having to pass props down manually at every level. It's useful for sharing global data like themes, user authentication, or language preferences.

Advanced Concepts

21. What are Higher-Order Components (HOCs)?

HOCs are functions that take a component and return a new component with additional functionality. They are a pattern for reusing component logic, though hooks are now preferred for most use cases.

22. What are Render Props?

Render props is a pattern where a component accepts a function as a prop and calls it to determine what to render. It's another way to share code between components.

23. What are Custom Hooks?

Custom hooks are JavaScript functions that start with "use" and can call other hooks. They allow you to extract component logic into reusable functions.

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

• Controlled: Form data is handled by React state

• Uncontrolled: Form data is handled by the DOM itself

25. What is the difference between React and ReactDOM?

React is the core library that defines components and their behavior. ReactDOM is the package that provides DOM-specific methods for rendering React components to the DOM.

Testing & Debugging

26. How do you test React components?

• Jest for unit testing and mocking

• React Testing Library for component testing

• Cypress or Playwright for end-to-end testing

27. What is the difference between shallow and deep testing?

• Shallow: Tests component in isolation without child components

• Deep: Tests component with all its child components

Practical Scenarios

28. How would you handle forms in React?

Forms can be handled using controlled components with useState, form libraries like Formik or React Hook Form, or uncontrolled components with useRef. The choice depends on complexity and requirements.

29. How would you implement authentication in React?

• Context API for global auth state

• Protected routes with conditional rendering

• JWT tokens for API authentication

30. How would you handle API calls in React?

• useEffect for side effects

• Custom hooks for reusable API logic

• Libraries like React Query or SWR for data fetching

Common Pitfalls & Best Practices

31. What are common React anti-patterns?

• Mutating state directly

• Using array index as key

• Creating components inside render methods

• Overusing useEffect

32. What are React best practices?

• Keep components small and focused

• Use functional components and hooks

• Implement proper error boundaries

• Use TypeScript for better type safety