React Review Audit

[react-doctor]

Score: 95/100 · 0 errors · 16 warnings

Copy as prompt

Fix the following React Review diagnostics in my codebase.

## Warnings (16)

1. [warning] click-events-have-key-events — components/SecondContainer.tsx:72
   Enforce a clickable non-interactive element has at least one keyboard event listener.

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

3. [warning] click-events-have-key-events — components/SecondContainer.tsx:85
   Enforce a clickable non-interactive element has at least one keyboard event listener.

4. [warning] no-static-element-interactions — components/SecondContainer.tsx:72
   Static HTML elements with event handlers require a role.

5. [warning] no-static-element-interactions — components/SecondContainer.tsx:79
   Static HTML elements with event handlers require a role.

6. [warning] no-static-element-interactions — components/SecondContainer.tsx:85
   Static HTML elements with event handlers require a role.

7. [warning] rendering-svg-precision — components/SecondContainer.tsx:74
   SVG d attribute uses 4+ decimal precision — truncate to 1–2 decimals to shrink markup with no visible difference

8. [warning] rendering-svg-precision — components/SecondContainer.tsx:81
   SVG d attribute uses 4+ decimal precision — truncate to 1–2 decimals to shrink markup with no visible difference

9. [warning] rendering-svg-precision — components/SecondContainer.tsx:87
   SVG d attribute uses 4+ decimal precision — truncate to 1–2 decimals to shrink markup with no visible difference

10. [warning] rendering-svg-precision — components/SecondContainer.tsx:88
   SVG d attribute uses 4+ decimal precision — truncate to 1–2 decimals to shrink markup with no visible difference

11. [warning] nextjs-missing-metadata — app/page.tsx:1
   Page without metadata or generateMetadata export — hurts SEO

12. [warning] no-react19-deprecated-apis — components/ui/carousel.tsx:36
   useContext is superseded by `use()` on React 19+ — `use()` reads context conditionally inside hooks, branches, and loops; switch to `import { use } from 'react'`

13. [warning] no-prop-callback-in-effect — components/ui/carousel.tsx:93
   useEffect calls prop callback "setApi" with local state in deps — this is the "lift state via callback" anti-pattern; lift state into a shared Provider so both sides read the same source

14. [warning] advanced-event-handler-refs — components/ui/carousel.tsx:96
   useEffect re-subscribes a "onSelect" listener every time the handler identity changes — store the handler in a ref and have the listener read `handlerRef.current()`, then drop it from the deps

15. [warning] rendering-svg-precision — components/Testimonials.tsx:111
   SVG d attribute uses 4+ decimal precision — truncate to 1–2 decimals to shrink markup with no visible difference

16. [warning] rendering-svg-precision — components/Testimonials.tsx:138
   SVG d attribute uses 4+ decimal precision — truncate to 1–2 decimals to shrink markup with no visible difference

---

⚠️ Warnings (16)

rendering-svg-precision

SVG d attribute uses 4+ decimal precision — truncate to 1–2 decimals to shrink markup with no visible difference

Truncate path/points/transform decimals to 1–2 digits — sub-pixel precision adds bytes with no visible difference

components/SecondContainer.tsx:74
components/SecondContainer.tsx:81
components/SecondContainer.tsx:87
components/SecondContainer.tsx:88
components/Testimonials.tsx:111
components/Testimonials.tsx:138

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.

components/SecondContainer.tsx:72
components/SecondContainer.tsx:79
components/SecondContainer.tsx:85

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.

components/SecondContainer.tsx:72
components/SecondContainer.tsx:79
components/SecondContainer.tsx:85

nextjs-missing-metadata

Page without metadata or generateMetadata export — hurts SEO

Add export const metadata = { title: '...', description: '...' } or export async function generateMetadata()

app/page.tsx:1

no-react19-deprecated-apis

useContext is superseded by use() on React 19+ — use() reads context conditionally inside hooks, branches, and loops; switch to import { use } from 'react'

Pass ref as a regular prop on function components — forwardRef is no longer needed in React 19+. Replace useContext(X) with use(X) for branch-aware context reads. Only enabled on projects detected as React 19+.

components/ui/carousel.tsx:36

no-prop-callback-in-effect

useEffect calls prop callback "setApi" with local state in deps — this is the "lift state via callback" anti-pattern; lift state into a shared Provider so both sides read the same source

Lift the shared state into a Provider so both sides read the same source — no useEffect-driven sync needed

components/ui/carousel.tsx:93

advanced-event-handler-refs

useEffect re-subscribes a "onSelect" listener every time the handler identity changes — store the handler in a ref and have the listener read handlerRef.current(), then drop it from the deps

Store the handler in a ref and have the listener read handlerRef.current() — the subscription stays put while the latest handler is always called

components/ui/carousel.tsx:96

---

_{Last scored May 13, 2026 at 5:21 PM UTC. Maintained by React Review.}