41. What is the primary use case for React context?
- a) Sharing data across the component tree without prop drilling
- b) Replacing Redux in all applications
- c) Managing form state
- d) Handling API requests
Answer: A - Context provides a way to pass data through the component tree without manually passing props at every level.
42. How to prevent unnecessary re-renders with React.memo?
- a) Memoize functional components when props don't change
- b) Convert components to classes
- c) Use shouldComponentUpdate
- d) Always wrap all components
Answer: A - React.memo performs shallow prop comparison (can customize with second argument).
43. What is the key difference between useMemo and useCallback?
- a) useMemo memoizes values, useCallback memoizes functions
- b) useMemo is for classes, useCallback for functions
- c) No difference - they're aliases
- d) useCallback is deprecated
Answer: A - Both optimize performance but target different use cases.
44. How to handle async operations in useEffect?
- a) Use cleanup function to cancel pending requests
- b) Ignore race conditions
- c) Always use async/await directly in useEffect
- d) Move all async logic to Redux
Answer: A - Cleanup prevents state updates on unmounted components (common with fetch requests).
45. What is the purpose of React portals?
- a) Render children outside DOM hierarchy
- b) Create reusable component templates
- c) Improve SSR performance
- d) Replace iframes
Answer: A - Commonly used for modals, tooltips, or overlays that need to break out of container CSS.
46. How to implement dark mode with React context?
- a) Create ThemeContext with current theme state
- b) Use component state in App.js
- c) Require CSS preprocessor
- d) Browser localStorage only
Answer: A - Context provides theme state to all components, combined with localStorage for persistence.
47. What is the correct way to update nested state?
- a) Spread existing state before updating: setUser(prev => ({...prev, name: 'New'}))
- b) Direct mutation: user.name = 'New'
- c) forceUpdate()
- d) Use Immer.js always
Answer: A - React state should be treated as immutable to ensure proper re-renders.
48. When would you use useImperativeHandle?
- a) Customize instance value exposed to parent components via ref
- b) Replace forwardRef
- c) Access child state directly
- d) All functional components need it
Answer: A - Rarely needed but useful for exposing specific imperative methods (e.g., focus()).
49. What is the primary benefit of Redux Toolkit?
- a) Reduces Redux boilerplate code
- b) Replaces React context
- c) Automatic performance optimization
- d) Built-in routing
Answer: A - Provides configureStore, createSlice, and other utilities to simplify Redux.
50. How to test React components that use hooks?
- a) React Testing Library with act()
- b) Enzyme only
- c) Avoid testing hooks
- d) Mock all hooks
Answer: A - RTL encourages testing behavior rather than implementation details.
51. What is the purpose of React Server Components?
- a) Reduce client-side bundle size
- b) Replace SSR
- c) Improve SEO only
- d) Deprecate hooks
Answer: A - Allows components to render on the server by default (zero bundle size impact).
52. How to handle forms in React?
- a) Controlled components with state
- b) Uncontrolled with refs
- c) Form libraries like Formik
- d) All of the above
Answer: D - All are valid approaches depending on complexity.
53. What is the key advantage of Next.js over plain React?
- a) Built-in SSR/SSG and routing
- b) Better state management
- c) No need for hooks
- d) Automatic testing
Answer: A - Next.js provides server-side rendering, static generation, and file-based routing out of the box.
54. How to optimize large lists in React?
- a) Windowing (react-window/react-virtualized)
- b) CSS overflow
- c) Pagination only
- d) Reduce component size
Answer: A - Window rendering only renders visible items to the DOM.
55. What is the purpose of React's Suspense?
- a) Declaratively specify loading states
- b) Handle all errors
- c) Replace useEffect
- d) Manage state transitions
Answer: A - Shows fallback UI while waiting for data or code to load.
56. How to share logic between class components?
- a) Higher-Order Components (HOCs)
- b) Custom hooks
- c) Mixins (deprecated)
- d) Inheritance
Answer: A - HOCs wrap components to inject props/behavior (hooks preferred for new code).
57. What does React's Concurrent Mode enable?
- a) Interruptible rendering for better UX
- b) Automatic multithreading
- c) Faster API calls
- d) Simplified state management
Answer: A - Allows React to pause/resume rendering to prioritize user interactions.
58. How to implement authentication in React apps?
- a) Context/state for auth state + protected routes
- b) localStorage only
- c) Cookies automatically handle it
- d) All components check auth
Answer: A - Typically combines context for state, route guards, and token storage.
59. What is the primary use of useDebugValue?
- a) Display custom hook labels in React DevTools
- b) Console.log alternative
- c) Debug production builds
- d) Replace PropTypes
Answer: A - Helps identify custom hooks in development.
60. How to handle CSS in React?
- a) CSS Modules
- b) Styled-components
- c) Inline styles
- d) All of the above
Answer: D - React doesn't enforce any specific CSS approach.