Back to Subject

Unit 5: Client-Server Communication and Routing - Practice Quiz

INT252 — Web App Development With Reactjs 60 Questions
0 Correct 0 Wrong 60 Left
0/60

1 Which HTTP method is commonly used to retrieve a resource from a REST API?

HTTP fundamentals and REST principles Easy
A. POST
B. DELETE
C. GET
D. PUT

2 What does an HTTP status code of 404 indicate?

HTTP fundamentals and REST principles Easy
A. The server requires authentication
B. The resource was created
C. The request was successful
D. The resource was not found

3 What does the browser's fetch() function return?

Fetch API and Axios usage patterns Easy
A. A React component
B. An HTML element
C. A Promise
D. A JSON object

4 Which Axios method sends a request to retrieve data?

Fetch API and Axios usage patterns Easy
A. axios.get()
B. axios.post()
C. axios.delete()
D. axios.put()

5 What should a React application display while an API request is still in progress?

Handling loading, error, and empty states Easy
A. A loading indicator
B. An empty-state message
C. A not-found page
D. A success notification

6 When should an empty-state message normally be displayed?

Handling loading, error, and empty states Easy
A. When the component is unmounted
B. When the request has not started
C. When the server returns an error
D. When the request succeeds with no items

7 Which React Hook is commonly used to start data fetching after a component renders?

Side effects for data fetching Easy
A. useEffect
B. useState
C. useContext
D. useRef

8 Which example represents client state?

Distinction between client state and server state Easy
A. A server-generated order history
B. Whether a sidebar is open
C. A product list from an API
D. A user record from a database

9 Which server-data feature must usually be implemented manually when fetching with only useEffect?

Limitations of useEffect for data synchronization Easy
A. Passing component props
B. Caching responses
C. Handling click events
D. Rendering elements

10 Which React Query Hook is primarily used to fetch and manage server data?

Introduction to server state management using React Query Easy
A. useReducer
B. useMemo
C. useLayoutEffect
D. useQuery

11 What is a main benefit of caching server data?

Caching strategies and background synchronization concepts Easy
A. It can remove every server error
B. It can prevent component rendering
C. It can reduce repeated network requests
D. It can replace all route definitions

12 What does background synchronization do in a server-state library?

Caching strategies and background synchronization concepts Easy
A. It creates routes during compilation
B. It blocks rendering until logout
C. It stores UI state in the URL
D. It refreshes cached data behind the scenes

13 What is the main purpose of client-side routing in a React application?

Client-side routing fundamentals Easy
A. To encrypt requests sent to APIs
B. To execute database queries in components
C. To compile JSX into browser code
D. To switch views without full page reloads

14 In React Router, which component is commonly placed near the root to enable browser-based routing?

Routing configuration setup Easy
A. SuspenseList
B. QueryClient
C. StrictMode
D. BrowserRouter

15 Which React Router component is commonly used for declarative navigation?

Navigation between application views Easy
A. Link
B. Outlet
C. Navigate
D. Route

16 Given the route path /users/:id, what does :id represent?

Dynamic routes and route parameters Easy
A. A dynamic route parameter
B. A fixed query parameter
C. A nested layout component
D. A protected route condition

17 In the URL /products?category=books, which part is the query parameter value?

Query parameter handling Easy
A. products
B. /products
C. books
D. category

18 Which React Router component displays the matched child route inside a parent layout?

Nested routes and layout routes Easy
A. Outlet
B. Link
C. Routes
D. Navigate

19 What is the purpose of a protected route?

Protected routes Easy
A. To cache API responses between pages
B. To restrict access based on authorization
C. To parse parameters from the URL
D. To preload every component at startup

20 What is the main goal of route-based code splitting?

Route-based code splitting Easy
A. To load route code only when needed
B. To combine every route into one file
C. To prevent users from changing routes
D. To store route data in local state

21 A React application needs to update the email address of an existing user at /api/users/42. Which HTTP method best represents this operation when the complete updated representation is sent?

HTTP fundamentals and REST principles Medium
A. POST /api/users/42
B. DELETE /api/users/42
C. GET /api/users/42
D. PUT /api/users/42

22 An API successfully creates a new order after receiving a POST request. Which status code most appropriately communicates this result?

HTTP fundamentals and REST principles Medium
A. 200 OK
B. 304 Not Modified
C. 201 Created
D. 204 No Content

23 Which Fetch API pattern correctly treats an HTTP 404 response as an error that can be handled by catch?

Fetch API and Axios usage patterns Medium
A. Use response.statusText as the request promise
B. Call response.json() before checking response.ok
C. Check response.ok and throw when it is false
D. Call fetch again inside the finally block

24 Which statement correctly compares a successful JSON request using Fetch and Axios?

Fetch API and Axios usage patterns Medium
A. Fetch parses JSON automatically, while Axios requires response.json()
B. Both clients require calling response.json() after every request
C. Axios parses JSON automatically, while Fetch requires response.json()
D. Neither client supports JSON responses without a custom adapter

25 A product list request succeeds but returns an empty array. Which UI behavior best distinguishes this result from a failed request?

Handling loading, error, and empty states Medium
A. Display the loading spinner until another request succeeds
B. Redirect the user to the application's error boundary
C. Display a retry message that says the server failed
D. Display an empty-state message such as "No products found"

26 When a user changes a search filter while a previous request is still pending, which approach most effectively prevents stale results from replacing newer results?

Handling loading, error, and empty states Medium
A. Clear the error state whenever any response arrives
B. Render every response in the order it reaches the browser
C. Ignore all responses after the first request completes
D. Cancel obsolete requests or verify the request identity before updating state

27 Why is a data-fetching operation usually placed inside useEffect rather than executed directly in the component body?

Side effects for data fetching Medium
A. It prevents the component from rendering JSX
B. It guarantees that the request will never fail
C. It runs the side effect after rendering and avoids repeated requests during render
D. It converts server data into client state automatically

28 A component fetches data for userId. Which dependency array is appropriate when the effect should run again whenever userId changes?

Side effects for data fetching Medium
A. [setUserId]
B. []
C. [fetch]
D. [userId]

29 Which piece of data is most clearly client state rather than server state?

Distinction between client state and server state Medium
A. The stock quantity reported by an inventory service
B. Whether a sidebar is currently expanded
C. The authenticated user's profile returned by an API
D. The list of invoices loaded from a database

30 Why can server state require different handling from a local modal's open or closed state?

Distinction between client state and server state Medium
A. Server state can only be stored in component props
B. Server state is shared, asynchronous, cacheable, and can become stale
C. Local UI state always requires HTTP requests
D. Server state never changes after the first successful fetch

31 What is a common limitation of using a separate useEffect for every server-data dependency in a larger application?

Limitations of useEffect for data synchronization Medium
A. It prevents all components from rendering at the same time
B. It eliminates the need for loading states
C. It can lead to duplicated fetching logic, race conditions, and manual cache handling
D. It makes HTTP methods unavailable inside React components

32 In React Query, why should a query key include a changing value such as userId?

Introduction to server state management using React Query Medium
A. To identify different cached results for different users
B. To store the value in the browser's URL automatically
C. To disable automatic refetching for the query
D. To force every query to use the POST method

33 A mutation successfully updates a product's price. What is a typical React Query action to ensure a product-list query does not remain stale?

Introduction to server state management using React Query Medium
A. Remove the React Query provider
B. Clear every local component variable
C. Invalidate the relevant product-list query
D. Change the browser's HTTP protocol

34 A cached query is shown immediately while React Query fetches newer data in the background. What user experience does this provide?

Caching strategies and background synchronization concepts Medium
A. Permanent offline storage without expiration
B. Stale-while-revalidate behavior
C. Optimistic navigation without any server request
D. A request that can never produce an error

35 What is the likely effect of increasing a React Query staleTime from zero to five minutes?

Caching strategies and background synchronization concepts Medium
A. The query becomes permanently synchronized with the server
B. Data is deleted from the cache after five minutes
C. Requests are forced to use a five-minute timeout
D. Data is considered fresh longer and is refetched less often

36 What is the main advantage of client-side routing in a React single-page application?

Client-side routing fundamentals Medium
A. It prevents users from bookmarking application URLs
B. It changes displayed views while preserving the application runtime
C. It requires a full document reload for every view
D. It replaces the need for a web server in production

37 In a React Router configuration, which route pattern matches /settings but not /settings/profile when using nested route definitions?

Routing configuration setup Medium
A. A route with path * only
B. A route with path settings/*
C. A route with path :settings
D. A route with path settings and no child route

38 Which approach is generally preferred for navigation triggered by a button inside a React component?

Navigation between application views Medium
A. Call window.history.back() regardless of the destination
B. Assign a new value directly to window.location every time
C. Reload the document before rendering the destination
D. Use a router navigation function or a router link

39 A route is defined as /products/:productId. Which value should a component obtain from the route when the URL is /products/73?

Dynamic routes and route parameters Medium
A. The parameter productId with value 73
B. The route name 73 with value productId
C. The parameter products with value 73
D. The query key productId with value products

40 For the URL /search?term=react&page=2, which statement correctly describes term and page?

Query parameter handling Medium
A. They are query parameters that can represent filters or pagination
B. They are path parameters defined by route segments
C. They are hash fragments that appear after the # symbol
D. They are HTTP headers sent automatically by the browser

41 A client sends PUT /users/42 with a complete representation of a user. The request times out, so the client retries it. Which server behavior best preserves HTTP and REST semantics?

HTTP fundamentals and REST principles Hard
A. Return 409 Conflict because every retry is unsafe
B. Treat PUT as a partial update and preserve omitted fields
C. Replace user 42 with the submitted representation again
D. Create a second user resource with a new identifier

42 An API successfully processes POST /orders but the response body is empty because the resource is being finalized asynchronously. Which response most accurately communicates that processing has begun and identifies the future resource?

HTTP fundamentals and REST principles Hard
A. 201 Created with the order representation
B. 204 No Content with a retry instruction
C. 200 OK with an empty response body
D. 202 Accepted with a Location header

43 A React component uses fetch to load data. The server responds with status 404 and a JSON error body. Which implementation correctly causes the request to enter the catch path for that HTTP failure while preserving the parsed server message?

Fetch API and Axios usage patterns Hard
A. Abort the request whenever response.status is outside the 2xx range
B. Check response.ok, parse the body, then throw an error containing it
C. Call response.json() and rely on fetch to reject automatically
D. Use response.statusText because it always contains the JSON message

44 An Axios interceptor refreshes an expired token and retries the original request. Which design prevents an infinite retry loop when the refresh endpoint also returns 401?

Fetch API and Axios usage patterns Hard
A. Retry only requests whose method is GET
B. Retry every failed request after increasing the timeout
C. Clear the response body before passing the error onward
D. Mark the original request as retried before replaying it

45 A search page keeps displaying old results while a new query is pending. The new request fails, and the old results remain visible with an error message. Which state model best represents this situation?

Handling loading, error, and empty states Hard
A. loading=false, existing data, and no error because data exists
B. loading=true, existing data, and a recorded error
C. loading=true, data=null, and error=null
D. loading=false, data=[], and error=null

46 Which rendering rule most reliably distinguishes an initial load, a successful empty result, and a failed refetch with usable previous data?

Handling loading, error, and empty states Hard
A. Render empty state whenever data.length === 0
B. Render a spinner whenever data is falsy
C. Render the error screen whenever any request has ever failed
D. Render a full loader only without data, empty state after success, and inline errors during refetch

47 A component fetches /api/items/${category} inside useEffect. The user changes categories quickly, and the slower first response arrives after the second. Which approach prevents stale data from overwriting the current category?

Side effects for data fetching Hard
A. Abort or invalidate the previous request during effect cleanup
B. Use an empty dependency array so the effect runs only once
C. Store the category in a ref and ignore all later responses
D. Sort responses by arrival time before updating component state

48 A fetch effect depends on an object named filters, which is recreated on every render even when its values are unchanged. What is the most appropriate correction?

Side effects for data fetching Hard
A. Remove filters from the dependency array
B. Move the fetch call into the component render function
C. Disable the exhaustive-dependencies lint rule
D. Depend on stable primitive filter values or memoize the object

49 Which classification is most accurate for a paginated list loaded from an API and a locally selected sort direction?

Distinction between client state and server state Hard
A. Both are client state because React renders both
B. The list is server state, while sort direction is client state
C. The list is client state, while sort direction is server state
D. Both are server state because sorting affects the request

50 Why can a useEffect-based data-fetching implementation briefly show results for an old route after navigation, even when the dependency array includes the route ID?

Limitations of useEffect for data synchronization Hard
A. React guarantees that effects run only once per component
B. Dependency arrays automatically cache responses by route ID
C. Effects execute before React commits the new route
D. The previous request can resolve after the dependency-triggered effect starts

51 A component uses useEffect to synchronize a server record, local edits, retries, cache reuse, and refetching after window focus. Which limitation of this approach is most significant?

Limitations of useEffect for data synchronization Hard
A. Effects always prevent requests from running during development
B. Effects cannot issue asynchronous network requests
C. Effects cannot update state after a promise resolves
D. Effects provide no built-in cache, deduplication, or freshness policy

52 In React Query, a component displays a project's details. The project ID changes from 1 to 2. Which query configuration correctly keeps the records distinct and enables independent caching?

Introduction to server state management using React Query Hard
A. Use one global query key and overwrite its cached data
B. Use queryKey: ['project'] and switch only the query function
C. Use enabled: false and manually assign the returned project
D. Use queryKey: ['project', projectId] and read the ID from the query key

53 After a successful mutation updates a user's profile, the dashboard still shows an old cached summary. Which React Query action is generally appropriate when the mutation response does not contain the complete dashboard data?

Introduction to server state management using React Query Hard
A. Remove the mutation from the query cache
B. Set every query's staleTime to zero permanently
C. Call invalidateQueries for the dashboard query key
D. Change the dashboard component's React key only

54 A query uses a five-minute staleTime. The cached data is four minutes old, and the user revisits the page. What should normally happen?

Caching strategies and background synchronization concepts Hard
A. The query fails because cached data cannot be reused
B. The data is treated as fresh and no refetch is required
C. The data is shown and refetched because it is always stale
D. The cache is immediately deleted and the page blocks

55 A list should remain visible while a new page is fetched, but the UI must indicate that the page transition is in progress. Which strategy best supports this behavior?

Caching strategies and background synchronization concepts Hard
A. Use one permanent cache entry regardless of page number
B. Disable the query whenever the page number changes
C. Use placeholder or previously fetched page data while fetching
D. Clear the list before every page request

56 A single-page React application uses client-side routing. Clicking an internal navigation link works, but refreshing /reports/2025 returns a server 404. What is the fundamental missing configuration?

Client-side routing fundamentals Hard
A. A second React root for every route
B. A query parameter appended to the route
C. A useEffect that redirects after every refresh
D. A server fallback that serves the SPA entry document

57 A route configuration defines /users/:id before /users/new, and navigating to /users/new renders the user-detail page with id = "new". What is the most direct correction?

Routing configuration setup Hard
A. Define the static /users/new route before the dynamic route
B. Add a second browser history instance
C. Replace /users/new with a query parameter
D. Remove the id parameter from the dynamic route

58 A form submits a new record and then navigates to /records/17. The user presses Back and returns to the form, which should not resubmit. Which navigation behavior is usually appropriate after successful creation?

Navigation between application views Hard
A. Push the destination so the form remains in history
B. Navigate using a hash without changing history
C. Reload the page before pushing the destination
D. Replace the current history entry with the destination

59 A route /products/:productId renders a product page. The component fetches product data in an effect with an empty dependency array. What bug occurs when navigation changes only productId while the component instance is reused?

Dynamic routes and route parameters Hard
A. The component cannot access route parameters after the first render
B. The old product remains because the effect never runs for the new ID
C. The router creates a duplicate history entry automatically
D. The parameter is converted into a query string unexpectedly

60 A list URL is /items?tag=react&page=2. The user changes only the tag. Which update best preserves predictable browser navigation and avoids stale pagination semantics?

Query parameter handling Hard
A. Set tag while retaining page=2 unconditionally
B. Set the new tag and reset page to 1 in the URL
C. Mutate the current URLSearchParams object without navigation
D. Move both values into a dynamic path segment
Previous MCQ
Unit 4
Next MCQ
Unit 6