React Review Audit

**Score: 93/100** · 3 errors · 13 warnings

Copy as prompt

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

## Errors (3)

1. [error] rules-of-hooks — src/components/NoteButton/index.correct.jsx:59
React Hook "useMemo" is called in function "generateNoteHeader" 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] effect-needs-cleanup — src/components/NoteEditor/index.jsx:11
useEffect subscribes via `on(...)` but never returns a cleanup — leaks the registration on every re-run and on unmount. Return a cleanup function that calls the matching remove/unsubscribe call

3. [error] effect-needs-cleanup — src/components/NoteEditor/index.correct.jsx:11
useEffect subscribes via `on(...)` but never returns a cleanup — leaks the registration on every re-run and on unmount. Return a cleanup function that calls the matching remove/unsubscribe call

## Warnings (13)

4. [warning] js-combine-iterations — src/components/NoteButton/index.jsx:32
.map().filter() iterates the array twice — combine into a single loop with .reduce() or for...of

5. [warning] no-react19-deprecated-apis — src/components/DarkModeInfo/index.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'`

6. [warning] js-combine-iterations — src/components/NoteButton/index.correct.jsx:25
.map().filter() iterates the array twice — combine into a single loop with .reduce() or for...of

7. [warning] rerender-lazy-state-init — src/components/App/index.correct.jsx:17
useState(getNotes()) calls initializer on every render — use useState(() => getNotes()) for lazy initialization

8. [warning] js-combine-iterations — src/components/App/index.correct.jsx:50
.filter().map() iterates the array twice — combine into a single loop with .reduce() or for...of

9. [warning] no-react19-deprecated-apis — src/components/DarkModeSwitcher/index.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'`

10. [warning] rerender-lazy-state-init — src/components/App/index.jsx:23
useState(getNotes()) calls initializer on every render — use useState(() => getNotes()) for lazy initialization

11. [warning] js-combine-iterations — src/components/App/index.jsx:55
.filter().map() iterates the array twice — combine into a single loop with .reduce() or for...of

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

13. [warning] no-effect-event-handler — src/components/StatusBar/delete-me.tsx:67
useEffect simulating an event handler — move logic to an actual event handler instead

14. [warning] rendering-usetransition-loading — src/components/PrimaryPane/index.jsx:12
useState for "isLoading" — if this guards a state transition (not an async fetch), consider useTransition instead

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

16. [warning] js-combine-iterations — src/components/NotesList/index.jsx:27
.filter().map() iterates the array twice — combine into a single loop with .reduce() or for...of
```

---

### ❌ Errors (3)

**`effect-needs-cleanup`**

useEffect subscribes via `on(...)` but never returns a cleanup — leaks the registration on every re-run and on unmount. Return a cleanup function that calls the matching remove/unsubscribe call

> 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/NoteEditor/index.jsx:11`](https://github.com/aidenybai/take-home/blob/e490d9b39af53b9e05e9151139e7350ab5b9e10b/src/components/NoteEditor/index.jsx#L11)
[`src/components/NoteEditor/index.correct.jsx:11`](https://github.com/aidenybai/take-home/blob/e490d9b39af53b9e05e9151139e7350ab5b9e10b/src/components/NoteEditor/index.correct.jsx#L11)

**`rules-of-hooks`**

React Hook "useMemo" is called in function "generateNoteHeader" 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".

[`src/components/NoteButton/index.correct.jsx:59`](https://github.com/aidenybai/take-home/blob/e490d9b39af53b9e05e9151139e7350ab5b9e10b/src/components/NoteButton/index.correct.jsx#L59)

---

### ⚠️ Warnings (13)

**`js-combine-iterations`**

.map().filter() iterates the array twice — combine into a single loop with .reduce() or for...of

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

[`src/components/NoteButton/index.jsx:32`](https://github.com/aidenybai/take-home/blob/e490d9b39af53b9e05e9151139e7350ab5b9e10b/src/components/NoteButton/index.jsx#L32)
[`src/components/NoteButton/index.correct.jsx:25`](https://github.com/aidenybai/take-home/blob/e490d9b39af53b9e05e9151139e7350ab5b9e10b/src/components/NoteButton/index.correct.jsx#L25)
[`src/components/App/index.correct.jsx:50`](https://github.com/aidenybai/take-home/blob/e490d9b39af53b9e05e9151139e7350ab5b9e10b/src/components/App/index.correct.jsx#L50)
[`src/components/App/index.jsx:55`](https://github.com/aidenybai/take-home/blob/e490d9b39af53b9e05e9151139e7350ab5b9e10b/src/components/App/index.jsx#L55)
[`src/components/NotesList/index.jsx:27`](https://github.com/aidenybai/take-home/blob/e490d9b39af53b9e05e9151139e7350ab5b9e10b/src/components/NotesList/index.jsx#L27)

**`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/components/DarkModeInfo/index.jsx:1`](https://github.com/aidenybai/take-home/blob/e490d9b39af53b9e05e9151139e7350ab5b9e10b/src/components/DarkModeInfo/index.jsx#L1)
[`src/components/DarkModeSwitcher/index.jsx:4`](https://github.com/aidenybai/take-home/blob/e490d9b39af53b9e05e9151139e7350ab5b9e10b/src/components/DarkModeSwitcher/index.jsx#L4)

**`rerender-lazy-state-init`**

useState(getNotes()) calls initializer on every render — use useState(() => getNotes()) for lazy initialization

> Wrap in an arrow function so it only runs once: `useState(() => expensiveComputation())`

[`src/components/App/index.correct.jsx:17`](https://github.com/aidenybai/take-home/blob/e490d9b39af53b9e05e9151139e7350ab5b9e10b/src/components/App/index.correct.jsx#L17)
[`src/components/App/index.jsx:23`](https://github.com/aidenybai/take-home/blob/e490d9b39af53b9e05e9151139e7350ab5b9e10b/src/components/App/index.jsx#L23)

**`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.jsx:65`](https://github.com/aidenybai/take-home/blob/e490d9b39af53b9e05e9151139e7350ab5b9e10b/src/index.jsx#L65)
[`src/index.correct.jsx:70`](https://github.com/aidenybai/take-home/blob/e490d9b39af53b9e05e9151139e7350ab5b9e10b/src/index.correct.jsx#L70)

**`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/StatusBar/delete-me.tsx:67`](https://github.com/aidenybai/take-home/blob/e490d9b39af53b9e05e9151139e7350ab5b9e10b/src/components/StatusBar/delete-me.tsx#L67)

**`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/components/PrimaryPane/index.jsx:12`](https://github.com/aidenybai/take-home/blob/e490d9b39af53b9e05e9151139e7350ab5b9e10b/src/components/PrimaryPane/index.jsx#L12)

---

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