React Review Audit

**Score: 96/100** · 0 errors · 8 warnings

Copy as prompt

```text
Fix the following React Review diagnostics in my codebase.

## Warnings (8)

1. [warning] no-moment — src/components/WeatherCard.tsx:1
moment.js is 300kb+ — use "date-fns" or "dayjs" instead

2. [warning] rendering-hydration-mismatch-time — src/components/weatherReport/WeatherReportHeader.tsx:19
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

3. [warning] rendering-hydration-mismatch-time — src/components/weatherReport/WeatherReportHeader.tsx:23
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

4. [warning] no-react-dom-deprecated-apis — src/index.tsx:9
ReactDOM.render is the legacy root API — switch to `import { createRoot } from 'react-dom/client'` and call `createRoot(container).render(...)` (REMOVED in React 19)

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

6. [warning] rerender-state-only-in-handlers — src/App.tsx:8
useState "longitude" is updated but never read in the component's return — use useRef so updates don't trigger re-renders

7. [warning] no-fetch-in-effect — src/App.tsx:11
fetch() inside useEffect — use a data fetching library (react-query, SWR) or server component

8. [warning] no-cascading-set-state — src/App.tsx:11
3 setState calls in a single useEffect — consider using useReducer or deriving state
```

---

### ⚠️ Warnings (8)

**`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/components/weatherReport/WeatherReportHeader.tsx:19`](https://github.com/celeroncoder/Weathery/blob/109b6858bfec67aacacb40ed9c249b0ca36235e8/src/components/weatherReport/WeatherReportHeader.tsx#L19)
[`src/components/weatherReport/WeatherReportHeader.tsx:23`](https://github.com/celeroncoder/Weathery/blob/109b6858bfec67aacacb40ed9c249b0ca36235e8/src/components/weatherReport/WeatherReportHeader.tsx#L23)

**`rerender-state-only-in-handlers`**

useState "latitude" 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/App.tsx:7`](https://github.com/celeroncoder/Weathery/blob/109b6858bfec67aacacb40ed9c249b0ca36235e8/src/App.tsx#L7)
[`src/App.tsx:8`](https://github.com/celeroncoder/Weathery/blob/109b6858bfec67aacacb40ed9c249b0ca36235e8/src/App.tsx#L8)

**`no-moment`**

moment.js is 300kb+ — use "date-fns" or "dayjs" instead

> Replace with `import { format } from 'date-fns'` (tree-shakeable) or `import dayjs from 'dayjs'` (2kb)

[`src/components/WeatherCard.tsx:1`](https://github.com/celeroncoder/Weathery/blob/109b6858bfec67aacacb40ed9c249b0ca36235e8/src/components/WeatherCard.tsx#L1)

**`no-react-dom-deprecated-apis`**

ReactDOM.render is the legacy root API — switch to `import { createRoot } from 'react-dom/client'` and call `createRoot(container).render(...)` (REMOVED in React 19)

> Switch the legacy `react-dom` root API (`render` / `hydrate` / `unmountComponentAtNode`) to `createRoot` / `hydrateRoot` / `root.unmount()` from `react-dom/client`. Replace `findDOMNode` with a ref. The whole `react-dom/test-utils` entry point is removed in React 19 — use `act` from `react` and `fireEvent` / `render` from `@testing-library/react`. Only enabled on projects detected as React 18+.

[`src/index.tsx:9`](https://github.com/celeroncoder/Weathery/blob/109b6858bfec67aacacb40ed9c249b0ca36235e8/src/index.tsx#L9)

**`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/App.tsx:11`](https://github.com/celeroncoder/Weathery/blob/109b6858bfec67aacacb40ed9c249b0ca36235e8/src/App.tsx#L11)

**`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/App.tsx:11`](https://github.com/celeroncoder/Weathery/blob/109b6858bfec67aacacb40ed9c249b0ca36235e8/src/App.tsx#L11)

---

_{Last scored May 14, 2026 at 9:39 AM UTC. Maintained by [React Review](https://github.com/millionco/react-review).}