# React Performance Review React Performance Review is a tested SKILL.md that reviews pasted React and Next.js App Router code for five performance mistakes that pass every test and then make pages slow, and lists only those, one line each with a fixed code, the place, why it costs time and the fix - or exactly No findings; an agent buys it once for $0.01 over x402. - Page: https://aiskills402.com/skills/react-performance-review - Category: Code & Engineering (https://aiskills402.com/categories/code) - Price: $0.01 once, USD-priced, paid in USDC on Base over x402. Price as loaded on this page. The 402 response your agent receives is authoritative. - Version: 1.0.0 - Card (JSON): https://api.aiskills402.com/v1/skills/react-performance-review ## Use it when Reviews pasted React and Next.js App Router code for five performance mistakes that pass every test and then make pages slow, and lists only those, one line each with a fixed code, the place, why it costs time and the fix - or exactly No findings. It catches independent awaits written one after another so the page waits for their sum, an effect that copies something derivable during render into state, a use client mark placed on a whole page when only a small leaf needs interactivity, a heavy library imported at the top of a client file though it is used only after a click, and a new object, array or function passed every render to a memo child or an effect dependency. It leaves out the safe look-alikes: a second await that needs the first result, an effect that syncs with an outside system, and use client on a small button. Use to review React or Next.js code before release, to find why a page ships too much JavaScript or renders twice, or to gate a pull request that touches components. ## Not for Caching and revalidation, layout and styling, measured timings or bundle sizes, and files that are imported but not pasted. It reads pasted React and Next.js code and judges only what is written in it. ## Tested, honestly Tested 2026-10-29. - Strong model (claude-sonnet-5-5 (Claude Code alias "sonnet")): Right on all 3 cases, read by hand. On the dashboard page it named the three independent awaits as one waterfall and added that the posts call must still follow the user call, and it gave the PDF libraries imported at the top of the export button as the heavy eager import, without flagging the small client button. On the guide page it found the client mark on the whole page that drags react-markdown to the browser and the effect that copies the filtered list into state, and left out the WebSocket effect. On the clean orders page it answered exactly No findings. - Weak model (claude-haiku-5-5 (Claude Code alias "haiku")): Right on all 3 cases, read by hand. It gave the same pairs of findings as Sonnet on the dashboard and on the guide page, with the same safe look-alikes left out, and answered exactly No findings on the clean orders page. One of its lines on the dashboard case came out indented by four spaces, which the checks accept. Note: Light test: three cases (two planted, one clean), one run per model; no comparison without the skill. The code was written by us; each planted case carries a safe look-alike (a dependent await, a small client button, an effect that syncs a socket), and neither planted case has a comment pointing at the defect. One check was wrongly strict and is disclosed: Sonnet's dashboard answer mentioned the posts call in a parenthesis to say it must stay after the user call, and the first version of the check rejected any waterfall line that named it; the check was narrowed to a waterfall line that names only the posts call, and the six saved answers were re-evaluated without a new model call. Facts come from the public React and Next.js documentation, read on 29 October 2026; there are no owner-measured facts. Full summary: https://aiskills402.com/skills/react-performance-review/tests ## Example ### English (claude-sonnet-5-5) Before: > // app/guides/setup/page.tsx 'use client'; import { useState } from 'react'; import ReactMarkdown from 'react-markdown'; import remarkGfm from 'remark-gfm'; import { guideMarkdown } from '@/content/setup-guide'; export default function SetupGuidePage() { const [helpful, setHelpful] = useState(null); return (

Setup guide

… After: > CLIENT-BOUNDARY-HIGH — app/guides/setup/page.tsx, `'use client'` on SetupGuidePage — only the helpful/not-helpful buttons need state, yet react-markdown and remark-gfm and the guide text are sent to the browser — keep the page a server component and move the feedback buttons into a small client component… ## What is in the file - The answer - The codes - How to read the code - Rules - Work in this order - Short example ## Languages English ## How to buy Agent (HTTP): 1. GET https://api.aiskills402.com/v1/skills/react-performance-review/file without a payment header. The answer is 402 with a PAYMENT-REQUIRED header (x402 v2): exact amount, asset, network, recipient. 2. Sign `accepts[0]` with an x402 client (for example @x402/core + @x402/evm). 3. Repeat the GET with the signature in the PAYMENT-SIGNATURE header. The answer is 200 with the file, its sha256 and a re-download token. Agent (MCP): https://mcp.aiskills402.com/mcp — free tools search_skills, get_skill, redownload_skill. Buying itself is over HTTP. Full flow: https://aiskills402.com/docs ## The file - Version: 1.0.0 - Size: 8.2 KB (8420 bytes) - SHA-256: c7017faff51ff5b3ed5ae385e1a112bb501df90f9b1068f636f6e79165e4fe8f - Updated: 2026-10-30 - New versions are free through your re-download token. ## Versions ### 1.0.0 (2026-10-30) First release, written in the light-test batch of 29 October 2026 (three cases, price $0.01). The idea is ours; no foreign skill was opened, facts come from the public React and Next.js documentation (see notes/ideas.md). Output: one line per finding with a fixed code, or exactly `No findings.` Test: three cases written by hand (two planted, each with a safe look-alike, one clean control), one run on Claude Sonnet and one on Claude Haiku, no run without the skill, no iteration on the skill text after the runs. `test/control.mjs` shows that the checks pass on the ideal answers and fail on realistic wrong ones. See `test-summary.json` for the verdicts read by hand. ## License Perpetual, non-exclusive; use and modify for yourself incl. paid work; no resale or republishing. Holder: Georgi Kalchev, aiskills402.com. Terms: https://aiskills402.com/docs#license ## FAQ ### Awaits: when does a second one stay unlisted? When it needs a value from the first result, such as an id or a token. That call has to wait, so only calls independent of each other are reported as a waterfall; the skill suggests starting those together and awaiting them with Promise.all, and leaves the dependent call alone. ### Why is use client on a small button left alone? Because that component is interactive as a whole, so the mark is where it belongs. The skill reports the mark only when it sits on a page or another large component while a small part needs state, since the file's imports then travel to the browser with it. ### What about the React Compiler? The documentation says the compiler handles memoization, so when the paste shows it is on, the skill does not report a new object or function handed to a memo child. Without that sign in the paste, the code is reported with a fix that moves the value out or wraps it. ### What was it checked against? Three pages: a dashboard with independent awaits and a heavy PDF library, a guide with the client mark on the whole page and a derived-state effect, and a clean orders page. Each got one reply from Sonnet and one from Haiku, and all six were read by hand for the summary. ## Measurement limits - Models other than the two named above were not run. - Each verdict comes from the test run on the date shown; the skill may have changed since (check the version). - Full test inputs are not published here, only short excerpts of our own text. - Results on your own texts, languages and domains can differ. Offer note: Paid in USDC (USD-pegged) over x402 by an AI agent; one-time.