Score: 93/100 · 0 errors · 16 warnings
Copy as prompt
Fix the following React Review diagnostics in my codebase.
## Warnings (16)
1. [warning] rendering-usetransition-loading — src/hooks/useGeolocation.js:4
useState for "isLoading" — if this guards a state transition (not an async fetch), consider useTransition instead
2. [warning] js-hoist-intl — src/components/CityItem.jsx:6
new Intl.DateTimeFormat() inside a function — hoist to module scope or wrap in useMemo so it isn't recreated each call
3. [warning] no-generic-handler-names — src/components/CityItem.jsx:32
Non-descriptive handler name "handleClick" — name should describe what it does, not when it runs
4. [warning] no-react19-deprecated-apis — src/contexts/FakeAuthContext.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'`
5. [warning] no-effect-event-handler — src/components/Map.jsx:34
useEffect simulating an event handler — move logic to an actual event handler instead
6. [warning] js-hoist-intl — src/components/City.jsx:9
new Intl.DateTimeFormat() inside a function — hoist to module scope or wrap in useMemo so it isn't recreated each call
7. [warning] no-react19-deprecated-apis — src/contexts/CitiesContext.jsx:4
useContext is superseded by `use()` on React 19+ — `use()` reads context conditionally inside hooks, branches, and loops; switch to `import { use } from 'react'`
8. [warning] no-fetch-in-effect — src/contexts/CitiesContext.jsx:76
fetch() inside useEffect — use a data fetching library (react-query, SWR) or server component
9. [warning] no-effect-event-handler — src/pages/Login.jsx:22
useEffect simulating an event handler — move logic to an actual event handler instead
10. [warning] no-generic-handler-names — src/components/User.jsx:18
Non-descriptive handler name "handleClick" — name should describe what it does, not when it runs
11. [warning] prefer-useReducer — src/components/Form.jsx:26
Component "Form" has 7 useState calls — consider useReducer for related state
12. [warning] rerender-state-only-in-handlers — src/components/Form.jsx:31
useState "isLoadingGeocoding" is updated but never read in the component's return — use useRef so updates don't trigger re-renders
13. [warning] rerender-state-only-in-handlers — src/components/Form.jsx:33
useState "country" is updated but never read in the component's return — use useRef so updates don't trigger re-renders
14. [warning] no-fetch-in-effect — src/components/Form.jsx:39
fetch() inside useEffect — use a data fetching library (react-query, SWR) or server component
15. [warning] no-cascading-set-state — src/components/Form.jsx:39
7 setState calls in a single useEffect — consider using useReducer or deriving state
16. [warning] rendering-hydration-mismatch-time — src/components/Footer.jsx:7
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⚠️ Warnings (16)
js-hoist-intl
new Intl.DateTimeFormat() inside a function — hoist to module scope or wrap in useMemo so it isn't recreated each call
Hoist
new Intl.NumberFormat(...)to module scope or wrap inuseMemo— Intl constructors allocate dozens of objects per locale lookup
src/components/CityItem.jsx:6
src/components/City.jsx:9
no-generic-handler-names
Non-descriptive handler name "handleClick" — name should describe what it does, not when it runs
Rename to describe the action: e.g.
handleSubmit→saveUserProfile,handleClick→toggleSidebar
src/components/CityItem.jsx:32
src/components/User.jsx:18
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
refas a regular prop on function components —forwardRefis no longer needed in React 19+. ReplaceuseContext(X)withuse(X)for branch-aware context reads. Only enabled on projects detected as React 19+.
src/contexts/FakeAuthContext.jsx:1
src/contexts/CitiesContext.jsx:4
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/components/Map.jsx:34
src/pages/Login.jsx:22
no-fetch-in-effect
fetch() inside useEffect — use a data fetching library (react-query, SWR) or server component
Use
useQuery()from @tanstack/react-query,useSWR(), or fetch in a Server Component instead
src/contexts/CitiesContext.jsx:76
src/components/Form.jsx:39
rerender-state-only-in-handlers
useState "isLoadingGeocoding" 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/Form.jsx:31
src/components/Form.jsx:33
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
prefer-useReducer
Component "Form" has 7 useState calls — consider useReducer for related state
Group related state:
const [state, dispatch] = useReducer(reducer, { field1, field2, ... })
no-cascading-set-state
7 setState calls in a single useEffect — consider using useReducer or deriving state
Combine into useReducer:
const [state, dispatch] = useReducer(reducer, initialState)
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
Last scored May 14, 2026 at 7:35 AM UTC. Maintained by React Review.
Activity
0No activity yet.