Frontend in depth

14 questions drawn from the parts of this series. Answers here count toward each post's own quiz.

1. Question 1 of 14·IntermediateIn the two-module-graph model, what does "use client" actually mean?

   It marks a component as browser-only, never rendered on the serverIt marks an entry of the client graph: everything that file imports is pulled into the client bundle, although Client Components are still SSR'd to HTML on first loadIt is required in every file that uses useState or useEffect, even leaf files imported by other Client ComponentsIt is the opposite of "use server": one marks client components, the other marks Server Components
2. Question 2 of 14·IntermediateA ReviewsDrawer (client, with open/close state) must show Reviews, an async Server Component that reads the DB. What is the right approach?

   Import Reviews directly in ReviewsDrawer; the bundler will keep it on the serverAdd "use server" to Reviews so the client can import itRender <Reviews /> in a parent Server Component and pass it into ReviewsDrawer as childrenTurn Reviews into a Client Component and fetch with useEffect
3. Question 3 of 14·IntermediateHow do staleTime and gcTime differ in TanStack Query v5?

   staleTime is the maximum time a query stays in cache; gcTime is the interval between two refetchesstaleTime decides how long a copy stays fresh (no refetch); gcTime decides how long an unused entry is kept before being removedThey measure the same thing; gcTime is just the new name of cacheTime for staleTimestaleTime applies only when offline, gcTime only when online
4. Question 4 of 14·AdvancedWhy should you not use a module-scope QueryClient on the server (Next.js)?

   Because a QueryClient cannot be serialized down to the clientBecause it makes the server bundle largerBecause one Node.js process serves many users; a shared client lets one user's data leak into the cache while rendering for anotherBecause staleTime is always 0 on the server
5. Question 5 of 14·IntermediateWhat is the design goal of the route map in the post, and what does it give you when someone renames an endpoint's path?

   Each endpoint is declared once (method, path, schema) and every caller-facing type is derived from it, so call sites that no longer match stop compilingHand-write a params interface per route so the IDE autocompletes better, and update them when the path changesGenerate code from an OpenAPI document at build time so no types have to be written by handType every path as plain string to keep the client flexible and leave validation to the server
6. Question 6 of 14·AdvancedYou declare const routes: RouteMap = { ... } and notice client calls never require params. What is the cause and the fix?

   Zod cannot infer params; add z.infer for each routeThe annotation widens path to string, so PathParams becomes {}; use defineRoutes<const R> or as const satisfies RouteMap to keep literalssatisfies always loses literals; drop it and use annotations onlyTemplate literal types do not work on nested objects; flatten the route map
7. Question 7 of 14·StarterA colleague writes a div with role="button" and an onClick, assuming that makes it accessible. What is missing?

   Nothing, role="button" already makes the element focusable and activatable with Enter/Space.Only aria-label, because the accessible name is the one thing ARIA does not provide.ARIA only changes what the element reports to assistive tech; focus, Enter and Space still need code, so a native button is better.aria-hidden, so screen readers do not read the content twice.
8. Question 8 of 14·IntermediateWhy does a typeable combobox use aria-activedescendant instead of roving tabindex to move through suggestions?

   Because DOM focus must stay on the input so users can browse suggestions and keep typing.Because no screen reader supports roving tabindex.Because aria-activedescendant scrolls the option into view and applies :focus-visible automatically.Because options cannot have ids, so they cannot receive real focus.
9. Question 9 of 14·IntermediateYou moved CSV parsing into a Web Worker, but the page still freezes for almost half a second when the worker sends the result (two hundred thousand objects) back. What is the main cause?

   The worker shares a thread with the main thread, so parsing still blocks the UI.Structured clone has to serialize and deserialize every object, so the main thread still pays when the data arrives.postMessage is fully asynchronous, so the result is delayed before reaching the main thread.A worker cannot return objects, only strings, so the result has to be JSON.parsed again.
10. Question 10 of 14·StarterYour page is slow because React has to render a list of ten thousand rows. Should you move this work into a Web Worker?

    Yes, because rendering is the heaviest work, so a worker will free the main thread.Yes, but only if you use SharedArrayBuffer to share the DOM between the two threads.No, because a worker cannot touch the DOM; the slow part is rendering, so you need virtualization or fewer nodes.No, because workers only run when the data is smaller than 1 MB.
11. Question 11 of 14·StarterLighthouse reports an LCP of 1.2 s while Search Console (CrUX) reports 3.8 s. How does the post say to read this?

    Field data is wrong because the lab machine is a controlled environment, so the lab number is more trustworthyLab data is obsolete; drop Lighthouse from CI and rely on CrUX onlyNeither is wrong: lab measures one fixed simulated machine, field measures real users with varied devices, networks and caches; use each for the right jobCrUX is always slower because it includes server time, while lab does not
12. Question 12 of 14·IntermediateHow should you avoid losing CLS and INP when the user closes the page?

    Queue events, flush on visibilitychange to hidden (with pagehide as a safety net), and send with sendBeacon or fetch with keepaliveSend with a plain fetch in an unload handler since it is the last event guaranteed to fireSend each metric as soon as it is measured, since that is the only way not to lose itSwitch to a synchronous XHR in beforeunload so the page waits for the request
13. Question 13 of 14·IntermediateA two-person team says "let's split into micro-frontends to make the app faster and builds quicker". Which assessment matches the post?

    Reasonable, since each smaller remote loads fasterWrong reasons: micro-frontends solve an organizational problem (many teams deploying independently) and usually make the app heavier; slow builds are a job for Turborepo/Nx and cachingReasonable, as long as each team uses its own frameworkOnly wrong in that they should use iframes instead of Module Federation
14. Question 14 of 14·AdvancedWhy must React and React DOM be declared shared singletons in Module Federation, and what happens if you forget one of them?

    Two React copies on the page prevent hooks/context from being shared; e.g. forgetting react-dom can cause "Invalid hook call" only on one navigation path, which is hard to reproduceSingletons make the remote bundle smaller; forgetting only increases download sizeSingletons are required so the remote and shell share CSSIf you forget, Module Federation automatically picks the newest version so nothing breaks