🔹 React Basics (1–15)
1. What is React?
React is a JavaScript library used to build fast, interactive user interfaces, especially Single Page Applications (SPA).
2. Who developed React?
React was developed by Facebook (Meta).
3. What are components in React?
Components are reusable UI blocks in React.
4. Types of components?
- Functional Components
- Class Components
5. What is JSX?
JSX is a syntax extension that allows writing HTML inside JavaScript.
6. Is JSX mandatory?
No, but it makes code cleaner and readable.
7. What is Virtual DOM?
Virtual DOM is a lightweight copy of Real DOM that improves performance.
8. How does React update the DOM?
React uses diffing algorithm to update only changed parts.
9. What is props?
Props are read-only data passed from parent to child component.
10. What is state?
State is mutable data managed inside a component.
11. Difference between props and state?
| Props | State |
|---|---|
| Read-only | Mutable |
| Passed from parent | Managed inside component |
12. What is setState?
Used to update state in class components.
13. What is useState?
Hook used to manage state in functional components.
const [count, setCount] = useState(0);
14. What is useEffect?
Hook used for side effects (API calls, timers).
15. useEffect lifecycle?
- ComponentDidMount
- ComponentDidUpdate
- ComponentWillUnmount
🔹 React Hooks & Advanced (16–35)
16. What are Hooks?
Hooks let you use state and lifecycle features in functional components.
17. Rules of Hooks?
- Only call at top level
- Only inside React functions
18. What is useContext?
Used to share data without props drilling.
19. What is props drilling?
Passing props through many levels unnecessarily.
20. What is useRef?
Used to access DOM elements or persist values.
21. What is useMemo?
Optimizes performance by memoizing values.
22. What is useCallback?
Memoizes functions to prevent re-creation.
23. Controlled component?
Form data controlled by React state.
24. Uncontrolled component?
Form data handled by DOM.
25. What is key in React?
Helps React identify list items uniquely.
26. Why keys are important?
Improves rendering performance.
27. What is lifting state up?
Moving shared state to common parent.
28. What is conditional rendering?
Rendering components based on conditions.
29. What is Fragment?
Used to group elements without extra DOM node.
30. What is StrictMode?
Highlights potential problems in app.
31. What is Error Boundary?
Catches JavaScript errors in components.
32. Can hooks be used in class components?
❌ No, hooks work only in functional components.
33. What is reconciliation?
Process of updating Virtual DOM.
34. What is React.memo?
Prevents unnecessary re-renders.
35. What is Pure Component?
Component that re-renders only when props/state change.
🔹 React Routing, Redux & Performance (36–50)
36. What is React Router?
Used for navigation in SPA.
37. What is BrowserRouter?
Wraps app for routing.
38. What is useParams?
Gets dynamic route values.
39. What is Redux?
State management library.
40. Redux core parts?
- Store
- Action
- Reducer
41. What is useSelector?
Access Redux state.
42. What is useDispatch?
Dispatch actions to Redux store.
43. What is Context API vs Redux?
Context → small apps
Redux → large apps
44. What is lazy loading?
Loads components only when needed.
45. What is Suspense?
Used with lazy loading.
46. What is code splitting?
Breaking bundle into smaller chunks.
47. What is HOC?
Higher Order Component enhances another component.
48. What is CSR?
Client Side Rendering.
49. What is SSR?
Server Side Rendering (Next.js).
50. Why React is fast?
Because of Virtual DOM + efficient diffing 🚀
