21. What is the purpose of useReducer in React?
- a) Manage complex state logic
- b) Replace useState in all cases
- c) Handle side effects
- d) Create global state
Answer: A - useReducer is ideal for state that involves multiple sub-values or when the next state depends on the previous one.
22. How do you access DOM nodes directly in React?
- a) useRef hook
- b) document.getElementById()
- c) useState hook
- d) props.ref
Answer: A - useRef creates a mutable object that persists for the component lifetime and can hold DOM references.
23. What is the children prop?
- a) Content between component's opening and closing tags
- b) Child components defined in parent's state
- c) A special prop for lists
- d) React's internal component tree
Answer: A - children prop contains whatever is nested between the component's JSX tags.
24. Which method is called before a component is unmounted?
- a) componentWillUnmount (class) / cleanup in useEffect (hooks)
- b) componentDidUnmount
- c) render
- d) shouldComponentUpdate
Answer: A - Used for cleanup like canceling network requests or invalidating timers.
25. What is code-splitting in React?
- a) Splitting code into smaller bundles loaded on demand
- b) Dividing components into separate files
- c) Separating business logic from UI
- d) Breaking JSX into multiple functions
Answer: A - Achieved via React.lazy() or dynamic imports to improve performance.
26. How to prevent default behavior in React events?
- a) e.preventDefault()
- b) e.stopDefault()
- c) return false
- d) event.cancel()
Answer: A - Synthetic events in React mirror native DOM events but with cross-browser consistency.
27. What is the significance of the key prop?
- a) Helps React identify which items change/are added/removed
- b) Improves CSS styling
- c) Required for all props
- d) Used for component communication
Answer: A - Keys should be stable, predictable, and unique among siblings.
28. Difference between controlled vs uncontrolled components?
- a) Controlled: React manages state; Uncontrolled: DOM manages state
- b) Controlled: For forms; Uncontrolled: For non-form elements
- c) Controlled: Uses hooks; Uncontrolled: Uses classes
- d) No difference in React
Answer: A - Controlled components use React state, while uncontrolled components use refs to access DOM values directly.
29. What is React.lazy() used for?
- a) Lazy loading components
- b) Performance optimization
- c) Both A and B
- d) Asynchronous state updates
Answer: C - React.lazy() enables code-splitting by dynamically importing components when needed.
30. How to update state based on previous state?
- a) setState(prev => newState) (class) / setter(prev => newState) (hooks)
- b) this.state = newState
- c) forceUpdate()
- d) props.updateState()
Answer: A - The functional update form ensures you work with the latest state.
31. What is the purpose of React.Fragment?
- a) Group elements without adding extra DOM nodes
- b) Improve rendering performance
- c) Create reusable component templates
- d) Handle errors in child components
Answer: A - Fragments avoid unnecessary div wrappers that can break CSS layouts.
32. What does useLayoutEffect do?
- a) Fires synchronously after DOM mutations
- b) Replaces useEffect in all cases
- c) Measures DOM elements
- d) Handles animations
Answer: A - Use for DOM measurements or operations that must run before browser paint.
33. How to pass data from child to parent?
- a) Callback functions passed as props
- b) Directly modify parent's state
- c) Use global variables
- d) React context only
Answer: A - Parent defines a callback, child invokes it with data.
34. What is prop drilling?
- a) Passing props through multiple layers
- b) Validating props with PropTypes
- c) Sending props to child routes
- d) A performance optimization technique
Answer: A - Can be solved with Context API or state management libraries.
35. When to use useMemo?
- a) Memoize expensive calculations
- b) Cache API responses
- c) Replace useState
- d) All of the above
Answer: A - useMemo caches computation results between re-renders when dependencies don't change.
36. What is a custom hook?
- a) Reusable stateful logic function
- b) A React component
- c) A built-in React feature
- d) A lifecycle method
Answer: A - Custom hooks allow extracting component logic into reusable functions (must start with "use").
37. How does React Router handle 404 pages?
- a) <Route path="*" element={<NotFound />} />
- b) <NotFoundRoute />
- c) Automatic redirect
- d) Error boundaries
Answer: A - The catch-all "*" path matches when no other routes do (v6 syntax shown).
38. What is React.StrictMode?
- a) Highlights potential problems during development
- b) Enforces strict coding standards
- c) A performance optimization
- d) Required for production builds
Answer: A - Detects unsafe lifecycles, legacy API usage, and unexpected side effects.
39. How to optimize React rendering?
- a) React.memo, useMemo, useCallback
- b) Always use PureComponent
- c) Avoid hooks
- d) Use inline styles
Answer: A - Memoization prevents unnecessary re-renders of components/values/functions.
40. What is the purpose of error boundaries?
- a) Catch JavaScript errors in child components
- b) Handle API errors
- c) Validate props
- d) Replace try/catch blocks
Answer: A - Class components with static getDerivedStateFromError() or componentDidCatch().