Product asset

FLUENTREACT Index

A judgment-first React fluency score with 3 free scenarios from a wider 12-question bank and AI-generated code repair.

Free fluency pulse

Answer 3 free scenarios from a 12-question React judgment bank.

The public pulse stays intentionally small, but it now sits on top of a wider bank. The paid Index should feel like deeper judgment coverage, not a different product.

0 / 3 answered3 free now, 10 more locked behind the paid bank

Question 1Effects and stale reads

A websocket connection is created inside an effect and should reconnect only when `roomId` changes. The incoming message handler must still read the latest theme and filters. What is the best fix?

Effects and cleanupApplied difficulty

AI often fixes stale closures by widening effect dependencies and accidentally reconnecting expensive subscriptions.

Add `theme` and `filters` to the effect dependency array so the socket reconnects whenever they change.Wrap the handler with `useEffectEvent` so the effect can stay keyed to `roomId` while the callback reads fresh values.Move the socket setup into render so it always sees the latest props.Suppress the linter and keep the stale closure because reconnecting is worse.

Question 2List identity under reorder

A sortable list of editable rows uses the array index as the React key. After drag and drop, text inputs keep the wrong draft values. What is the right diagnosis?

Identity and state ownershipCore difficulty

This is a classic AI-generated bug: the code looks clean, but React preserves the wrong state because identity is unstable.

Controlled inputs become unreliable after reorder, so the form should be rewritten as uncontrolled.The rerender is too slow; memoization will preserve the drafts.The wrong item identity is being preserved. Stable keys tied to row IDs are required.A `useEffect` should copy props into local state after every reorder.

Question 3Urgent versus non-urgent updates

Search results rerender a large filter panel on every keystroke. Typing feels blocked, but the input itself should stay instant while result rendering can lag slightly. What is the best move?

Scheduling and responsivenessApplied difficulty

Strong React judgment means knowing which updates must stay urgent and which ones can be scheduled without blocking the user's hands.

Wrap the input value update in `setTimeout` so React processes it later.Use `startTransition` for the expensive result update, or defer the derived query while keeping the input urgent.Move the entire search page into a server component so typing gets faster.Disable lint rules around state updates in effects and keep the current approach.

What this proves

The Index matters only if the paid bank feels broader than a one-off quiz.

A free 3-question fluency pulse drawn from a 12-question bank
Lane and difficulty previews so the paid surface feels concrete
Future score history, repair drills, and quarterly proof once demand is real

The free pulse is still the front door. The paid shape is now clearer: harder lanes, explanation depth, score history, and a bank that looks like a real React benchmark.

Why people would pay

Strong React developers do not want another newsletter quiz. They want a sharper bank of edge cases that keeps exposing where AI-assisted code still cheats.

Effects and cleanup

2 scenarios

Subscriptions, event handlers, and the stale-read bugs AI still creates under light pressure.

1 public now, 1 paid later

Identity and state ownership

3 scenarios

Keys, mirrored props, and state boundaries that decide whether React preserves the right thing.

1 public now, 2 paid later

Scheduling and responsiveness

2 scenarios

Urgent versus non-urgent work, render pressure, and how to keep the UI truthful under load.

1 public now, 1 paid later

Server and client boundaries

3 scenarios

App Router ownership, form pending state, and the smallest client surface that still works.

3 scenarios currently in the paid bank

Async trust

3 scenarios

Races, optimistic UI, and interruption-safe behavior that separates believable code from lucky code.

3 scenarios currently in the paid bank

Locked bank preview

The other 9 scenarios are visible enough to feel like a product, not a promise.

Visitors can now inspect the next lanes, question titles, and pressure points before they ever pay. That makes the Index easier to buy and easier to refine from real demand.

Server and client boundariesCorePaid bank

Server and client boundary drift

A page fetches data on the server, but one nested widget needs a click handler. A draft adds `"use client"` to the whole page file so everything compiles. What is the cleaner fix?

This is where App Router codebases quietly lose caching, review clarity, and bundle discipline.

Identity and state ownershipAppliedPaid bank

Mirroring props into local state

An editable detail panel copies `user` props into local state inside an effect every time the parent rerenders. Unsaved edits keep disappearing. What is the best diagnosis?

AI drafts often patch ownership bugs by syncing props into state, which hides the real identity boundary instead of fixing it.

Async trustAppliedPaid bank

Optimistic UI without a truth contract

A save button updates the UI optimistically, but if the request fails the screen still shows the optimistic value and no recovery path. What is the strongest fix?

Optimistic UI creates trust debt fast when the code never defines how truth is re-established.

Async trustCorePaid bank

Async request races

A typeahead sends a request on every query change. Results for `rea` arrive after results for `react`, and the old response overwrites the new list. What is the best repair?

This is one of the most common AI-generated React bugs because the happy path works in demos.

Server and client boundariesAppliedPaid bank

Form pending state ownership

A server-action form needs a pending spinner only on its submit button. A draft lifts saving state into a parent client wrapper just to disable that one button. What is the cleaner move?

This is how small form needs become broad client wrappers that weaken the server-first design.

Scheduling and responsivenessStressPaid bank

Context churn under typing pressure

A single context provider stores both fast-changing input state and slow app preferences. Every keystroke rerenders distant consumers that do not care about the input. What is the better diagnosis?

AI often reaches for context early and hides render pressure inside a convenient but leaky global object.

Effects and cleanupCorePaid bank

Duplicate subscriptions after remount

A chat panel registers an event listener in an effect. After navigating away and back a few times, messages start appearing twice. What is the most likely fix?

Visual QA often misses this until production because the component appears healthy on first mount.

Server and client boundariesCorePaid bank

Browser APIs in the wrong layer

A server component reads `localStorage` during render to restore a theme preference. The route now throws on the server. What is the right fix?

Boundary mistakes like this create hydration confusion and are still common in generated Next.js code.

Identity and state ownershipStressPaid bank

Too many synchronized state patches

A multi-step editor now has five `useState` calls and three effects that keep one piece of state in sync with another. The AI patch added more cross-updates to fix edge cases. What is the better move?

When state transitions become fuzzy, AI tends to keep stacking synchronization effects instead of clarifying the model.

Async trustStressPaid bank

Interruption-safe optimistic flows

A settings screen applies optimistic changes immediately, then a route change interrupts the save. When the user comes back, stale optimistic state briefly flashes before the server data reloads. What is the stronger fix?

This is where async trust and scheduling meet: a UI can feel fast and still be fundamentally unreliable.

Index cohort

Join the first Index cohort before the bank opens wider.

The first cohort decides where the paid Index tightens next: difficulty tiers, explanation depth, and which lanes deserve the most pressure.