The React documentation website
This report summarizes scanner evidence for reactjs/react.dev, a JavaScript project with 11,827 GitHub stars. SynthScan examined 184,227 lines of code across 430 source files, recording 87 pattern matches distributed across 4 syntactic categories. The legacy adjusted pattern signal is 0.8 (Low pattern signal); it is not an authorship estimate.
Use the findings to ask whether maintainers can explain intent, verify dependencies, simplify unnecessary scaffolding, and focus review effort. Risk Payload v1 adds ownership, supply-chain, over-engineering, and review-effort vectors when available. These are prompts for human verification, not probabilities, security findings, or measured maintenance costs.
Use each vector to guide manual verification of the underlying findings.
Payload schema: 1.0.0 · Engine: 2.0.0 · Scoring: heuristic-density-v1 · Scan date: 2026-10-31.
Can maintainers explain intent, assumptions, and trade-offs? 87 finding(s).
Are imports declared and package/API names verified? 0 finding(s).
Are wrappers, guards, and repeated structures necessary? 29 finding(s).
Which changes need focused human review? 87 finding(s).
This chart tracks the legacy adjusted pattern score across scan runs. Changes can reflect source changes, scan coverage, or detector/scoring versions; they do not measure AI adoption or prove that a team refactored code. Compare runs only when their scoring versions are compatible. The dashed line tracks the raw pattern-hit count.
Groups findings by configured severity weight. Severity is not a confidence estimate, security rating, or proof that a package is missing. Verify imports against the project's manifests and inspect each finding in its local design context.
This horizontal bar chart shows where configured pattern scores accumulate across directories. Treat the bars as locations to inspect, not as evidence of authorship or code quality. Use the file-level findings to decide whether a directory needs a focused ownership, dependency, complexity, or review check.
The scanner identified 87 distinct pattern matches across 4 syntactic categories. Each entry below represents a discrete location in the source code where the engine recorded a detector match to inspect in context. Expand any category row to inspect the individual file paths, line numbers, code snippets, and the lexical context (CODE, COMMENT, or STRING) in which each match was detected.
Reading the findings table: The Severity column indicates the configured finding weight (CRITICAL / HIGH / MEDIUM / LOW). The Context column identifies whether the match occurred inside executable code, an inline comment, or a string literal — legacy comment-context matches receive a ×1.5 score weight. The ⚡ bolt icon marks clustered matches: three or more patterns within a 10-line window, each receiving an additional ×1.5 density multiplier under the legacy scoring model.
| Severity | File | Line | Snippet | Context |
|---|---|---|---|---|
| LOW | .claude/skills/write/SKILL.md | 42 | ### Step 1: Parse Intent | COMMENT |
| LOW | .claude/skills/write/SKILL.md | 55 | ### Step 2: Research (Parallel Agents) | COMMENT |
| LOW | .claude/skills/write/SKILL.md | 104 | ### Step 3: Synthesize Writing Plan | COMMENT |
| LOW | .claude/skills/write/SKILL.md | 120 | ### Step 4: Write Documentation | COMMENT |
| LOW | .claude/skills/write/SKILL.md | 154 | ### Step 5: Review Documentation | COMMENT |
| LOW | .claude/skills/write/SKILL.md | 162 | ### Step 6: Fix Issues | COMMENT |
| LOW | .claude/skills/docs-writer-learn/SKILL.md | 200 | ### Step 1: Action to take {/*step-1-action*/} | COMMENT |
| LOW | .claude/skills/docs-writer-learn/SKILL.md | 201 | ### Step 2: Next action {/*step-2-next-action*/} | COMMENT |
| LOW | .claude/skills/react-expert/SKILL.md | 45 | ### Step 1: Setup React Repo | COMMENT |
| LOW | .claude/skills/react-expert/SKILL.md | 63 | ### Step 2: Dispatch 6 Parallel Research Agents | COMMENT |
| LOW | .claude/skills/react-expert/SKILL.md | 78 | ### Step 3: Agent Prompts | COMMENT |
| LOW | .claude/skills/react-expert/SKILL.md | 237 | ### Step 4: Synthesize Results | COMMENT |
| LOW | .claude/skills/react-expert/SKILL.md | 243 | ### Step 5: Save Output | COMMENT |
| LOW | src/content/learn/passing-props-to-a-component.md | 70 | ### Step 1: Pass props to the child component {/*step-1-pass-props-to-the-child-component*/} | COMMENT |
| LOW | src/content/learn/passing-props-to-a-component.md | 93 | ### Step 2: Read props inside the child component {/*step-2-read-props-inside-the-child-component*/} | COMMENT |
| LOW | …content/learn/extracting-state-logic-into-a-reducer.md | 190 | ### Step 1: Move from setting state to dispatching actions {/*step-1-move-from-setting-state-to-dispatching-actions*/} | COMMENT |
| LOW | …content/learn/extracting-state-logic-into-a-reducer.md | 287 | ### Step 2: Write a reducer function {/*step-2-write-a-reducer-function*/} | COMMENT |
| LOW | …content/learn/extracting-state-logic-into-a-reducer.md | 460 | ### Step 3: Use the reducer from your component {/*step-3-use-the-reducer-from-your-component*/} | COMMENT |
| LOW | src/content/learn/sharing-state-between-components.md | 104 | ### Step 1: Remove state from the child components {/*step-1-remove-state-from-the-child-components*/} | COMMENT |
| LOW | src/content/learn/sharing-state-between-components.md | 120 | ### Step 2: Pass hardcoded data from the common parent {/*step-2-pass-hardcoded-data-from-the-common-parent*/} | COMMENT |
| LOW | src/content/learn/sharing-state-between-components.md | 177 | ### Step 3: Add state to the common parent {/*step-3-add-state-to-the-common-parent*/} | COMMENT |
| LOW | src/content/learn/synchronizing-with-effects.md | 54 | ### Step 1: Declare an Effect {/*step-1-declare-an-effect*/} | COMMENT |
| LOW | src/content/learn/synchronizing-with-effects.md | 229 | ### Step 2: Specify the Effect dependencies {/*step-2-specify-the-effect-dependencies*/} | COMMENT |
| LOW | src/content/learn/synchronizing-with-effects.md | 464 | ### Step 3: Add cleanup if needed {/*step-3-add-cleanup-if-needed*/} | COMMENT |
| LOW⚡ | src/content/learn/your-first-component.md | 81 | ### Step 1: Export the component {/*step-1-export-the-component*/} | COMMENT |
| LOW⚡ | src/content/learn/your-first-component.md | 85 | ### Step 2: Define the function {/*step-2-define-the-function*/} | COMMENT |
| LOW⚡ | src/content/learn/your-first-component.md | 95 | ### Step 3: Add markup {/*step-3-add-markup*/} | COMMENT |
| LOW | src/content/learn/passing-data-deeply-with-context.md | 229 | ### Step 1: Create the context {/*step-1-create-the-context*/} | COMMENT |
| LOW | src/content/learn/passing-data-deeply-with-context.md | 313 | ### Step 2: Use the context {/*step-2-use-the-context*/} | COMMENT |
| LOW | src/content/learn/passing-data-deeply-with-context.md | 449 | ### Step 3: Provide the context {/*step-3-provide-the-context*/} | COMMENT |
| LOW | …c/content/learn/scaling-up-with-reducer-and-context.md | 242 | ### Step 1: Create the context {/*step-1-create-the-context*/} | COMMENT |
| LOW | …c/content/learn/scaling-up-with-reducer-and-context.md | 453 | ### Step 2: Put state and dispatch into context {/*step-2-put-state-and-dispatch-into-context*/} | COMMENT |
| LOW | …c/content/learn/scaling-up-with-reducer-and-context.md | 674 | ### Step 3: Use context anywhere in the tree {/*step-3-use-context-anywhere-in-the-tree*/} | COMMENT |
| LOW | src/content/learn/build-a-react-app-from-scratch.md | 28 | ## Step 1: Install a build tool {/*step-1-install-a-build-tool*/} | COMMENT |
| LOW | src/content/learn/build-a-react-app-from-scratch.md | 72 | ## Step 2: Build Common Application Patterns {/*step-2-build-common-application-patterns*/} | COMMENT |
| LOW | src/content/learn/thinking-in-react.md | 34 | ## Step 1: Break the UI into a component hierarchy {/*step-1-break-the-ui-into-a-component-hierarchy*/} | COMMENT |
| LOW | src/content/learn/thinking-in-react.md | 74 | ## Step 2: Build a static version in React {/*step-2-build-a-static-version-in-react*/} | COMMENT |
| LOW | src/content/learn/thinking-in-react.md | 208 | ## Step 3: Find the minimal but complete representation of UI state {/*step-3-find-the-minimal-but-complete-representati | COMMENT |
| LOW | src/content/learn/thinking-in-react.md | 251 | ## Step 4: Identify where your state should live {/*step-4-identify-where-your-state-should-live*/} | COMMENT |
| LOW | src/content/learn/thinking-in-react.md | 463 | ## Step 5: Add inverse data flow {/*step-5-add-inverse-data-flow*/} | COMMENT |
| LOW | src/content/learn/add-react-to-an-existing-project.md | 42 | ### Step 1: Set up a modular JavaScript environment {/*step-1-set-up-a-modular-javascript-environment*/} | COMMENT |
| LOW | src/content/learn/add-react-to-an-existing-project.md | 92 | ### Step 2: Render React components anywhere on the page {/*step-2-render-react-components-anywhere-on-the-page*/} | COMMENT |
| LOW | src/content/learn/render-and-commit.md | 32 | ## Step 1: Trigger a render {/*step-1-trigger-a-render*/} | COMMENT |
| LOW | src/content/learn/render-and-commit.md | 78 | ## Step 2: React renders your components {/*step-2-react-renders-your-components*/} | COMMENT |
| LOW | src/content/learn/render-and-commit.md | 149 | ## Step 3: React commits changes to the DOM {/*step-3-react-commits-changes-to-the-dom*/} | COMMENT |
| LOW | src/content/learn/reacting-to-input-with-state.md | 152 | ### Step 1: Identify your component's different visual states {/*step-1-identify-your-components-different-visual-states | COMMENT |
| LOW | src/content/learn/reacting-to-input-with-state.md | 314 | ### Step 2: Determine what triggers those state changes {/*step-2-determine-what-triggers-those-state-changes*/} | COMMENT |
| LOW | src/content/learn/reacting-to-input-with-state.md | 351 | ### Step 3: Represent the state in memory with `useState` {/*step-3-represent-the-state-in-memory-with-usestate*/} | COMMENT |
| LOW | src/content/learn/reacting-to-input-with-state.md | 376 | ### Step 4: Remove any non-essential state variables {/*step-4-remove-any-non-essential-state-variables*/} | COMMENT |
| LOW | src/content/learn/reacting-to-input-with-state.md | 404 | ### Step 5: Connect the event handlers to set state {/*step-5-connect-the-event-handlers-to-set-state*/} | COMMENT |
| Severity | File | Line | Snippet | Context |
|---|---|---|---|---|
| HIGH | .claude/skills/docs-writer-reference/SKILL.md | 580 | ### I've updated the state, but logging gives me the old value {/*old-value*/} | COMMENT |
| HIGH | src/content/learn/removing-effect-dependencies.md | 554 | The final code is longer than the original, but splitting these Effects is still correct. [Each Effect should represent | CODE |
| HIGH | src/content/reference/react-dom/client/createRoot.md | 479 | ### I've created a root, but nothing is displayed {/*ive-created-a-root-but-nothing-is-displayed*/} | COMMENT |
| HIGH | src/content/reference/react/useState.md | 1151 | ### I've updated the state, but logging gives me the old value {/*ive-updated-the-state-but-logging-gives-me-the-old-val | COMMENT |
| HIGH | src/content/reference/react/useState.md | 1182 | ### I've updated the state, but the screen doesn't update {/*ive-updated-the-state-but-the-screen-doesnt-update*/} | COMMENT |
| Severity | File | Line | Snippet | Context |
|---|---|---|---|---|
| LOW | eslint-local-rules/rules/metadata.js | 77 | function parseExpectedErrorsEntries(rawEntries) { | CODE |
| LOW | eslint-local-rules/rules/metadata.js | 222 | function metadataHasExpectedErrorsToken(metadata) { | CODE |
| LOW | eslint-local-rules/rules/metadata.js | 226 | function stringifyExpectedErrorsToken(token) { | CODE |
| LOW | eslint-local-rules/rules/metadata.js | 346 | function removeCompilerExpectedLines(metadata) { | CODE |
| LOW | scripts/deadLinkChecker.js | 53 | function extractAnchorsFromContent(content) { | CODE |
| LOW | src/content/learn/removing-effect-dependencies.md | 1887 | export function createEncryptedConnection({ serverUrl, roomId }) { | CODE |
| LOW | src/content/learn/removing-effect-dependencies.md | 1928 | export function createUnencryptedConnection({ serverUrl, roomId }) { | CODE |
| LOW | src/content/learn/removing-effect-dependencies.md | 2187 | export function createEncryptedConnection({ serverUrl, roomId }) { | CODE |
| LOW | src/content/learn/removing-effect-dependencies.md | 2228 | export function createUnencryptedConnection({ serverUrl, roomId }) { | CODE |
| LOW | src/content/learn/lifecycle-of-reactive-effects.md | 1393 | export function createEncryptedConnection(roomId) { | CODE |
| LOW | src/content/learn/lifecycle-of-reactive-effects.md | 1405 | export function createUnencryptedConnection(roomId) { | CODE |
| LOW | src/content/learn/lifecycle-of-reactive-effects.md | 1490 | export function createEncryptedConnection(roomId) { | CODE |
| LOW | src/content/learn/lifecycle-of-reactive-effects.md | 1502 | export function createUnencryptedConnection(roomId) { | CODE |
| LOW | src/content/learn/lifecycle-of-reactive-effects.md | 1585 | export function createEncryptedConnection(roomId) { | CODE |
| LOW | src/content/learn/lifecycle-of-reactive-effects.md | 1597 | export function createUnencryptedConnection(roomId) { | CODE |
| LOW | src/content/learn/react-compiler/introduction.md | 131 | function expensivelyProcessAReallyLargeArrayOfObjects() { /* ... */ } | CODE |
| LOW | src/content/blog/2022/03/08/react-18-upgrade-guide.md | 87 | function AppWithCallbackAfterRender() { | CODE |
| LOW | src/content/blog/2026/09/09/react-19-3.md | 1612 | export async function flushReadableStreamToFrame(readable, frame) { | CODE |
| LOW | src/content/blog/2026/09/09/react-19-3.md | 1752 | export async function flushReadableStreamToFrame(readable, frame) { | CODE |
| LOW | src/content/reference/react-dom/browser.md | 150 | export async function flushReadableStreamToFrame(readable, frame) { | CODE |
| LOW | src/content/reference/react-dom/browser.md | 317 | export async function flushReadableStreamToFrame(readable, frame) { | CODE |
| LOW | src/content/reference/react-dom/server/resume.md | 202 | export async function flushReadableStreamToFrame(readable, frame) { | CODE |
| LOW | src/content/reference/react/use.md | 1422 | export async function flushReadableStreamToFrame(readable, frame) { | CODE |
| LOW | src/content/reference/react/Suspense.md | 472 | export async function flushReadableStreamToFrame(readable, frame) { | CODE |
| LOW | src/content/reference/react/Suspense.md | 2476 | export async function flushReadableStreamToFrame(readable, frame) { | CODE |
| LOW | src/utils/prepareMDX.js | 27 | function wrapChildrenInMaxWidthContainers(children) { | CODE |
| LOW | src/components/Search.tsx | 49 | function useDocSearchKeyboardEvents({ | CODE |
| LOW | …X/Sandpack/sandpack-rsc/sandbox-code/src/rsc-server.js | 78 | function transformInlineServerActions(code) { | CODE |
| LOW | src/components/Layout/useTocHighlight.tsx | 62 | function throttledUpdateActiveLink() { | CODE |
| Severity | File | Line | Snippet | Context |
|---|---|---|---|---|
| LOW | next-env.d.ts | 1 | /// <reference types="next" /> | COMMENT |
| LOW | .github/workflows/analyze.yml | 61 | if: success() && github.event.number | COMMENT |
| LOW | src/components/MDX/Sandpack/Preview.tsx | 141 | }; | COMMENT |