Full-Stack Development Full-Stack Development Frontend Frameworks & UI Architecture 2 — Questions and Answers
Question 1: Which state management library uses a single immutable state tree and pure reducer functions?
- MobX
- Redux (Correct answer)
- Zustand
- Recoil
Correct answer: Redux
Redux enforces a single source of truth with a read-only state tree modified only by pure reducer functions dispatched via actions.
Question 2: What is the main advantage of code splitting in a React application?
- It splits CSS from JavaScript
- It reduces initial bundle size by loading code only when needed (Correct answer)
- It separates business logic from UI components
- It enables server-side rendering
Correct answer: It reduces initial bundle size by loading code only when needed
Code splitting with React.lazy and dynamic import() defers loading of non-critical modules until they are actually needed, improving initial load time.
Question 3: In component-driven development, what is the purpose of 'prop drilling'?
- A technique to optimize rendering by memoizing props
- Passing data through intermediate components that don't use it to reach a deeply nested child (Correct answer)
- Drilling holes in DOM nodes for event bubbling
- Injecting services into components via dependency injection
Correct answer: Passing data through intermediate components that don't use it to reach a deeply nested child
Prop drilling refers to threading props through multiple layers of components solely to pass data to a deeply nested component that actually needs it.
Question 4: Which React API is used to avoid prop drilling by sharing state across many components without passing props explicitly?
- useRef
- useCallback
- Context API (Correct answer)
- useMemo
Correct answer: Context API
React's Context API creates a global store accessible by any component in the tree via useContext, eliminating the need to pass props through every level.
Question 5: What is a 'controlled component' in React forms?
- A component wrapped in React.memo to control re-renders
- A form element whose value is driven by React state (Correct answer)
- A component managed by the Angular control flow
- A form validated by an external library
Correct answer: A form element whose value is driven by React state
In a controlled component, form input values are stored in React state and updated via onChange handlers, making React the single source of truth.
Question 6: What does the React hook `useMemo` primarily help with?
- Persisting values across component unmounts
- Memoizing expensive computed values to avoid recalculation on every render (Correct answer)
- Memoizing callback functions to maintain referential equality
- Synchronizing state with localStorage
Correct answer: Memoizing expensive computed values to avoid recalculation on every render
useMemo caches the result of an expensive computation and only recalculates when its dependencies change, preventing unnecessary work on re-renders.
Full-Stack Development Full-Stack Development Frontend Frameworks & UI Architecture 2
Which state management library uses a single immutable state tree and pure reducer functions?