Skip to content

React Review Audit #62

@reactreview

Description

@reactreview
27 errors, ⚠️ 49 warnings 95 score
Copy as prompt
Fix the following React Review diagnostics in my codebase.

## Errors (27)

1. [error] rules-of-hooks — packages/bippy/src/source/inspect-hooks.ts:421
   React Hook "useContext" is called in function "Anonymous" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".

2. [error] rules-of-hooks — packages/bippy/src/source/inspect-hooks.ts:422
   React Hook "useState" is called in function "Anonymous" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".

3. [error] rules-of-hooks — packages/bippy/src/source/inspect-hooks.ts:423
   React Hook "useReducer" is called in function "Anonymous" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".

4. [error] rules-of-hooks — packages/bippy/src/source/inspect-hooks.ts:424
   React Hook "useRef" is called in function "Anonymous" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".

5. [error] rules-of-hooks — packages/bippy/src/source/inspect-hooks.ts:425
   React Hook "useCacheRefresh" is called in function "Anonymous" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".

6. [error] rules-of-hooks — packages/bippy/src/source/inspect-hooks.ts:426
   React Hook "useLayoutEffect" is called in function "Anonymous" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".

7. [error] rules-of-hooks — packages/bippy/src/source/inspect-hooks.ts:427
   React Hook "useInsertionEffect" is called in function "Anonymous" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".

8. [error] rules-of-hooks — packages/bippy/src/source/inspect-hooks.ts:428
   React Hook "useEffect" is called in function "Anonymous" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".

9. [error] rules-of-hooks — packages/bippy/src/source/inspect-hooks.ts:429
   React Hook "useImperativeHandle" is called in function "Anonymous" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".

10. [error] rules-of-hooks — packages/bippy/src/source/inspect-hooks.ts:430
   React Hook "useDebugValue" is called in function "Anonymous" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".

11. [error] rules-of-hooks — packages/bippy/src/source/inspect-hooks.ts:431
   React Hook "useCallback" is called in function "Anonymous" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".

12. [error] rules-of-hooks — packages/bippy/src/source/inspect-hooks.ts:432
   React Hook "useTransition" is called in function "Anonymous" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".

13. [error] rules-of-hooks — packages/bippy/src/source/inspect-hooks.ts:433
   React Hook "useSyncExternalStore" is called in function "Anonymous" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".

14. [error] rules-of-hooks — packages/bippy/src/source/inspect-hooks.ts:438
   React Hook "useDeferredValue" is called in function "Anonymous" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".

15. [error] rules-of-hooks — packages/bippy/src/source/inspect-hooks.ts:439
   React Hook "useMemo" is called in function "Anonymous" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".

16. [error] rules-of-hooks — packages/bippy/src/source/inspect-hooks.ts:440
   React Hook "useOptimistic" is called in function "Anonymous" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".

17. [error] rules-of-hooks — packages/bippy/src/source/inspect-hooks.ts:441
   React Hook "useFormState" is called in function "Anonymous" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".

18. [error] rules-of-hooks — packages/bippy/src/source/inspect-hooks.ts:442
   React Hook "useActionState" is called in function "Anonymous" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".

19. [error] rules-of-hooks — packages/bippy/src/source/inspect-hooks.ts:443
   React Hook "useHostTransitionStatus" is called in function "Anonymous" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".

20. [error] rules-of-hooks — packages/bippy/src/source/inspect-hooks.ts:444
   React Hook "useMemoCache" is called in function "Anonymous" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".

21. [error] rules-of-hooks — packages/bippy/src/source/inspect-hooks.ts:446
   React Hook "use" is called in function "Anonymous" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".

22. [error] rules-of-hooks — packages/bippy/src/source/inspect-hooks.ts:447
   React Hook "use" is called in function "Anonymous" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".

23. [error] rules-of-hooks — packages/bippy/src/source/inspect-hooks.ts:449
   React Hook "use" is called in function "Anonymous" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".

24. [error] rules-of-hooks — packages/bippy/src/source/inspect-hooks.ts:454
   React Hook "useId" is called in function "Anonymous" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".

25. [error] rules-of-hooks — packages/bippy/src/source/inspect-hooks.ts:455
   React Hook "useEffectEvent" is called in function "Anonymous" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".

26. [error] no-eval — packages/vite-playground/src/source-editor.tsx:60
   new Function() is a code injection risk — avoid dynamic code execution

27. [error] require-reduced-motion — packages/website/package.json:0
   Project uses a motion library but has no prefers-reduced-motion handling — required for accessibility (WCAG 2.3.3)

## Warnings (49)

28. [warning] rendering-hydration-no-flicker — packages/bippy/src/test/did-fiber-commit.test.tsx:15
   useEffect(setState, []) on mount causes a flash — consider useSyncExternalStore or suppressHydrationWarning

29. [warning] no-usememo-simple-expression — packages/bippy/src/source/inspect-hooks.ts:439
   useMemo wrapping a trivially cheap expression — memo overhead exceeds the computation

30. [warning] rendering-hydration-no-flicker — packages/bippy/src/test/get-fiber-stack.test.tsx:27
   useEffect(setState, []) on mount causes a flash — consider useSyncExternalStore or suppressHydrationWarning

31. [warning] rendering-hydration-no-flicker — packages/bippy/src/test/get-mutated-host-fibers.test.tsx:11
   useEffect(setState, []) on mount causes a flash — consider useSyncExternalStore or suppressHydrationWarning

32. [warning] rendering-hydration-no-flicker — packages/bippy/src/test/get-nearest-host-fiber.test.tsx:27
   useEffect(setState, []) on mount causes a flash — consider useSyncExternalStore or suppressHydrationWarning

33. [warning] js-set-map-lookups — packages/bippy/src/source/owner-stack.ts:203
   array.includes() in a loop is O(n) per call — convert to a Set for O(1) lookups

34. [warning] js-set-map-lookups — packages/bippy/src/source/owner-stack.ts:209
   array.includes() in a loop is O(n) per call — convert to a Set for O(1) lookups

35. [warning] js-set-map-lookups — packages/bippy/src/source/owner-stack.ts:256
   array.includes() in a loop is O(n) per call — convert to a Set for O(1) lookups

36. [warning] no-usememo-simple-expression — packages/bippy/src/test/inspect-hooks.test.tsx:37
   useMemo wrapping a trivially cheap expression — memo overhead exceeds the computation

37. [warning] js-combine-iterations — packages/bippy/src/test/inspect-hooks.test.tsx:245
   .filter().map() iterates the array twice — combine into a single loop with .reduce() or for...of

38. [warning] no-barrel-import — packages/bippy/src/test/source.test.tsx:8
   Import from barrel/index file — import directly from source modules: "../source/get-source", "../source/owner-stack"

39. [warning] rendering-hydration-no-flicker — packages/bippy/src/test/did-fiber-render.test.tsx:15
   useEffect(setState, []) on mount causes a flash — consider useSyncExternalStore or suppressHydrationWarning

40. [warning] rendering-hydration-no-flicker — packages/bippy/src/test/traverse.test.tsx:35
   useEffect(setState, []) on mount causes a flash — consider useSyncExternalStore or suppressHydrationWarning

41. [warning] rerender-functional-setstate — packages/bippy/src/test/traverse.test.tsx:36
   setCountState(countState + ...) — use functional update to avoid stale closures

42. [warning] no-react19-deprecated-apis — packages/e2e/fixtures/expo-app/src/App.tsx:30
   forwardRef is no longer needed on React 19+ — refs are regular props on function components; remove forwardRef and pass ref directly

43. [warning] no-react19-deprecated-apis — packages/e2e/fixtures/expo-app/src/App.tsx:33
   useContext is superseded by `use()` on React 19+ — `use()` reads context conditionally inside hooks, branches, and loops; switch to `import { use } from 'react'`

44. [warning] js-flatmap-filter — packages/e2e/fixtures/expo-app/src/App.tsx:243
   .map().filter(Boolean) iterates twice — use .flatMap() to transform and filter in a single pass

45. [warning] no-react19-deprecated-apis — packages/e2e/fixtures/next-app/app/test-harness.tsx:10
   forwardRef is no longer needed on React 19+ — refs are regular props on function components; remove forwardRef and pass ref directly

46. [warning] no-react19-deprecated-apis — packages/e2e/fixtures/next-app/app/test-harness.tsx:12
   useContext is superseded by `use()` on React 19+ — `use()` reads context conditionally inside hooks, branches, and loops; switch to `import { use } from 'react'`

47. [warning] nextjs-missing-metadata — packages/e2e/fixtures/next-app/app/page.tsx:1
   Page without metadata or generateMetadata export — hurts SEO

48. [warning] no-react19-deprecated-apis — packages/e2e/fixtures/vite-app/src/test-app.tsx:6
   forwardRef is no longer needed on React 19+ — refs are regular props on function components; remove forwardRef and pass ref directly

49. [warning] no-react19-deprecated-apis — packages/e2e/fixtures/vite-app/src/test-app.tsx:8
   useContext is superseded by `use()` on React 19+ — `use()` reads context conditionally inside hooks, branches, and loops; switch to `import { use } from 'react'`

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

51. [warning] no-react19-deprecated-apis — packages/vite-playground/src/source-editor.tsx:27
   useContext is superseded by `use()` on React 19+ — `use()` reads context conditionally inside hooks, branches, and loops; switch to `import { use } from 'react'`

52. [warning] no-react19-deprecated-apis — packages/vite-playground/src/source-editor.tsx:37
   forwardRef is no longer needed on React 19+ — refs are regular props on function components; remove forwardRef and pass ref directly

53. [warning] advanced-event-handler-refs — packages/vite-playground/src/source-editor.tsx:126
   useEffect re-subscribes a "handleMouseMove" 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

54. [warning] rerender-functional-setstate — packages/vite-playground/src/source-editor.tsx:156
   setEditorState({ ...editorState, ... }) — use functional update `setEditorState(prev => ({ ...prev, ... }))` to avoid stale closures

55. [warning] no-inline-exhaustive-style — packages/vite-playground/src/source-editor.tsx:196
   8 inline style properties — extract to a CSS class, CSS module, or styled component for maintainability and reuse

56. [warning] no-inline-exhaustive-style — packages/vite-playground/src/source-editor.tsx:212
   9 inline style properties — extract to a CSS class, CSS module, or styled component for maintainability and reuse

57. [warning] no-z-index-9999 — packages/vite-playground/src/source-editor.tsx:221
   z-index: 99998 is arbitrarily high — use a deliberate z-index scale (1–50). Extreme values signal a stacking context problem, not a fix

58. [warning] no-inline-exhaustive-style — packages/vite-playground/src/source-editor.tsx:229
   13 inline style properties — extract to a CSS class, CSS module, or styled component for maintainability and reuse

59. [warning] no-z-index-9999 — packages/vite-playground/src/source-editor.tsx:240
   z-index: 99999 is arbitrarily high — use a deliberate z-index scale (1–50). Extreme values signal a stacking context problem, not a fix

60. [warning] rerender-functional-setstate — packages/vite-playground/src/source-editor.tsx:280
   setEditorState({ ...editorState, ... }) — use functional update `setEditorState(prev => ({ ...prev, ... }))` to avoid stale closures

61. [warning] no-inline-exhaustive-style — packages/vite-playground/src/source-editor.tsx:284
   13 inline style properties — extract to a CSS class, CSS module, or styled component for maintainability and reuse

62. [warning] no-outline-none — packages/vite-playground/src/source-editor.tsx:293
   outline: none removes keyboard focus visibility — use :focus-visible styling instead, or provide a box-shadow focus ring

63. [warning] no-inline-exhaustive-style — packages/vite-playground/src/source-editor.tsx:303
   9 inline style properties — extract to a CSS class, CSS module, or styled component for maintainability and reuse

64. [warning] no-inline-exhaustive-style — packages/vite-playground/src/source-editor.tsx:345
   8 inline style properties — extract to a CSS class, CSS module, or styled component for maintainability and reuse

65. [warning] no-fetch-in-effect — packages/website/components/action-buttons.tsx:14
   fetch() inside useEffect — use a data fetching library (react-query, SWR) or server component

66. [warning] no-danger — packages/website/src/app.tsx:35
   Do not use `dangerouslySetInnerHTML` prop

67. [warning] no-react19-deprecated-apis — packages/website/providers/site-provider.tsx:1
   useContext is superseded by `use()` on React 19+ — `use()` reads context conditionally inside hooks, branches, and loops; switch to `import { use } from 'react'`

68. [warning] use-lazy-motion — packages/website/components/ui/dropdown-menu.tsx:3
   Import "m" with LazyMotion instead of "motion" — saves ~30kb in bundle size

69. [warning] no-derived-useState — packages/website/components/ui/dropdown-menu.tsx:27
   useState initialized from prop "defaultOpen" — if this value should stay in sync with the prop, derive it during render instead

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

71. [warning] rerender-state-only-in-handlers — packages/website/components/copy-button.tsx:9
   useState "copied" is updated but never read in the component's return — use useRef so updates don't trigger re-renders

72. [warning] use-lazy-motion — packages/website/components/ui/shimmer-text.tsx:1
   Import "m" with LazyMotion instead of "motion" — saves ~30kb in bundle size

73. [warning] use-lazy-motion — packages/website/hooks/use-sliding-highlight.tsx:2
   Import "m" with LazyMotion instead of "motion" — saves ~30kb in bundle size

74. [warning] no-react19-deprecated-apis — packages/website/hooks/use-sliding-highlight.tsx:97
   useContext is superseded by `use()` on React 19+ — `use()` reads context conditionally inside hooks, branches, and loops; switch to `import { use } from 'react'`

75. [warning] no-react19-deprecated-apis — packages/website/components/ui/spinner.tsx:23
   forwardRef is no longer needed on React 19+ — refs are regular props on function components; remove forwardRef and pass ref directly

76. [warning] no-react19-deprecated-apis — packages/website/components/ui/spinner.tsx:62
   forwardRef is no longer needed on React 19+ — refs are regular props on function components; remove forwardRef and pass ref directly

❌ Errors (27)

React Hook "useContext" is called in function "Anonymous" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use". · 25 in 1 file

rules-of-hooks

File Lines
packages/bippy/src/source/inspect-hooks.ts 421, 422, 423, 424, 425, 426, 427, 428, +17 more
new Function() is a code injection risk — avoid dynamic code execution · 1 in 1 file

no-eval

Use JSON.parse for serialized data, Function(...) (still careful) for trusted templates, or refactor to avoid dynamic code execution

File Lines
packages/vite-playground/src/source-editor.tsx 60
Project uses a motion library but has no prefers-reduced-motion handling — required for accessibility (WCAG 2.3.3) · 1 in 1 file

require-reduced-motion

Add useReducedMotion() from your animation library, or a @media (prefers-reduced-motion: reduce) CSS query

File Lines
packages/website/package.json 0

⚠️ Warnings (49)

forwardRef is no longer needed on React 19+ — refs are regular props on function components; remove forwardRef and pass ref directly · 13 in 8 files

no-react19-deprecated-apis

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

File Lines
packages/e2e/fixtures/expo-app/src/App.tsx 30, 33
packages/e2e/fixtures/next-app/app/test-harness.tsx 10, 12
packages/e2e/fixtures/vite-app/src/test-app.tsx 6, 8
packages/vite-playground/src/source-editor.tsx 27, 37
packages/website/components/ui/spinner.tsx 23, 62
…and 3 more files view on react.review
useEffect(setState, []) on mount causes a flash — consider useSyncExternalStore or suppressHydrationWarning · 6 in 6 files

rendering-hydration-no-flicker

Use useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) or add suppressHydrationWarning to the element

File Lines
packages/bippy/src/test/did-fiber-commit.test.tsx 15
packages/bippy/src/test/get-fiber-stack.test.tsx 27
packages/bippy/src/test/get-mutated-host-fibers.test.tsx 11
packages/bippy/src/test/get-nearest-host-fiber.test.tsx 27
packages/bippy/src/test/did-fiber-render.test.tsx 15
…and 1 more file view on react.review
8 inline style properties — extract to a CSS class, CSS module, or styled component for maintainability and reuse · 6 in 1 file

no-inline-exhaustive-style

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

File Lines
packages/vite-playground/src/source-editor.tsx 196, 212, 229, 284, 303, 345
array.includes() in a loop is O(n) per call — convert to a Set for O(1) lookups · 3 in 1 file

js-set-map-lookups

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

File Lines
packages/bippy/src/source/owner-stack.ts 203, 209, 256
setCountState(countState + ...) — use functional update to avoid stale closures · 3 in 2 files

rerender-functional-setstate

Use the callback form: setState(prev => prev + 1) to always read the latest value

File Lines
packages/vite-playground/src/source-editor.tsx 156, 280
packages/bippy/src/test/traverse.test.tsx 36
Import "m" with LazyMotion instead of "motion" — saves ~30kb in bundle size · 3 in 3 files

use-lazy-motion

Use import { LazyMotion, m } from "framer-motion" with domAnimation features — saves ~30kb

File Lines
packages/website/components/ui/dropdown-menu.tsx 3
packages/website/components/ui/shimmer-text.tsx 1
packages/website/hooks/use-sliding-highlight.tsx 2
useMemo wrapping a trivially cheap expression — memo overhead exceeds the computation · 2 in 2 files

no-usememo-simple-expression

Remove useMemo — property access, math, and ternaries are already cheap without memoization

File Lines
packages/bippy/src/source/inspect-hooks.ts 439
packages/bippy/src/test/inspect-hooks.test.tsx 37
Page without metadata or generateMetadata export — hurts SEO · 2 in 2 files

nextjs-missing-metadata

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

File Lines
packages/e2e/fixtures/next-app/app/page.tsx 1
packages/next-playground/app/page.tsx 1
z-index: 99998 is arbitrarily high — use a deliberate z-index scale (1–50). Extreme values signal a stacking context problem, not a fix · 2 in 1 file

no-z-index-9999

Define a z-index scale in your design tokens (e.g. dropdown: 10, modal: 20, toast: 30). Create a new stacking context with isolation: isolate instead of escalating values

File Lines
packages/vite-playground/src/source-editor.tsx 221, 240
.filter().map() iterates the array twice — combine into a single loop with .reduce() or for...of · 1 in 1 file

js-combine-iterations

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

File Lines
packages/bippy/src/test/inspect-hooks.test.tsx 245
Import from barrel/index file — import directly from source modules: "../source/get-source", "../source/owner-stack" · 1 in 1 file

no-barrel-import

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

File Lines
packages/bippy/src/test/source.test.tsx 8
.map().filter(Boolean) iterates twice — use .flatMap() to transform and filter in a single pass · 1 in 1 file

js-flatmap-filter

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

File Lines
packages/e2e/fixtures/expo-app/src/App.tsx 243
useEffect re-subscribes a "handleMouseMove" 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 · 1 in 1 file

advanced-event-handler-refs

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

File Lines
packages/vite-playground/src/source-editor.tsx 126
outline: none removes keyboard focus visibility — use :focus-visible styling instead, or provide a box-shadow focus ring · 1 in 1 file

no-outline-none

Use :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px } to show focus only for keyboard users while hiding it for mouse clicks

File Lines
packages/vite-playground/src/source-editor.tsx 293
fetch() inside useEffect — use a data fetching library (react-query, SWR) or server component · 1 in 1 file

no-fetch-in-effect

Use useQuery() from @tanstack/react-query, useSWR(), or fetch in a Server Component instead

File Lines
packages/website/components/action-buttons.tsx 14
Do not use `dangerouslySetInnerHTML` prop · 1 in 1 file

no-danger

dangerouslySetInnerHTML is a way to inject HTML into your React component. This is dangerous because it can easily lead to XSS vulnerabilities.

File Lines
packages/website/src/app.tsx 35
useState initialized from prop "defaultOpen" — if this value should stay in sync with the prop, derive it during render instead · 1 in 1 file

no-derived-useState

Remove useState and compute the value inline: const value = transform(propName)

File Lines
packages/website/components/ui/dropdown-menu.tsx 27
useState "copied" is updated but never read in the component's return — use useRef so updates don't trigger re-renders · 1 in 1 file

rerender-state-only-in-handlers

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

File Lines
packages/website/components/copy-button.tsx 9

Reviewed by reactreview for commit 20a9177. Configure here.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions