141. When should you choose Zustand over Redux?
- a) When you need simpler setup with less boilerplate
- b) For complex state transitions with middleware
- c) When using class components
- d) Only for small projects
Answer: A - Zustand provides a minimal API with React-like updates.
142. What is the key advantage of Framer Motion over CSS animations?
- a) Physics-based animations and gesture support
- b) Smaller bundle size
- c) Better SSR compatibility
- d) No JavaScript required
Answer: A - Offers spring animations, drag gestures, and layout animations.
143. How does Jotai differ from Recoil?
- a) Uses atoms without need for providers
- b) Built-in async support
- c) More opinionated API
- d) Requires React 18+
Answer: A - Jotai has zero-config atoms while Recoil needs RecoilRoot.
144. What animation technique is best for FLIP transitions?
- a) react-flip-toolkit
- b) CSS transform properties
- c) Canvas API
- d) WebGL
Answer: A - FLIP (First Last Invert Play) optimizes layout animations.
145. When would you use Redux Saga?
- a) Complex async workflows with side effects
- b) Simple UI state management
- c) Replacing useContext
- d) Animation sequencing
Answer: A - Saga uses generators for advanced async patterns.
146. How to implement scroll-linked animations?
- a) react-intersection-observer + Framer
- b) window.scrollY listeners
- c) CSS @scroll-timeline
- d) All of the above
Answer: D - Modern browsers support scroll-driven animations natively.
147. What is the benefit of Valtio's proxy state?
- a) Mutable API with automatic re-renders
- b) Smaller bundle than Redux
- c) Built-in persistence
- d) Better TypeScript support
Answer: A - Uses JavaScript proxies for intuitive state updates.
148. How to animate SVG paths in React?
- a) react-spring + d3-interpolate
- b) CSS stroke-dashoffset
- c) GSAP library
- d) All of the above
Answer: D - Each method suits different complexity levels.
149. What is the primary advantage of XState over useReducer?
- a) Visualizable state machines with explicit transitions
- b) Better performance
- c) Smaller bundle size
- d) Built-in persistence
Answer: A - XState models complex workflows as finite state charts.
150. How to implement staggered animations in React?
- a) Framer Motion's staggerChildren
- b) CSS animation-delay
- c) Custom setTimeout hooks
- d) Both A and B
Answer: D - Framer provides declarative stagger APIs.
151. When to choose React Query over Redux?
- a) When managing server cache state
- b) For complex client-side state
- c) To replace all useContext usage
- d) Only with GraphQL
Answer: A - React Query specializes in async data synchronization.
152. What is the benefit of Three.js with React?
- a) Declarative 3D scene management
- b) Automatic shader compilation
- c) Built-in physics engine
- d) All of the above
Answer: A - react-three-fiber provides React components for Three.js objects.
153. How does Redux Toolkit simplify Redux?
- a) Auto-generated action creators
- b) Immer-powered reducers
- c) Built-in RTK Query
- d) All of the above
Answer: D - Reduces traditional Redux boilerplate significantly.
154. What is the best approach for gesture animations?
- a) Framer Motion's drag and pan gestures
- b) react-use-gesture hooks
- c) Custom touch event handlers
- d) Both A and B
Answer: D - Libraries handle velocity-based animations and touch devices.
155. When would you use MobX?
- a) For observable-based reactive state
- b) When preferring mutable state
- c) Both A and B
- d) Only with class components
Answer: C - MobX automatically tracks state dependencies.
156. How to implement exit animations in React?
- a) Framer Motion's AnimatePresence
- b) React Transition Group
- c) CSS animation-fill-mode
- d) All of the above
Answer: D - AnimatePresence handles unmounting animations elegantly.
157. What is the advantage of Recoil's atom families?
- a) Dynamic state instances with similar structure
- b) Better TypeScript support
- c) Automatic persistence
- d) Smaller memory footprint
Answer: A - Useful for lists where each item has its own state.
158. How to sync animation with audio playback?
- a) Web Audio API + requestAnimationFrame
- b) Howler.js + GSAP
- c) Custom React hooks
- d) All of the above
Answer: D - Requires precise timing synchronization.
159. What is the primary benefit of RTK Query?
- a) Auto-generated React hooks for API endpoints
- b) Replacement for Axios
- c) GraphQL-specific optimization
- d) WebSocket management
Answer: A - Eliminates handwritten data fetching logic.
160. How to implement physics-based animations?
- a) react-spring's physics props
- b) Matter.js integration
- c) CSS Houdini
- d) Both A and B
Answer: D - react-spring provides spring physics out of the box.