React Routing and Performance 3

Question 1

Which component must wrap a React.lazy component to handle the loading state?

Accepted Answer

Answer

<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?

Accepted Answer

Call the function returned by useNavigate

Answer

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?

Accepted Answer

Matching elements between renders to minimize DOM operations

Answer

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?

Accepted Answer

Memoizing the object with useMemo

Answer

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?

Accepted Answer

Use a colon prefix like /users/:id

Answer

React Router uses a colon prefix (:id) to declare a dynamic URL segment.

React Practice Test