React Interview Questions and Answers

React Interview Questions and Answers

If you're preparing for a React interview, these 20 questions cover the fundamentals and the practical topics that interviewers ask most often. Use them to refresh your understanding and practice explaining concepts clearly.

1. What is React? React is a JavaScript library for building user interfaces. It helps developers create reusable UI components and update the DOM efficiently when data changes.

2. What is the Virtual DOM? The Virtual DOM is a lightweight in-memory representation of the real DOM. React compares the new Virtual DOM with the previous one and updates only the changed parts in the browser.

3. What is JSX? JSX is a syntax extension that lets you write HTML-like code inside JavaScript. React transforms JSX into regular JavaScript function calls.

4. What is the difference between props and state? Props are read-only inputs passed from a parent component. State is managed inside a component and changes over time based on user actions or data updates.

5. What is a functional component? A functional component is a JavaScript function that accepts props and returns JSX. Modern React development mainly uses functional components with hooks.

6. What are hooks in React? Hooks are built-in functions like useState and useEffect that let functional components use state, side effects, context, refs, and more.

7. What does useState do? useState adds local state to a functional component. It returns the current state value and a setter function to update it.

8. What is useEffect used for? useEffect handles side effects such as API calls, subscriptions, timers, and DOM interactions. It runs after the component renders.

9. What is the dependency array in useEffect? The dependency array controls when the effect runs. An empty array runs the effect once after mount, while specific dependencies rerun the effect when those values change.

10. What is conditional rendering? Conditional rendering means showing different UI based on conditions. In React, it is commonly done using if statements, ternary operators, or logical AND operators.

11. What are controlled components? Controlled components are form elements whose values are managed by React state. This gives you full control over user input and validation.

12. What is lifting state up? Lifting state up means moving shared state to the nearest common parent so multiple child components can access and update the same data consistently.

13. What is the key prop in lists? The key prop helps React identify which list items changed, were added, or were removed. Keys should be stable and unique for each sibling item.

14. What is React Router? React Router is a routing library used to handle navigation in React applications. It maps URLs to components and supports nested routes, route params, and protected routes.

15. What is memoization in React? Memoization is an optimization technique that avoids unnecessary recalculations or renders. Common tools include React.memo, useMemo, and useCallback.

16. What is the difference between useMemo and useCallback? useMemo memoizes a calculated value, while useCallback memoizes a function reference. Both help with performance optimization in the right situations.

17. What are refs in React? Refs provide a way to directly access DOM elements or persist mutable values without triggering re-renders. They are created with useRef.

18. What is Context API? The Context API lets you share data like themes, auth state, or language settings across the component tree without manually passing props at every level.

19. How does React handle forms? React forms are usually handled using controlled inputs, local state, and submit handlers. For larger apps, libraries like React Hook Form can simplify validation and state management.

20. How do you improve React performance? You can improve performance by splitting components, memoizing expensive work, lazy-loading routes, avoiding unnecessary re-renders, using proper keys, and profiling bottlenecks before optimizing.

Final Tip In React interviews, interviewers usually look for clarity more than memorized definitions. Focus on explaining concepts with small real-world examples and simple language.