🔹 Section 1: Basic React Questions
1. What is React?
React is a JavaScript library used for building user interfaces, especially single-page applications (SPA).
2. What are the features of React?
- Component-based architecture
- Virtual DOM
- One-way data binding
- Fast rendering
- Reusable components
3. What is JSX?
JSX stands for JavaScript XML. It allows writing HTML inside JavaScript.
Example:
const element = <h1>Hello World</h1>;4. What is a component in React?
A component is a reusable piece of UI.
Types:
- Functional Component
- Class Component
5. What is Virtual DOM?
Virtual DOM is a lightweight copy of real DOM that improves performance by updating only changed parts.
🔹 Section 2: Intermediate Questions
6. What is state in React?
State is an object that stores dynamic data in a component.
7. What are props?
Props are used to pass data from parent to child components.
8. Difference between state and props?
| State | Props |
|---|---|
| Internal data | External data |
| Can be changed | Cannot be changed |
| Managed inside component | Passed from parent |
9. What are hooks in React?
Hooks are special functions that let you use state and lifecycle features in functional components.
10. Name some common hooks.
- useState
- useEffect
- useContext
- useRef
- useMemo
11. What is useState?
It is used to manage state in functional components.
12. What is useEffect?
It is used for side effects like API calls, DOM updates, etc.
🔹 Section 3: Advanced Questions
13. What is reconciliation in React?
It is the process of updating the DOM efficiently by comparing Virtual DOM changes.
14. What is React Router?
React Router is used for navigation between pages in React apps.
15. What is conditional rendering?
Rendering UI based on conditions.
Example:
{isLoggedIn ? <Home /> : <Login />}16. What is lifting state up?
Moving state from child component to parent to share data between components.
17. What are controlled components?
Form elements controlled by React state.
18. What are uncontrolled components?
Form elements handled by the DOM instead of React state.
🔹 Section 4: Lifecycle & Class Components
19. What are lifecycle methods?
Methods that run at different stages of a component:
- Mounting
- Updating
- Unmounting
20. Name lifecycle methods.
- componentDidMount
- componentDidUpdate
- componentWillUnmount
🔹 Section 5: Performance & Optimization
21. What is memoization in React?
A technique to prevent unnecessary re-renders.
22. What is React.memo?
It is used to optimize functional components by memorizing output.
23. What is useMemo?
It caches expensive calculations.
24. What is useCallback?
It returns a memoized function.
🔹 Section 6: Redux & State Management
25. What is Redux?
Redux is a state management library for React.
26. What are Redux components?
- Store
- Action
- Reducer
27. What is the store?
Central place where application state is stored.
🔹 Section 7: API & Data Handling
28. How do you call API in React?
Using:
- fetch
- axios
- useEffect hook
29. What is Axios?
A library used to make HTTP requests.
🔹 Section 8: Routing
30. What is SPA?
Single Page Application loads only one HTML page and updates dynamically.
31. What is Link in React Router?
Used for navigation without reloading page.
🔹 Section 9: Real Interview Questions
32. Why use React instead of JavaScript?
Because React provides:
- Reusable components
- Fast rendering
- Better structure
33. What are keys in React?
Keys help React identify list items uniquely.
34. Why is Virtual DOM faster?
Because it updates only changed elements instead of full page.
35. What are fragments?
Used to group elements without adding extra nodes.
🔹 Section 10: Tricky Questions
36. Can we use setState in useEffect?
Yes, but carefully to avoid infinite loops.
37. What happens if we don’t use keys in lists?
React may render elements inefficiently or incorrectly.
38. Is React a framework?
No, React is a library, not a full framework.
39. What is prop drilling?
Passing props through multiple components unnecessarily.
40. How to avoid prop drilling?
Using:
- Context API
- Redux