\n \n );\n}",
"label": "hooks-advanced.tsx"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "two distinct random strings"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "empty strings until hydration"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "identical numeric timestamps"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "identical non-empty strings"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "react.hooks_advanced__9506198",
"topic": "react",
"subSkill": "hooks_advanced",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Calling your Hooks in a different order each render will:"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "skip the very first render pass"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "confuse how React tracks them"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "make the component mount faster"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "reset each value to its default"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "react.concurrent_features__6073824",
"topic": "react",
"subSkill": "concurrent_features",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Following the Rules of Hooks, where must useTransition be called?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "within a conditional that guards its use"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "in an event handler after a user clicks"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "inside a loop that runs once per item"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "at the top level of a component or Hook"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "react.concurrent_features__6073831",
"topic": "react",
"subSkill": "concurrent_features",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Before any transition has started, what is the initial value of isPending?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "unset"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "false"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "zeroed"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "empty"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "react.concurrent_features__6073826",
"topic": "react",
"subSkill": "concurrent_features",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "React's ability to render interruptibly, pausing work to handle urgent input, is broadly called what?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "concurrent rendering"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "synchronous flushing"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "parallel threading"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "server streaming"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "react.concurrent_features__6073829",
"topic": "react",
"subSkill": "concurrent_features",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A Suspense boundary shows its fallback when a component inside it does what?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "renders twice in strict mode"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "returns null instead of markup"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "throws an error during its render"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "waits for data before it can render"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "react.concurrent_features__100234",
"topic": "react",
"subSkill": "concurrent_features",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is the first value returned by useTransition?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "A numeric counter of how many queued updates remain in the scheduler before the next browser paint tick occurs"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "An abort controller signal that child async operations can watch to cancel when the current route unmounts"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "A boolean indicating whether a lower-priority update triggered from the paired starter is still being rendered"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "A stable ref object pointing at the DOM node that last received focus while rendering was suspended or deferred"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "react.concurrent_features__6073833",
"topic": "react",
"subSkill": "concurrent_features",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "In React 18, createRoot replaced which older top-level rendering API?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "ReactDOM.render"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "ReactDOM.create"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "ReactDOM.attach"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "ReactDOM.mount"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "react.concurrent_features__500",
"topic": "react",
"subSkill": "concurrent_features",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What does useTransition provide?"
}
]
}
],
"code": {
"lang": "tsx",
"code": "const [isPending, startTransition] = useTransition();\nconst handleChange = (e) => {\n setInput(e.target.value); // urgent\n startTransition(() => setResults(search(e.target.value))); // deferred\n};",
"label": "concurrent-features.tsx"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "A way to mark state updates as non-urgent so the UI stays responsive"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "A way to make a setter synchronous so the DOM reflects it before the next line"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "A way to memoize a state value across renders so children skip reconciliation"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "A way to throttle state setters so they fire at most once per frame"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "react.concurrent_features__6073827",
"topic": "react",
"subSkill": "concurrent_features",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "By default, which kind of update does React treat as urgent (high priority)?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "a route change that loads a new screen"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "a background data refresh on a timer"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "a heavy list re-render after filtering"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "a direct interaction like a click"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "react.concurrent_features__6073832",
"topic": "react",
"subSkill": "concurrent_features",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "React has a name for a state update marked as non-urgent so it can be interrupted. What is it called?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "a mutation"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "a deferral"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "a suspension"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "a transition"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "react.concurrent_features__525",
"topic": "react",
"subSkill": "concurrent_features",
"difficulty": 5,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is 'time slicing' in the context of React's concurrent renderer?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Scheduling CSS animations to run at precisely defined frame interval boundaries"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Breaking render work into small chunks, yielding to the browser between them"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Splitting the server response into multiple streamed HTML chunks for the client"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Dividing the component tree across multiple parallel Web Worker threads"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "react.suspense_boundaries__4664618",
"topic": "react",
"subSkill": "suspense_boundaries",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A page keeps a bio inside a Suspense boundary and its navigations are already wrapped in a Transition. Switching from one person to another should bring the placeholder back rather than leave the previous bio on screen while the next one loads. Which change expresses that?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Put a key tied to the user id on the boundary or on a component above it"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Drop the Transition wrapper so every navigation counts as an urgent update"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Move the fetch into an effect that reruns whenever the user id changes"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Nest a second boundary inside the first one around just the bio element"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "react.suspense_boundaries__510",
"topic": "react",
"subSkill": "suspense_boundaries",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "In streaming SSR, why does splitting a page into more Suspense boundaries let some sections respond to clicks sooner?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "React hydrates each Suspense boundary in one pass once the full HTML arrives"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Hydration walks the tree top-down in document order and ignores boundaries"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Each boundary is an independent hydration unit, so interactive areas win"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Fallback markup stays inert, so a section is clickable just after its parent"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "react.suspense_boundaries__517",
"topic": "react",
"subSkill": "suspense_boundaries",
"difficulty": 5,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is the internal mechanism React uses to track which Suspense boundary should catch a thrown promise?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Each thrown promise object carries a direct reference to its Suspense boundary node"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "React uses standard try/catch blocks in the JavaScript call stack for matching"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "A global promise registry maps each thrown promise to its target Suspense boundary"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "React walks up the fiber tree from the suspending component to find the nearest Suspense"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "react.suspense_boundaries__516",
"topic": "react",
"subSkill": "suspense_boundaries",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "How does React's streaming SSR (renderToPipeableStream) handle Suspense boundaries?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "It waits for all Suspense boundaries to resolve before sending any HTML content"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "It renders all Suspense boundary content exclusively on the client side only"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "It sends fallback HTML immediately and streams replacement content when resolved"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "It completely skips Suspense boundaries during server-side rendering passes"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "react.suspense_boundaries__4927911",
"topic": "react",
"subSkill": "suspense_boundaries",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A page hosts two independent React apps, so this one is server-rendered with its own prefix option. Which id attribute does the emitted input carry on react 19.2?"
}
]
}
],
"code": {
"lang": "tsx",
"code": "import { useId } from \"react\";\nimport { renderToStaticMarkup } from \"react-dom/server\";\n\nfunction Field() {\n const id = useId();\n return ;\n}\n\nconst html = renderToStaticMarkup(, {\n identifierPrefix: \"app1\",\n});",
"label": "suspense-boundaries.tsx"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "id=\"_R_app1_0_\""
}
],
"shape": "code"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "id=\"_R_0_app1\""
}
],
"shape": "code"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "id=\"app1_R_0_\""
}
],
"shape": "code"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "id=\"_app1R_0_\""
}
],
"shape": "code"
}
]
}
},
{
"questionId": "react.suspense_boundaries__528",
"topic": "react",
"subSkill": "suspense_boundaries",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A list should show the nearest boundary's fallback while it loads. What kind of data layer makes that happen?"
}
]
}
],
"code": {
"lang": "tsx",
"code": "function UserProfile({ id }) {\n const { data } = useSuspenseQuery({\n queryKey: ['user', id],\n queryFn: () => fetchUser(id),\n });\n return
{data.name}
;\n}",
"label": "suspense-boundaries.tsx"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "A data layer that hooks into Suspense by throwing promises while pending"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "A React context provider that tracks global loading state for each route"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "An async function whose returned promise is awaited by the calling component"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "A server-side data store such as a relational database or an external REST API"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "react.suspense_boundaries__200006",
"topic": "react",
"subSkill": "suspense_boundaries",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Which statement best describes an error boundary's coverage of a suspending subtree?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "It handles setState warnings emitted by React to the console during the commit phase of render"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "It handles errors thrown during rendering or from a rejected promise resolved by the tree"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "It handles only click-handler errors dispatched by DOM event listeners inside the same region"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "It handles network status code mismatches reported by the browser fetch API across the page"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "react.suspense_boundaries__8020460",
"topic": "react",
"subSkill": "suspense_boundaries",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A reviews panel behind its own boundary renders the tag below next to its markup. After the review data resolves, the glimmer lingers a few hundred extra milliseconds before the panel appears, and the profiler shows no outstanding data reads at all during that gap. What is holding the reveal?"
}
]
}
],
"code": {
"lang": "tsx",
"code": "",
"label": "suspense-boundaries.tsx"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "The reveal is queued behind React's throttle window, which starts counting from the moment the panel's own promise was created."
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "React keeps that boundary closed until the referenced stylesheet has loaded, up to a timeout, so the panel is never shown unstyled."
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "React postpones every reveal by one animation frame per boundary, so a panel nested a few levels deep collects several frames."
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "A style tag inside a boundary forces a second render pass over the subtree, and the panel commits only once that pass finishes."
}
],
"shape": "long"
}
]
}
},
{
"questionId": "react.suspense_boundaries__1318477",
"topic": "react",
"subSkill": "suspense_boundaries",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Where do you put the components that may need to load inside a boundary?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Between the opening and closing wrapper tags"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Passed as arguments to a lazy import call"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "In a separate prop named children as a string"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Inside the value of the fallback prop instead"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "react.suspense_boundaries__519",
"topic": "react",
"subSkill": "suspense_boundaries",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A component inside a Suspense subtree throws a TypeError during render instead of suspending. Which handler sees that error?"
}
]
}
],
"code": {
"lang": "tsx",
"code": "function DataComponent({ id }) {\n const data = use(fetchUser(id));\n if (!data.name) throw new TypeError('bad payload');\n return
{data.name}
;\n}",
"label": "suspense-boundaries.tsx"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "React retries the failed render a second time before surfacing anything"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "The Suspense fallback replaces the subtree and renders the error message"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "The error propagates to the nearest ErrorBoundary, not the Suspense boundary"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "The throw escapes React entirely and unmounts the app to a blank page"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "react.performance_memo__2037014",
"topic": "react",
"subSkill": "performance_memo",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "The parent mounts and then re-renders because of a prop change outside the useMemo deps. What happens to the cached selector?"
}
]
}
],
"code": {
"lang": "tsx",
"code": "import { useMemo, useState, useEffect } from 'react';\nexport default function S({ data }) {\n const [, b] = useState(0);\n useEffect(() => { b(1); }, []);\n const sel = useMemo(() => data.filter(Boolean), [data]);\n return
{sel.length}
;\n}",
"label": "performance-memo.tsx"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Cache thrown away, React forces selector to recompute per mount"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Cache retained, the previous result reference is returned again"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Cache cleared, a new array is produced on every single render"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Cache serialized to the heap and rehydrated asynchronously later"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "react.performance_memo__924071",
"topic": "react",
"subSkill": "performance_memo",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Parent mounts and useEffect triggers one state change. What does the console show?"
}
]
}
],
"code": {
"lang": "tsx",
"code": "import { useMemo, useState, useEffect } from 'react';\nexport default function Once() {\n const [, bump] = useState(0);\n useEffect(() => { bump(1); }, []);\n const v = useMemo(() => { console.log('factory'); return 42; }, []);\n return
{v}
;\n}",
"label": "performance-memo.tsx"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "The factory logs on every parent render unconditionally"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "The factory logs three times covering mount and updates"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "The factory never logs because empty deps skip init"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "The factory logs exactly once during initial mount"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "react.performance_memo__841657316",
"topic": "react",
"subSkill": "performance_memo",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "The "
},
{
"t": "code",
"v": "use"
},
{
"t": "text",
"v": " prefix in "
},
{
"t": "code",
"v": "useMemo"
},
{
"t": "text",
"v": " and "
},
{
"t": "code",
"v": "useCallback"
},
{
"t": "text",
"v": " tells you they are what?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Slots"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Nodes"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Props"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Hooks"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "react.performance_memo__841657318",
"topic": "react",
"subSkill": "performance_memo",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Without "
},
{
"t": "code",
"v": "useMemo"
},
{
"t": "text",
"v": ", a value computed in the component body is recalculated how often?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Only once ever"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Once per mount"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "After unmount"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "On every render"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "react.performance_memo__40900",
"topic": "react",
"subSkill": "performance_memo",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is the danger of over-using "
},
{
"t": "code",
"v": "useMemo"
},
{
"t": "text",
"v": " and "
},
{
"t": "code",
"v": "useCallback"
},
{
"t": "text",
"v": "?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "They hold cached values for the app's lifetime, so long sessions leak memory steadily"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "They keep React DevTools from reporting re-render counts for those components"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "They opt a component out of concurrent rendering, including Suspense and transitions"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "They add overhead (memory, comparison cost) that can outweigh the savings for cheap operations"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "react.performance_memo__841657317",
"topic": "react",
"subSkill": "performance_memo",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What does "
},
{
"t": "code",
"v": "memo"
},
{
"t": "text",
"v": " look at to decide whether it can skip a re-render?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "The component's props"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "The window's size"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "The document's title"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "The component's state"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "react.performance_memo__841657313",
"topic": "react",
"subSkill": "performance_memo",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What belongs inside "
},
{
"t": "code",
"v": "useMemo"
},
{
"t": "text",
"v": "'s dependency array?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "The values the calculation reads"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "The JSX the component returns"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "The names of the Hooks used"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "The child components to render"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "react.performance_memo__841657306",
"topic": "react",
"subSkill": "performance_memo",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "When does the "
},
{
"t": "code",
"v": "build(data)"
},
{
"t": "text",
"v": " function run again?"
}
]
}
],
"code": {
"lang": "tsx",
"code": "const rows = useMemo(() => build(data), [data]);",
"label": "performance-memo.tsx"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "After each browser paint completes fully"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "On absolutely every render of the component"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "When a value in the dependency array changes"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Only one time when the component mounts"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "react.performance_memo__841657303",
"topic": "react",
"subSkill": "performance_memo",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "code",
"v": "useCallback"
},
{
"t": "text",
"v": " is used to cache which kind of thing?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "A function"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "A promise"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "A CSS class"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "A DOM node"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "react.performance_memo__1597128",
"topic": "react",
"subSkill": "performance_memo",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Two parent rerenders occur. What does the console sequence show from the useMemo factory?"
}
]
}
],
"code": {
"lang": "tsx",
"code": "import { useMemo, useState, useEffect } from 'react';\nexport default function K() {\n const [n, setN] = useState(0);\n useEffect(() => { setN(1); }, []);\n const v = useMemo(() => { console.log('calc'); return n; }, [[]]);\n return {v};\n}",
"label": "performance-memo.tsx"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "calc logs twice because the array literal is a new dep"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "calc logs three times because each hook call runs twice"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "calc never logs because React treats arrays as identical"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "calc logs once because empty arrays deep-equal themselves"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "react.server_components__523",
"topic": "react",
"subSkill": "server_components",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A Client Component imports a function from a module whose first line is "
},
{
"t": "code",
"v": "'use server'"
},
{
"t": "text",
"v": ". What has that first line done?"
}
]
}
],
"code": {
"lang": "tsx",
"code": "async function addToCart(productId) {\n 'use server';\n const cart = await getCart();\n await cart.addItem(productId);\n revalidatePath('/cart');\n}\n\n// Client Component can call this directly\n",
"label": "server-components.tsx"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "It marks that function as a Server Function the client may invoke by reference over the network"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "It schedules the function to run during server rendering, before the response streams"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "It marks the module as a Server Component, so its output renders on the server"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "It strips the function from the client bundle and is otherwise a build-time no-op"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "react.server_components__514",
"topic": "react",
"subSkill": "server_components",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What security consideration is important when using Server Actions?"
}
]
}
],
"code": {
"lang": "tsx",
"code": "'use server';\nasync function deletePost(id) {\n const user = await getAuthUser();\n if (!user) throw new Error('Unauthorized');\n const post = await db.posts.find(id);\n if (post.authorId !== user.id) throw new Error('Forbidden');\n await db.posts.delete(id);\n}",
"label": "server-components.tsx"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "No validation is needed since they run exclusively on the server runtime"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "They are public HTTP endpoints and must validate inputs and authenticate requests"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Only admin users can call Server Actions based on the default configuration"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Server Actions are inherently secure without any input validation needed"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "react.server_components__1023889",
"topic": "react",
"subSkill": "server_components",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Can a Server Component read directly from a database?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Yes, it can query the data store while rendering"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "No, it must call an API route to get the data"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "No, that access is limited to Client Components"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "No, only a Server Action may load the records"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "react.server_components__1023907",
"topic": "react",
"subSkill": "server_components",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Where does a React Server Component execute?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "On a CDN edge node that caches the finished markup"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "On the server, before the response reaches the browser"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "In the browser, right after the page finishes loading"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Inside a background web worker on the user's device"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "react.server_components__500812",
"topic": "react",
"subSkill": "server_components",
"difficulty": 5,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Which best characterizes how React de-duplicates identical data fetches within a single Server render?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Via request-scoped caching on top of the cache() primitive"
}
],
"shape": "code"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Via a module-level Map keyed on serialized argument shape per route"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Via automatic memoization of all async functions called in render"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Via browser HTTP caching layered under a service-worker bridge code"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "react.server_components__89302",
"topic": "react",
"subSkill": "server_components",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What can Server Components NOT do?"
}
]
}
],
"code": {
"lang": "tsx",
"code": "// Server Component - runs on server only:\nasync function UserProfile({ userId }) {\n const user = await db.query('SELECT * FROM users WHERE id = $1', [userId]);\n return (\n