React Review Audit

**Score: 96/100** · 1 error · 15 warnings

Copy as prompt

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

## Errors (1)

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

## Warnings (15)

2. [warning] design-no-default-tailwind-palette — src/MillionStockTable.jsx:6
border-gray-200 reads as the Tailwind template default — use zinc (true neutral), neutral (warmer), or stone (warmest)

3. [warning] design-no-default-tailwind-palette — src/MillionStockTable.jsx:9
border-gray-200 reads as the Tailwind template default — use zinc (true neutral), neutral (warmer), or stone (warmest)

4. [warning] design-no-default-tailwind-palette — src/MillionStockTable.jsx:9
bg-gray-100 reads as the Tailwind template default — use zinc (true neutral), neutral (warmer), or stone (warmest)

5. [warning] design-no-default-tailwind-palette — src/MillionStockTable.jsx:9
text-gray-600 reads as the Tailwind template default — use zinc (true neutral), neutral (warmer), or stone (warmest)

6. [warning] design-no-default-tailwind-palette — src/MillionStockTable.jsx:18
border-gray-200 reads as the Tailwind template default — use zinc (true neutral), neutral (warmer), or stone (warmest)

7. [warning] design-no-default-tailwind-palette — src/ReactStockTable.jsx:5
border-gray-200 reads as the Tailwind template default — use zinc (true neutral), neutral (warmer), or stone (warmest)

8. [warning] design-no-default-tailwind-palette — src/ReactStockTable.jsx:8
border-gray-200 reads as the Tailwind template default — use zinc (true neutral), neutral (warmer), or stone (warmest)

9. [warning] design-no-default-tailwind-palette — src/ReactStockTable.jsx:8
bg-gray-100 reads as the Tailwind template default — use zinc (true neutral), neutral (warmer), or stone (warmest)

10. [warning] design-no-default-tailwind-palette — src/ReactStockTable.jsx:8
text-gray-600 reads as the Tailwind template default — use zinc (true neutral), neutral (warmer), or stone (warmest)

11. [warning] design-no-default-tailwind-palette — src/ReactStockTable.jsx:16
border-gray-200 reads as the Tailwind template default — use zinc (true neutral), neutral (warmer), or stone (warmest)

12. [warning] no-direct-state-mutation — src/App.jsx:31
In-place mutation of useState value "market" via .sort() — call setMarket with a new array; React only re-renders on a new reference

13. [warning] rendering-hydration-no-flicker — src/App.jsx:17
useEffect(setState, []) on mount causes a flash — consider useSyncExternalStore or suppressHydrationWarning

14. [warning] rerender-functional-setstate — src/App.jsx:32
setMarket([...market, ...]) — use functional update `setMarket(prev => [...prev, ...])` to avoid stale closures

15. [warning] design-no-default-tailwind-palette — src/App.jsx:48
bg-gray-200 reads as the Tailwind template default — use zinc (true neutral), neutral (warmer), or stone (warmest)

16. [warning] design-no-default-tailwind-palette — src/App.jsx:48
border-gray-500 reads as the Tailwind template default — use zinc (true neutral), neutral (warmer), or stone (warmest)
```

---

### ❌ Errors (1)

**`effect-needs-cleanup`**

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

> 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/App.jsx:17`](https://github.com/aidenybai/stonks/blob/a4044a2e8e5e6bba3ad20da19a27e97d29e77321/src/App.jsx#L17)

---

### ⚠️ Warnings (15)

**`design-no-default-tailwind-palette`**

border-gray-200 reads as the Tailwind template default — use zinc (true neutral), neutral (warmer), or stone (warmest)

> Replace `indigo-*` / `gray-*` / `slate-*` with project tokens, your brand color, or a less-default neutral (`zinc`, `neutral`, `stone`)

[`src/MillionStockTable.jsx:6`](https://github.com/aidenybai/stonks/blob/a4044a2e8e5e6bba3ad20da19a27e97d29e77321/src/MillionStockTable.jsx#L6)
[`src/MillionStockTable.jsx:9`](https://github.com/aidenybai/stonks/blob/a4044a2e8e5e6bba3ad20da19a27e97d29e77321/src/MillionStockTable.jsx#L9)
[`src/MillionStockTable.jsx:9`](https://github.com/aidenybai/stonks/blob/a4044a2e8e5e6bba3ad20da19a27e97d29e77321/src/MillionStockTable.jsx#L9)
[`src/MillionStockTable.jsx:9`](https://github.com/aidenybai/stonks/blob/a4044a2e8e5e6bba3ad20da19a27e97d29e77321/src/MillionStockTable.jsx#L9)
[`src/MillionStockTable.jsx:18`](https://github.com/aidenybai/stonks/blob/a4044a2e8e5e6bba3ad20da19a27e97d29e77321/src/MillionStockTable.jsx#L18)
[`src/ReactStockTable.jsx:5`](https://github.com/aidenybai/stonks/blob/a4044a2e8e5e6bba3ad20da19a27e97d29e77321/src/ReactStockTable.jsx#L5)
[`src/ReactStockTable.jsx:8`](https://github.com/aidenybai/stonks/blob/a4044a2e8e5e6bba3ad20da19a27e97d29e77321/src/ReactStockTable.jsx#L8)
[`src/ReactStockTable.jsx:8`](https://github.com/aidenybai/stonks/blob/a4044a2e8e5e6bba3ad20da19a27e97d29e77321/src/ReactStockTable.jsx#L8)
[`src/ReactStockTable.jsx:8`](https://github.com/aidenybai/stonks/blob/a4044a2e8e5e6bba3ad20da19a27e97d29e77321/src/ReactStockTable.jsx#L8)
[`src/ReactStockTable.jsx:16`](https://github.com/aidenybai/stonks/blob/a4044a2e8e5e6bba3ad20da19a27e97d29e77321/src/ReactStockTable.jsx#L16)
[`src/App.jsx:48`](https://github.com/aidenybai/stonks/blob/a4044a2e8e5e6bba3ad20da19a27e97d29e77321/src/App.jsx#L48)
[`src/App.jsx:48`](https://github.com/aidenybai/stonks/blob/a4044a2e8e5e6bba3ad20da19a27e97d29e77321/src/App.jsx#L48)

**`no-direct-state-mutation`**

In-place mutation of useState value "market" via .sort() — call setMarket with a new array; React only re-renders on a new reference

> Replace the mutation with a setter call that produces a new reference: `setItems([...items, newItem])`, `setItems(items.filter(x => x !== target))`, `setItems(items.toSorted(...))`. React only re-renders on a new reference, so in-place updates are silently dropped

[`src/App.jsx:31`](https://github.com/aidenybai/stonks/blob/a4044a2e8e5e6bba3ad20da19a27e97d29e77321/src/App.jsx#L31)

**`rendering-hydration-no-flicker`**

useEffect(setState, []) on mount causes a flash — consider useSyncExternalStore or suppressHydrationWarning

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

[`src/App.jsx:17`](https://github.com/aidenybai/stonks/blob/a4044a2e8e5e6bba3ad20da19a27e97d29e77321/src/App.jsx#L17)

**`rerender-functional-setstate`**

setMarket([...market, ...]) — use functional update `setMarket(prev => [...prev, ...])` to avoid stale closures

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

[`src/App.jsx:32`](https://github.com/aidenybai/stonks/blob/a4044a2e8e5e6bba3ad20da19a27e97d29e77321/src/App.jsx#L32)

---

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