Fix the 17 react-hooks/set-state-in-effect lint errors #78

New issue

Open

opened 2026-10-03 19:44:44 +00:00 by jalenluorion · 0 comments

jalenluorion commented

2026-10-03 19:44:44 +00:00

Member

What's wrong
npx eslint . in web/ reports 17 react-hooks/set-state-in-effect errors. Each one calls setState directly inside useEffect, which renders twice and can show stale or flickering UI. They fall into three kinds.

How to reproduce

cd web && npx eslint .
Look for react-hooks/set-state-in-effect in the output.

Expected
Zero errors from this rule, with no change in behavior.

Where to look

Loading flag set before a fetch: EventPopover.tsx (tags), ModalEvent.tsx (2), ManagerSidebar.tsx, ProfileSidebar.tsx, ManagerDashboard.tsx (reset on org change), UserContext.tsx (fetchEvents). Fix: set the flag in the handler that starts the fetch, derive "loading" from data that is not there yet, or remount with key when the id changes.
Copying a prop into editable state: EventPopover.tsx (savedEventDetails), ManagerDashboard.tsx (two dialogs), ModalEventUpdate.tsx, ModalEventForm.tsx, SearchResultSidebar.tsx (3: filteredByTags, the tag effect, page reset). Fix: compute it during render if it is never edited; if it is edited, give the component key={id} so state starts from props; reset the page in the filter onChange handlers.
Mounted flags: Navbar.tsx, SignedOutNav.tsx. Fix: a small useMounted() hook built on useSyncExternalStore(subscribe, () => true, () => false).
React docs: "You Might Not Need an Effect" (react.dev).

Done when

Each PR fixes one file, links this issue, and says how the screen was checked by hand.
After the last PR, npx eslint . shows no set-state-in-effect errors.

**What's wrong** `npx eslint .` in `web/` reports 17 `react-hooks/set-state-in-effect` errors. Each one calls `setState` directly inside `useEffect`, which renders twice and can show stale or flickering UI. They fall into three kinds. **How to reproduce** 1. `cd web && npx eslint .` 2. Look for `react-hooks/set-state-in-effect` in the output. **Expected** Zero errors from this rule, with no change in behavior. **Where to look** - Loading flag set before a fetch: `EventPopover.tsx` (tags), `ModalEvent.tsx` (2), `ManagerSidebar.tsx`, `ProfileSidebar.tsx`, `ManagerDashboard.tsx` (reset on org change), `UserContext.tsx` (`fetchEvents`). Fix: set the flag in the handler that starts the fetch, derive "loading" from data that is not there yet, or remount with `key` when the id changes. - Copying a prop into editable state: `EventPopover.tsx` (`savedEventDetails`), `ManagerDashboard.tsx` (two dialogs), `ModalEventUpdate.tsx`, `ModalEventForm.tsx`, `SearchResultSidebar.tsx` (3: `filteredByTags`, the tag effect, page reset). Fix: compute it during render if it is never edited; if it is edited, give the component `key={id}` so state starts from props; reset the page in the filter `onChange` handlers. - Mounted flags: `Navbar.tsx`, `SignedOutNav.tsx`. Fix: a small `useMounted()` hook built on `useSyncExternalStore(subscribe, () => true, () => false)`. - React docs: "You Might Not Need an Effect" (react.dev). **Done when** - [ ] Each PR fixes one file, links this issue, and says how the screen was checked by hand. - [ ] After the last PR, `npx eslint .` shows no `set-state-in-effect` errors.

jalenluorion added this to the Phase 3 milestone

2026-10-03 19:44:44 +00:00

jalenluorion added the

frontend

intermediate

chore

labels

2026-10-03 19:44:44 +00:00

jalenluorion added this to the CMUCal project

2026-10-03 19:45:09 +00:00