{"slug":"react-performance-review","name":"React Performance Review","version":"1.0.0","updated_at":"2026-10-30T01:54:29.762Z","use_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.","languages":["en"],"tags":["react","nextjs","performance","server-components","code-review","bundle-size"],"category":"code","category_url":"https://aiskills402.com/categories/code","keywords":["use client","memo child","effect dependency","Next.js App Router"],"faq":[{"q":"Awaits: when does a second one stay unlisted?","a":"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."},{"q":"Why is use client on a small button left alone?","a":"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."},{"q":"What about the React Compiler?","a":"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."},{"q":"What was it checked against?","a":"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."}],"examples":[{"lang":"en","model":"claude-sonnet-5-5","input_excerpt":"// app/guides/setup/page.tsx\n'use client';\nimport { useState } from 'react';\nimport ReactMarkdown from 'react-markdown';\nimport remarkGfm from 'remark-gfm';\nimport { guideMarkdown } from '@/content/setup-guide';\n\nexport default function SetupGuidePage() {\n  const [helpful, setHelpful] = useState<boolean | null>(null);\n\n  return (\n    <article>\n      <h1>Setup guide</h1>…","output_excerpt":"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…"}],"page_url":"https://aiskills402.com/skills/react-performance-review","markdown_url":"https://aiskills402.com/skills/react-performance-review.md","image_url":"https://cdn.aiskills402.com/og/skills/react-performance-review/c961802f.png","related_url":"https://api.aiskills402.com/v1/skills/react-performance-review/related","purchases_count":null,"tested":{"date":"2026-10-29","strong":{"model":"claude-sonnet-5-5 (Claude Code alias \"sonnet\")","verdict":"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\")","verdict":"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.","report_url":null},"price_usd":"0.01","price_micro":10000,"size_bytes":8420,"sha256":"c7017faff51ff5b3ed5ae385e1a112bb501df90f9b1068f636f6e79165e4fe8f","outline":["The answer","The codes","How to read the code","Rules","Work in this order","Short example"],"license":{"summary":"Perpetual, non-exclusive; use and modify for yourself incl. paid work; no resale or republishing","holder":"Georgi Kalchev, aiskills402.com","url":"https://aiskills402.com/docs#license"},"buy_url":"https://api.aiskills402.com/v1/skills/react-performance-review/file","redownload_url_template":"https://api.aiskills402.com/v1/purchases/{token}","mcp_tool":null,"payment":{"protocol":"x402","scheme":"exact","asset":"USDC","selling":true,"network":"base","network_caip2":"eip155:8453","pay_to":"0xbc0dcc70d8b5d85541d86ffc68d988fd59c22e68","facilitator":"cdp"},"seo_title":"React and Next.js Performance Review","seo_description":"Finds sequential awaits, derived state in effects, oversized client boundaries, eager heavy imports and unstable memo props. Pay $0.01 once, in USDC.","versions":[{"version":"1.0.0","date":"2026-10-30","changelog":"# Changelog\n\n## 1.0.0 — 2026-10-29\n\nFirst 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.`\n\nTest: 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.\n"}]}