React Routing and Performance 2 — Questions and Answers
Question 1: In React Router v6, which component is used to render the matched child route inside a parent layout component?
- <Outlet /> (Correct answer)
- <Switch />
- <RouteChild />
- <Slot />
Correct answer: <Outlet />
<Outlet /> renders the matched nested child route inside a parent route's layout element.
Question 2: Which React Router hook returns the current location object including pathname and search params?
- useLocation (Correct answer)
- usePath
- useRoute
- useCurrent
Correct answer: useLocation
useLocation returns the current location object with pathname, search, hash, and state.
Question 3: What does React.memo do to a functional component?
- Memoizes the rendered output so it skips re-render when props are unchanged (Correct answer)
- Caches API responses inside the component
- Stores component state in localStorage
- Prevents the component from ever updating
Correct answer: Memoizes the rendered output so it skips re-render when props are unchanged
React.memo performs a shallow props comparison and skips re-rendering when props have not changed.
Question 4: Which hook lets you memoize an expensive computed value between renders?
- useMemo (Correct answer)
- useCallback
- useEffect
- useRef
Correct answer: useMemo
useMemo caches the result of an expensive calculation and recomputes only when dependencies change.
Question 5: What is the primary purpose of useCallback?
- Return a memoized function reference that stays stable between renders (Correct answer)
- Run side effects after render
- Cache a computed value
- Force a component to re-render
Correct answer: Return a memoized function reference that stays stable between renders
useCallback returns a memoized callback whose identity is preserved unless its dependencies change.
Question 6: Which React Router component creates a navigation link without a full page reload?
- <Link> (Correct answer)
- <a>
- <Anchor>
- <Goto>
Correct answer: <Link>
<Link> performs client-side navigation, updating the URL without a full page reload.
Question 7: What does code splitting with React.lazy primarily improve?
- Initial bundle size and load time by loading components on demand (Correct answer)
- Server-side rendering accuracy
- CSS specificity
- TypeScript type checking
Correct answer: Initial bundle size and load time by loading components on demand
React.lazy enables dynamic import so components load only when needed, reducing the initial bundle size.
React Routing and Performance 2
In React Router v6, which component is used to render the matched child route inside a parent layout component?