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. PUT
B. DELETE
C. GET
D. POST

2 What does an HTTP status code of 404 indicate?

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

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

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

4 Which Axios method sends a request to retrieve data?

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

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

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

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

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

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

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

8 Which example represents client state?

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

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

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

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

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

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 replace all route definitions
D. It can reduce repeated network requests

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 stores UI state in the URL
C. It blocks rendering until logout
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 switch views without full page reloads
B. To execute database queries in components
C. To encrypt requests sent to APIs
D. To compile JSX into browser code

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

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

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

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

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 protected route condition
D. A nested layout component

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

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

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

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

19 What is the purpose of a protected route?

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

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 prevent users from changing routes
C. To store route data in local state
D. To combine every route into one file

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. DELETE /api/users/42
B. POST /api/users/42
C. PUT /api/users/42
D. GET /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. 201 Created
B. 204 No Content
C. 200 OK
D. 304 Not Modified

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 fetch again inside the finally block
C. Call response.json() before checking response.ok
D. Check response.ok and throw when it is false

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. Neither client supports JSON responses without a custom adapter
C. Both clients require calling response.json() after every request
D. Axios parses JSON automatically, while Fetch requires response.json()

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 an empty-state message such as "No products found"
D. Display a retry message that says the server failed

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. Cancel obsolete requests or verify the request identity before updating state
B. Render every response in the order it reaches the browser
C. Clear the error state whenever any response arrives
D. Ignore all responses after the first request completes

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 runs the side effect after rendering and avoids repeated requests during render
B. It converts server data into client state automatically
C. It guarantees that the request will never fail
D. It prevents the component from rendering JSX

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. [fetch]
B. [userId]
C. []
D. [setUserId]

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

Distinction between client state and server state Medium
A. Whether a sidebar is currently expanded
B. The stock quantity reported by an inventory service
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 is shared, asynchronous, cacheable, and can become stale
B. Server state can only be stored in component props
C. Server state never changes after the first successful fetch
D. Local UI state always requires HTTP requests

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 eliminates the need for loading states
B. It prevents all components from rendering at the same time
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 force every query to use the POST method
C. To disable automatic refetching for the query
D. To store the value in the browser's URL automatically

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. Invalidate the relevant product-list query
B. Change the browser's HTTP protocol
C. Clear every local component variable
D. Remove the React Query provider

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. Optimistic navigation without any server request
B. A request that can never produce an error
C. Permanent offline storage without expiration
D. Stale-while-revalidate behavior

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. Data is deleted from the cache after five minutes
B. Data is considered fresh longer and is refetched less often
C. Requests are forced to use a five-minute timeout
D. The query becomes permanently synchronized with the server

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

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

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 settings and no child route
B. A route with path :settings
C. A route with path * only
D. A route with path settings/*

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

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

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 products with value 73
B. The route name 73 with value productId
C. The query key productId with value products
D. The parameter productId with value 73

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

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

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. Create a second user resource with a new identifier
C. Replace user 42 with the submitted representation again
D. Treat PUT as a partial update and preserve omitted fields

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. 204 No Content with a retry instruction
B. 200 OK with an empty response body
C. 202 Accepted with a Location header
D. 201 Created with the order representation

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. Use response.statusText because it always contains the JSON message
D. Call response.json() and rely on fetch to reject automatically

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. Mark the original request as retried before replaying it
B. Retry every failed request after increasing the timeout
C. Clear the response body before passing the error onward
D. Retry only requests whose method is GET

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=true, existing data, and a recorded error
B. loading=false, existing data, and no error because data exists
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 a spinner whenever data is falsy
B. Render empty state whenever data.length === 0
C. Render a full loader only without data, empty state after success, and inline errors during refetch
D. Render the error screen whenever any request has ever failed

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. Sort responses by arrival time before updating component state
C. Use an empty dependency array so the effect runs only once
D. Store the category in a ref and ignore all later responses

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. Disable the exhaustive-dependencies lint rule
B. Remove filters from the dependency array
C. Move the fetch call into the component render function
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 server state because sorting affects the request
B. Both are client state because React renders both
C. The list is client state, while sort direction is server state
D. The list is server state, while sort direction is client state

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. The previous request can resolve after the dependency-triggered effect starts
C. Dependency arrays automatically cache responses by route ID
D. Effects execute before React commits the new route

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 provide no built-in cache, deduplication, or freshness policy
D. Effects cannot update state after a promise resolves

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 queryKey: ['project', projectId] and read the ID from the query key
D. Use enabled: false and manually assign the returned project

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. Change the dashboard component's React key only
C. Set every query's staleTime to zero permanently
D. Call invalidateQueries for the dashboard query key

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 data is shown and refetched because it is always stale
B. The query fails because cached data cannot be reused
C. The data is treated as fresh and no refetch is required
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 placeholder or previously fetched page data while fetching
B. Clear the list before every page request
C. Use one permanent cache entry regardless of page number
D. Disable the query whenever the page number changes

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 server fallback that serves the SPA entry document
D. A useEffect that redirects after every refresh

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. Replace /users/new with a query parameter
B. Add a second browser history instance
C. Define the static /users/new route before the dynamic route
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. Reload the page before pushing the destination
B. Replace the current history entry with the destination
C. Navigate using a hash without changing history
D. Push the destination so the form remains in history

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. Move both values into a dynamic path segment
B. Set the new tag and reset page to 1 in the URL
C. Mutate the current URLSearchParams object without navigation
D. Set tag while retaining page=2 unconditionally
Previous MCQ
Unit 4
Next MCQ
Unit 6