101. What is the primary benefit of using XState with React?
- a) Visualizable and predictable state management
- b) Automatic performance optimization
- c) Built-in API handling
- d) Replaces Redux entirely
Answer: A - Finite state machines explicitly model all possible states and transitions.
102. How to share UI components between React and React Native?
- a) react-native-web library
- b) Platform-specific files (.ios/.android.js)
- c) Custom abstraction layer
- d) All of the above
Answer: D - react-native-web enables web rendering of RN components.
103. What is the core principle of design systems in React?
- a) Reusable components with consistent API
- b) CSS-in-JS only
- c) Atomic design structure
- d) Both A and C
Answer: D - Combines reusable parts with systematic scale (atoms → organisms).
104. How to implement theming in a design system?
- a) CSS Variables + Context
- b) Styled-components ThemeProvider
- c) Tailwind config extension
- d) All of the above
Answer: D - Each approach supports dynamic theme switching.
105. What is the key difference between React Native and React DOM?
- a) RN renders to native views instead of DOM
- b) Different component lifecycle
- c) State management is incompatible
- d) JSX syntax differs
Answer: A - RN uses native iOS/Android components (View vs div).
106. How to handle navigation in React Native?
- a) React Navigation library
- b) Native stack navigators
- c) Custom router components
- d) Both A and B
Answer: D - React Navigation provides JS-based navigation solutions.
107. What is the purpose of Storybook in React?
- a) Isolated component development
- b) Visual test cases
- c) Documentation generation
- d) All of the above
Answer: D - Catalogs components with interactive props playground.
108. How to optimize React Native performance?
- a) FlatList for long lists
- b) Memoize expensive computations
- c) Use native driver for animations
- d) All of the above
Answer: D - RN bridge communication is the primary bottleneck.
109. What is the architectural benefit of headless components?
- a) Logic and UI decoupling
- b) Automatic accessibility
- c) Built-in state management
- d) Smaller bundle size
Answer: A - Provides behavior without imposing visual design (e.g., react-aria).
110. How to implement a monorepo for React components?
- a) Turborepo + npm workspaces
- b) Lerna with Yarn
- c) Nx build system
- d) All of the above
Answer: D - Each tool enables shared code across multiple projects.
111. What is the purpose of React Native's Hermes engine?
- a) Improve JS execution performance
- b) Replace Metro bundler
- c) Enable WebAssembly
- d) Simplify debugging
Answer: A - Optimized JavaScript engine for mobile devices.
112. How to structure a large-scale React project?
- a) Feature-based organization
- b) Atomic design folders
- c) Domain-driven design
- d) All valid approaches
Answer: D - Choice depends on team size and app complexity.
113. What is the benefit of CSS-in-JS in design systems?
- a) Scoped styles with props theming
- b) Automatic critical CSS extraction
- c) Better SSR support
- d) All of the above
Answer: D - Libraries like Styled-components enable dynamic styling.
114. How to handle offline support in React Native?
- a) AsyncStorage + redux-persist
- b) WatermelonDB for local data
- c) NetInfo API for connection status
- d) All of the above
Answer: D - Requires data synchronization strategy.
115. What is the purpose of React's useEvent RFC?
- a) Stable event handler references
- b) Replace all useEffect cases
- c) Native DOM event binding
- d) Animation timing control
Answer: A - Solves stale closure problems in event handlers (experimental).
116. How to implement micro-frontends with React?
- a) Module Federation (Webpack 5)
- b) Iframe embedding
- c) Single-spa framework
- d) All of the above
Answer: D - Module Federation enables shared dependency loading.
117. What is React Native's New Architecture?
- a) JSI + Fabric + TurboModules
- b) Hermes compiler
- c) React Server Components
- d) Expo-only features
Answer: A - Improves performance via direct native communication.
118. How to document component APIs in Storybook?
- a) Args tables + JSDoc
- b) MDX documentation
- c) TypeScript prop types
- d) All of the above
Answer: D - Auto-generates docs from PropTypes/TypeScript.
119. What is the benefit of React's canary releases?
- a) Early access to stable features
- b) Experimental functionality
- c) Avoid breaking changes
- d) Both A and B
Answer: D - Features like useEvent debut here before stable release.
120. How to implement dark mode in React Native?
- a) useColorScheme hook
- b) Context + StyleSheet.create
- c) react-native-dark-mode
- d) All of the above
Answer: D - Dynamic style loading based on system preference.