61. What is the primary purpose of React's useTransition hook?
- a) Mark low-priority state updates to avoid UI blocking
- b) Animate between components
- c) Handle route transitions
- d) Replace useEffect for async operations
Answer: A - Part of Concurrent Features, helps keep the UI responsive during heavy renders.
62. How to implement a debounced search input in React?
- a) useEffect with setTimeout cleanup
- b) onChange with immediate API call
- c) useMemo to cache results
- d) Redux middleware
Answer: A - Debouncing delays API calls until user stops typing (typically 300-500ms).
63. What is the key benefit of React's useDeferredValue?
- a) Delays updating non-urgent UI parts during heavy renders
- b) Improves API response times
- c) Replaces useState for complex state
- d) Automatically batches state updates
Answer: A - Works with useTransition to prioritize user interactions.
64. How to properly use useRef with TypeScript?
- a) const ref = useRef<HTMLInputElement>(null)
- b) const ref = useRef(null as HTMLInputElement)
- c) const ref: RefObject = useRef()
- d) All of the above
Answer: A - Generic type parameter ensures type safety when accessing ref.current.
65. What is the correct pattern for data fetching with Suspense?
- a) Wrap component in Suspense boundary with fallback
- b) Use useEffect with loading state
- c) Implement custom cache outside React
- d) Both A and C
Answer: D - Requires a cache that throws promises (like Relay or experimental Suspense APIs).
66. How to optimize context value updates?
- a) Memoize the context value with useMemo
- b) Split contexts by concern
- c) Use selectors for partial subscriptions
- d) All of the above
Answer: D - Prevents unnecessary re-renders when context changes.
67. What is the purpose of React's useId hook?
- a) Generate unique IDs stable across server/client
- b) Replace UUID libraries
- c) Create database keys
- d) Track component mounts
Answer: A - Essential for accessibility attributes (aria-labelledby) and SSR hydration.
68. How to implement a reusable drag-and-drop component?
- a) Combine useRef and native drag events
- b) Use libraries like react-dnd or react-beautiful-dnd
- c) HTML5 drag API only
- d) Both A and B
Answer: D - Libraries provide pre-built accessibility and edge case handling.
69. What is the key difference between useEffect and useLayoutEffect?
- a) useLayoutEffect fires synchronously before browser paint
- b) useEffect has better performance
- c) useLayoutEffect doesn't support cleanup
- d) No practical difference
Answer: A - useLayoutEffect is for DOM measurements/layout thrashing prevention.
70. How to implement undo/redo functionality?
- a) Use reducer with action history tracking
- b) Store state in localStorage
- c) Use Immer.js with patches
- d) Both A and C
Answer: D - Immer's patches simplify tracking incremental changes.
71. What is the purpose of React's Profiler API?
- a) Measure component rendering performance
- b) Track user analytics
- c) Debug network requests
- d) Replace React.memo
Answer: A - Identifies performance bottlenecks via onRender callback.
72. How to handle WebSockets in React?
- a) useEffect with cleanup for connection management
- b) Global variable outside components
- c) Context provider pattern
- d) Both A and C
Answer: D - Context shares socket instance, useEffect manages subscriptions.
73. What is the key advantage of React's compound components pattern?
- a) Flexible component composition via implicit state sharing
- b) Better performance than regular components
- c) Automatic prop drilling
- d) Built-in accessibility
Answer: A - Example: <Select> with <Option> children sharing state internally.
74. How to implement a responsive layout that adapts to screen size?
- a) CSS media queries
- b) Custom hook with window.matchMedia
- c) Third-party libraries like react-responsive
- d) All of the above
Answer: D - Each approach has valid use cases depending on complexity.
75. What is the purpose of React's experimental use hook?
- a) Consume promises and context in a unified way
- b) Replace all existing hooks
- c) Handle class component state
- d) Experimental feature not worth learning
Answer: A - Simplifies working with async data and context values (React Canary feature).
76. How to test components using React context?
- a) Wrap test component in context provider
- b) Mock useContext hook
- c) Use testing library's wrapper option
- d) Both A and C
Answer: D - RTL's render() accepts wrapper component for provider setup.
77. What is the primary benefit of React's Server Components?
- a) Zero bundle impact for server-rendered parts
- b) Automatic WebSocket support
- c) Built-in database access
- d) Replace client-side state management
Answer: A - Server Components don't ship JS to the client (unlike SSR).
78. How to implement a global store without Redux?
- a) Context + useReducer
- b) Zustand/Jotai libraries
- c) React Query for server state
- d) All of the above
Answer: D - Modern alternatives often provide better ergonomics than Redux.
79. What is the purpose of React's createRoot API?
- a) Enable Concurrent Features
- b) Replace ReactDOM.render
- c) Support multiple root components
- d) All of the above
Answer: D - Required for React 18+ features like transitions and streaming SSR.
80. How to implement internationalization (i18n) in React?
- a) react-i18next library
- b) Context with translation dictionaries
- c) Next.js built-in i18n routing
- d) All of the above
Answer: D - Choice depends on framework and complexity needs.