React Routing and Performance 3 — Questions and Answers
Question 1: Which component must wrap a React.lazy component to handle the loading state?
- <Suspense> (Correct answer)
- <ErrorBoundary>
- <Fragment>
- <Provider>
Correct answer: <Suspense>
<Suspense> displays a fallback UI while a lazily loaded component is being fetched.
Question 2: In React Router v6, how do you navigate programmatically after a form submission?
- Call the function returned by useNavigate (Correct answer)
- Mutate window.location directly
- Use the useHistory push method
- Render a <Redirect> component
Correct answer: Call the function returned by useNavigate
useNavigate returns a function you call with a path to navigate programmatically in v6.
Question 3: What does the key prop's stability help React optimize during list re-renders?
- Matching elements between renders to minimize DOM operations (Correct answer)
- Sorting the list alphabetically
- Encrypting list data
- Caching network requests
Correct answer: Matching elements between renders to minimize DOM operations
Stable keys let React identify which list items changed, moved, or were removed, reducing DOM work.
Question 4: Which technique helps avoid unnecessary re-renders caused by passing new object literals as props?
- Memoizing the object with useMemo (Correct answer)
- Wrapping it in useEffect
- Using a class component
- Adding more keys
Correct answer: Memoizing the object with useMemo
A new object literal each render breaks memoization, so useMemo keeps a stable reference.
Question 5: How do you define a URL parameter in a React Router v6 path?
- Use a colon prefix like /users/:id (Correct answer)
- Use braces like /users/{id}
- Use brackets like /users/[id]
- Use a question mark like /users/?id
Correct answer: Use a colon prefix like /users/:id
React Router uses a colon prefix (:id) to declare a dynamic URL segment.
Question 6: Which hook reads dynamic route parameters from the URL?
- useParams (Correct answer)
- useSearchParams
- useLocation
- useMatch
Correct answer: useParams
useParams returns an object of key/value pairs for the dynamic params of the current route.
Question 7: What is a common performance benefit of virtualizing a long list (windowing)?
- Only visible rows are rendered to the DOM, reducing nodes (Correct answer)
- All rows render faster simultaneously
- It removes the need for keys
- It disables scrolling
Correct answer: Only visible rows are rendered to the DOM, reducing nodes
List virtualization renders only items currently in the viewport, drastically reducing DOM nodes.
React Routing and Performance 3
Which component must wrap a React.lazy component to handle the loading state?