React Review Audit

Score: 93/100 · 0 errors · 13 warnings

Fix the following React Review diagnostics in my codebase.

## Warnings (13)

1. [warning] js-combine-iterations — scripts/hmr-plugin/fine-tune.ts:38
   .filter().map() iterates the array twice — combine into a single loop with .reduce() or for...of

2. [warning] click-events-have-key-events — src/components/custom-format-bar.tsx:8
   Enforce a clickable non-interactive element has at least one keyboard event listener.

3. [warning] no-static-element-interactions — src/components/custom-format-bar.tsx:8
   Static HTML elements with event handlers require a role.

4. [warning] js-flatmap-filter — src/utils.ts:92
   .map().filter(Boolean) iterates twice — use .flatMap() to transform and filter in a single pass

5. [warning] js-set-map-lookups — src/utils.ts:94
   array.includes() in a loop is O(n) per call — convert to a Set for O(1) lookups

6. [warning] js-batch-dom-css — examples/canvas/connector.ts:214
   Multiple sequential element.style assignments — batch with cssText or classList for fewer reflows

7. [warning] js-batch-dom-css — examples/canvas/connector.ts:215
   Multiple sequential element.style assignments — batch with cssText or classList for fewer reflows

8. [warning] js-batch-dom-css — examples/canvas/connector.ts:216
   Multiple sequential element.style assignments — batch with cssText or classList for fewer reflows

9. [warning] js-batch-dom-css — examples/canvas/connector.ts:217
   Multiple sequential element.style assignments — batch with cssText or classList for fewer reflows

10. [warning] no-barrel-import — src/components/start-panel.ts:8
   Import from barrel/index file — import directly from the source module for better tree-shaking

11. [warning] server-sequential-independent-await — src/components/doc-inspector.tsx:8
   Sequential `await` without a data dependency on the previous result — wrap the independent calls in `Promise.all([...])` so they race instead of waterfalling

12. [warning] async-parallel — src/components/doc-inspector.tsx:7
   3 sequential await statements that appear independent — use Promise.all() for parallel execution

13. [warning] no-inline-exhaustive-style — src/components/doc-inspector.tsx:21
   8 inline style properties — extract to a CSS class, CSS module, or styled component for maintainability and reuse

⚠️ Warnings (13)

js-batch-dom-css

Multiple sequential element.style assignments — batch with cssText or classList for fewer reflows

Batch DOM/CSS reads and writes — interleaving them inside a loop causes layout thrashing. Read first, then write

examples/canvas/connector.ts:214
examples/canvas/connector.ts:215
examples/canvas/connector.ts:216
examples/canvas/connector.ts:217

js-combine-iterations

.filter().map() iterates the array twice — combine into a single loop with .reduce() or for...of

Combine .map().filter() (or similar chains) into a single pass with .reduce() or a for...of loop to avoid iterating the array twice

scripts/hmr-plugin/fine-tune.ts:38

click-events-have-key-events

Enforce a clickable non-interactive element has at least one keyboard event listener.

Visible, non-interactive elements with click handlers must have one of keyup, keydown, or keypress listener.

src/components/custom-format-bar.tsx:8

no-static-element-interactions

Static HTML elements with event handlers require a role.

Add a role attribute to this element, or use a semantic HTML element instead.

src/components/custom-format-bar.tsx:8

js-flatmap-filter

.map().filter(Boolean) iterates twice — use .flatMap() to transform and filter in a single pass

Use .flatMap(item => condition ? [value] : []) — transforms and filters in a single pass instead of creating an intermediate array

src/utils.ts:92

js-set-map-lookups

array.includes() in a loop is O(n) per call — convert to a Set for O(1) lookups

Use a Set or Map for repeated membership tests / keyed lookups — Array.includes/find is O(n) per call

src/utils.ts:94

no-barrel-import

Import from barrel/index file — import directly from the source module for better tree-shaking

Import from the direct path: import { Button } from './components/Button' instead of ./components

src/components/start-panel.ts:8

server-sequential-independent-await

Sequential await without a data dependency on the previous result — wrap the independent calls in Promise.all([...]) so they race instead of waterfalling

Wrap independent awaits in Promise.all([...]) so they race instead of waterfalling — second call doesn't depend on the first

src/components/doc-inspector.tsx:8

async-parallel

3 sequential await statements that appear independent — use Promise.all() for parallel execution

Use const [a, b] = await Promise.all([fetchA(), fetchB()]) to run independent operations concurrently

src/components/doc-inspector.tsx:7

no-inline-exhaustive-style

8 inline style properties — extract to a CSS class, CSS module, or styled component for maintainability and reuse

Move styles to a CSS class, CSS module, Tailwind utilities, or a styled component — inline objects with many properties hurt readability and create new references every render

src/components/doc-inspector.tsx:21

_{Last scored May 14, 2026 at 7:35 AM UTC. Maintained by React Review.}