React Review Audit

[react-doctor]

Score: 90/100 · 1 error · 38 warnings

Copy as prompt

Fix the following React Review diagnostics in my codebase.

## Errors (1)

1. [error] effect-needs-cleanup — src/components/IntroAnimation.jsx:21
   useEffect schedules `setTimeout(...)` but never returns a cleanup — leaks the registration on every re-run and on unmount. Return a cleanup function that calls clearTimeout(...)

## Warnings (38)

2. [warning] no-react19-deprecated-apis — src/pages/Login.jsx:1
   useContext is superseded by `use()` on React 19+ — `use()` reads context conditionally inside hooks, branches, and loops; switch to `import { use } from 'react'`

3. [warning] rendering-usetransition-loading — src/pages/Login.jsx:10
   useState for "isLoading" — if this guards a state transition (not an async fetch), consider useTransition instead

4. [warning] no-giant-component — src/components/Navbar.jsx:4
   Component "Navbar" is 322 lines — consider breaking it into smaller focused components

5. [warning] no-cascading-set-state — src/components/Navbar.jsx:26
   3 setState calls in a single useEffect — consider using useReducer or deriving state

6. [warning] no-cascading-set-state — src/components/Navbar.jsx:54
   3 setState calls in a single useEffect — consider using useReducer or deriving state

7. [warning] no-inline-exhaustive-style — src/components/Navbar.jsx:107
   11 inline style properties — extract to a CSS class, CSS module, or styled component for maintainability and reuse

8. [warning] no-inline-exhaustive-style — src/components/Navbar.jsx:166
   8 inline style properties — extract to a CSS class, CSS module, or styled component for maintainability and reuse

9. [warning] no-inline-exhaustive-style — src/components/Navbar.jsx:221
   17 inline style properties — extract to a CSS class, CSS module, or styled component for maintainability and reuse

10. [warning] no-inline-exhaustive-style — src/components/Navbar.jsx:244
   9 inline style properties — extract to a CSS class, CSS module, or styled component for maintainability and reuse

11. [warning] no-inline-exhaustive-style — src/components/Navbar.jsx:271
   11 inline style properties — extract to a CSS class, CSS module, or styled component for maintainability and reuse

12. [warning] no-inline-exhaustive-style — src/components/Navbar.jsx:291
   14 inline style properties — extract to a CSS class, CSS module, or styled component for maintainability and reuse

13. [warning] no-giant-component — src/pages/Home.jsx:20
   Component "Home" is 1177 lines — consider breaking it into smaller focused components

14. [warning] no-inline-exhaustive-style — src/pages/Home.jsx:63
   8 inline style properties — extract to a CSS class, CSS module, or styled component for maintainability and reuse

15. [warning] no-array-index-as-key — src/pages/Home.jsx:102
   Array index "i" used as key — causes bugs when list is reordered or filtered

16. [warning] no-inline-exhaustive-style — src/pages/Home.jsx:433
   8 inline style properties — extract to a CSS class, CSS module, or styled component for maintainability and reuse

17. [warning] no-inline-exhaustive-style — src/pages/Home.jsx:460
   10 inline style properties — extract to a CSS class, CSS module, or styled component for maintainability and reuse

18. [warning] no-inline-exhaustive-style — src/pages/Home.jsx:492
   9 inline style properties — extract to a CSS class, CSS module, or styled component for maintainability and reuse

19. [warning] no-array-index-as-key — src/pages/Home.jsx:520
   Array index "i" used as key — causes bugs when list is reordered or filtered

20. [warning] no-inline-exhaustive-style — src/pages/Home.jsx:604
   8 inline style properties — extract to a CSS class, CSS module, or styled component for maintainability and reuse

21. [warning] no-inline-exhaustive-style — src/pages/Home.jsx:631
   10 inline style properties — extract to a CSS class, CSS module, or styled component for maintainability and reuse

22. [warning] no-inline-exhaustive-style — src/pages/Home.jsx:663
   9 inline style properties — extract to a CSS class, CSS module, or styled component for maintainability and reuse

23. [warning] no-inline-exhaustive-style — src/pages/Home.jsx:674
   12 inline style properties — extract to a CSS class, CSS module, or styled component for maintainability and reuse

24. [warning] no-array-index-as-key — src/pages/Home.jsx:708
   Array index "i" used as key — causes bugs when list is reordered or filtered

25. [warning] no-inline-exhaustive-style — src/pages/Home.jsx:1068
   9 inline style properties — extract to a CSS class, CSS module, or styled component for maintainability and reuse

26. [warning] rerender-state-only-in-handlers — src/components/LoadingScreen.jsx:5
   useState "isVisible" is updated but never read in the component's return — use useRef so updates don't trigger re-renders

27. [warning] no-cascading-set-state — src/components/LoadingScreen.jsx:8
   4 setState calls in a single useEffect — consider using useReducer or deriving state

28. [warning] no-cascading-set-state — src/components/VisitorCounter.jsx:10
   4 setState calls in a single useEffect — consider using useReducer or deriving state

29. [warning] no-inline-exhaustive-style — src/components/VisitorCounter.jsx:47
   11 inline style properties — extract to a CSS class, CSS module, or styled component for maintainability and reuse

30. [warning] no-static-element-interactions — src/pages/Contact.jsx:35
   Static HTML elements with event handlers require a role.

31. [warning] no-cascading-set-state — src/components/IntroAnimation.jsx:21
   8 setState calls in a single useEffect — consider using useReducer or deriving state

32. [warning] no-react19-deprecated-apis — src/pages/AdminDashboard.jsx:1
   useContext is superseded by `use()` on React 19+ — `use()` reads context conditionally inside hooks, branches, and loops; switch to `import { use } from 'react'`

33. [warning] prefer-useReducer — src/pages/AdminDashboard.jsx:20
   Component "AdminDashboard" has 7 useState calls — consider useReducer for related state

34. [warning] no-giant-component — src/pages/AdminDashboard.jsx:20
   Component "AdminDashboard" is 409 lines — consider breaking it into smaller focused components

35. [warning] no-effect-event-handler — src/pages/AdminDashboard.jsx:36
   useEffect simulating an event handler — move logic to an actual event handler instead

36. [warning] rendering-hydration-mismatch-time — src/pages/AdminDashboard.jsx:276
   new Date() reachable from JSX renders differently on server vs client — wrap in useEffect+useState (client-only) or add suppressHydrationWarning to the parent if intentional

37. [warning] rendering-hydration-mismatch-time — src/pages/AdminDashboard.jsx:276
   new Date() reachable from JSX renders differently on server vs client — wrap in useEffect+useState (client-only) or add suppressHydrationWarning to the parent if intentional

38. [warning] no-static-element-interactions — src/components/ProjectCard.jsx:155
   Static HTML elements with event handlers require a role.

39. [warning] no-array-index-as-key — src/components/ProjectCard.jsx:106
   Array index "i" used as key — causes bugs when list is reordered or filtered

---

❌ Errors (1)

effect-needs-cleanup

useEffect schedules setTimeout(...) but never returns a cleanup — leaks the registration on every re-run and on unmount. Return a cleanup function that calls clearTimeout(...)

Return a cleanup function that releases the subscription / timer: return () => target.removeEventListener(name, handler) for listeners, return () => clearInterval(id) / clearTimeout(id) for timers, or return unsubscribe if the subscribe call already returned one

src/components/IntroAnimation.jsx:21

---

⚠️ Warnings (38)

no-inline-exhaustive-style

11 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/Navbar.jsx:107
src/components/Navbar.jsx:166
src/components/Navbar.jsx:221
src/components/Navbar.jsx:244
src/components/Navbar.jsx:271
src/components/Navbar.jsx:291
src/pages/Home.jsx:63
src/pages/Home.jsx:433
src/pages/Home.jsx:460
src/pages/Home.jsx:492
src/pages/Home.jsx:604
src/pages/Home.jsx:631
src/pages/Home.jsx:663
src/pages/Home.jsx:674
src/pages/Home.jsx:1068
src/components/VisitorCounter.jsx:47

no-cascading-set-state

3 setState calls in a single useEffect — consider using useReducer or deriving state

Combine into useReducer: const [state, dispatch] = useReducer(reducer, initialState)

src/components/Navbar.jsx:26
src/components/Navbar.jsx:54
src/components/LoadingScreen.jsx:8
src/components/VisitorCounter.jsx:10
src/components/IntroAnimation.jsx:21

no-array-index-as-key

Array index "i" used as key — causes bugs when list is reordered or filtered

Use a stable unique identifier: key={item.id} or key={item.slug} — index keys break on reorder/filter

src/pages/Home.jsx:102
src/pages/Home.jsx:520
src/pages/Home.jsx:708
src/components/ProjectCard.jsx:106

no-giant-component

Component "Navbar" is 322 lines — consider breaking it into smaller focused components

Extract logical sections into focused components: <UserHeader />, <UserActions />, etc.

src/components/Navbar.jsx:4
src/pages/Home.jsx:20
src/pages/AdminDashboard.jsx:20

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+.

src/pages/Login.jsx:1
src/pages/AdminDashboard.jsx:1

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/pages/Contact.jsx:35
src/components/ProjectCard.jsx:155

rendering-hydration-mismatch-time

new Date() reachable from JSX renders differently on server vs client — wrap in useEffect+useState (client-only) or add suppressHydrationWarning to the parent if intentional

Wrap dynamic time/random values in useEffect+useState (client-only) or add suppressHydrationWarning to the parent if intentional

src/pages/AdminDashboard.jsx:276
src/pages/AdminDashboard.jsx:276

rendering-usetransition-loading

useState for "isLoading" — if this guards a state transition (not an async fetch), consider useTransition instead

Replace with const [isPending, startTransition] = useTransition() — avoids a re-render for the loading state

src/pages/Login.jsx:10

rerender-state-only-in-handlers

useState "isVisible" is updated but never read in the component's return — use useRef so updates don't trigger re-renders

Replace useState with useRef when the value is only mutated and never read in render — ref.current = ... updates without re-rendering the component

src/components/LoadingScreen.jsx:5

prefer-useReducer

Component "AdminDashboard" has 7 useState calls — consider useReducer for related state

Group related state: const [state, dispatch] = useReducer(reducer, { field1, field2, ... })

src/pages/AdminDashboard.jsx:20

no-effect-event-handler

useEffect simulating an event handler — move logic to an actual event handler instead

Move the conditional logic into onClick, onChange, or onSubmit handlers directly

src/pages/AdminDashboard.jsx:36

---

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