[Frontend] Adopt the React Compiler lint rules from eslint-plugin-react-hooks v7

claude-bot commented

2026-07-17 02:12:14 +00:00

Contributor

Context

#21 wired up the real eslint-plugin-react-hooks (v7.1.1) and enabled exactly the two rules that issue asked for:

"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",

It deliberately did not spread the plugin's recommended preset. In v7 that preset no longer means "the two classic hooks rules" — it enables 16, adding 14 React Compiler rules, mostly at error:

Group	Rules
Rules of React during render	`purity`, `set-state-in-render`, `set-state-in-effect`, `immutability`, `refs`, `globals`
Component / memoization shape	`static-components`, `use-memo`, `preserve-manual-memoization`
Compiler-compat guards	`error-boundaries`, `incompatible-library`, `unsupported-syntax`, `config`, `gating`

(recommended-latest is 17 — it also adds void-use-memo.)

These exist so the React Compiler can safely auto-memoize components: it must be able to prove the code follows the Rules of React. Adopting them is a step toward enabling the compiler, not general lint hygiene — which is why it was scoped out of #21 rather than smuggled in.

The rationale is recorded in webapp/frontend/eslint.config.js.

Actual scope (measured, not estimated)

Ran the full v7 recommended preset against main (4328226, i.e. after #21 and #103) as a throwaway probe config. It is much smaller than expected — 12 findings, all errors:

 11  react-hooks/set-state-in-effect
  1  react-hooks/preserve-manual-memoization

By file:

  4  WikiArticle.jsx
  2  Admin.jsx
  2  CampaignPlanning.jsx
  1  CampaignDetail.jsx
  1  CampaignStoryline.jsx
  1  WikiDraftReview.jsx
  1  WikiProposals.jsx

The other 12 compiler rules report zero violations — the codebase is already broadly compliant.

Why this is still non-trivial despite being only 12

set-state-in-effect is the bulk of it, and it is rarely a one-line fix. Calling setState inside an effect usually signals state that should be derived during render, lifted, or keyed instead — so each site needs a judgement call about the intended data flow, and a careless "fix" can introduce a render loop or change behaviour. Expect real review per site, not a mechanical pass.

preserve-manual-memoization (1 site) flags a useMemo/useCallback whose memoization the compiler couldn't preserve.

Proposed approach

Fix the 12 sites first, with the rules off, so each change stands on its own and is reviewable.
Then flip eslint.config.js from the two explicit rules to spreading reactHooks.configs.recommended (or recommended-latest), and drop the explanatory comment.
Keep exhaustive-deps at warn and the rest at their preset severities.
Only then consider actually turning the React Compiler on — that is a separate decision with its own build/runtime implications, and this issue is the prerequisite, not that decision.

Acceptance criteria

All 12 findings resolved, each with a deliberate fix (not an eslint-disable).
eslint.config.js uses the plugin's recommended preset rather than listing rules explicitly.
npm run lint clean (0 errors, 0 warnings).
Frontend test suite still green, with no behaviour change intended — call out explicitly in the PR if any set-state-in-effect fix does change behaviour.

Reproducing the measurement

The probe config used (not committed):

import js from "@eslint/js";
import globals from "globals";
import reactHooks from "eslint-plugin-react-hooks";
export default [{
  files: ["src/**/*.{js,jsx}"],
  plugins: { "react-hooks": reactHooks },
  languageOptions: {
    ecmaVersion: "latest", sourceType: "module",
    parserOptions: { ecmaFeatures: { jsx: true } },
    globals: { ...globals.browser, ...globals.node },
  },
  rules: { ...js.configs.recommended.rules, ...reactHooks.configs.recommended.rules },
}];

npx eslint src -c eslint.probe.mjs

Filed as a follow-up to #21 (v3.5.0 — Frontend Platform & PWA).

## Context #21 wired up the real `eslint-plugin-react-hooks` (v7.1.1) and enabled exactly the two rules that issue asked for: ```js "react-hooks/rules-of-hooks": "error", "react-hooks/exhaustive-deps": "warn", ``` It deliberately did **not** spread the plugin's `recommended` preset. In v7 that preset no longer means "the two classic hooks rules" — it enables **16**, adding 14 **React Compiler** rules, mostly at `error`: | Group | Rules | |---|---| | Rules of React during render | `purity`, `set-state-in-render`, `set-state-in-effect`, `immutability`, `refs`, `globals` | | Component / memoization shape | `static-components`, `use-memo`, `preserve-manual-memoization` | | Compiler-compat guards | `error-boundaries`, `incompatible-library`, `unsupported-syntax`, `config`, `gating` | (`recommended-latest` is 17 — it also adds `void-use-memo`.) These exist so the **React Compiler** can safely auto-memoize components: it must be able to prove the code follows the Rules of React. Adopting them is a step toward enabling the compiler, not general lint hygiene — which is why it was scoped out of #21 rather than smuggled in. The rationale is recorded in `webapp/frontend/eslint.config.js`. ## Actual scope (measured, not estimated) Ran the full v7 `recommended` preset against `main` (`4328226`, i.e. after #21 and #103) as a throwaway probe config. It is **much smaller than expected — 12 findings, all errors**: ``` 11 react-hooks/set-state-in-effect 1 react-hooks/preserve-manual-memoization ``` By file: ``` 4 WikiArticle.jsx 2 Admin.jsx 2 CampaignPlanning.jsx 1 CampaignDetail.jsx 1 CampaignStoryline.jsx 1 WikiDraftReview.jsx 1 WikiProposals.jsx ``` The other 12 compiler rules report **zero** violations — the codebase is already broadly compliant. ## Why this is still non-trivial despite being only 12 `set-state-in-effect` is the bulk of it, and it is rarely a one-line fix. Calling `setState` inside an effect usually signals state that should be *derived during render*, lifted, or keyed instead — so each site needs a judgement call about the intended data flow, and a careless "fix" can introduce a render loop or change behaviour. Expect real review per site, not a mechanical pass. `preserve-manual-memoization` (1 site) flags a `useMemo`/`useCallback` whose memoization the compiler couldn't preserve. ## Proposed approach 1. Fix the 12 sites first, with the rules off, so each change stands on its own and is reviewable. 2. Then flip `eslint.config.js` from the two explicit rules to spreading `reactHooks.configs.recommended` (or `recommended-latest`), and drop the explanatory comment. 3. Keep `exhaustive-deps` at `warn` and the rest at their preset severities. 4. **Only then** consider actually turning the React Compiler on — that is a separate decision with its own build/runtime implications, and this issue is the prerequisite, not that decision. ## Acceptance criteria - [ ] All 12 findings resolved, each with a deliberate fix (not an `eslint-disable`). - [ ] `eslint.config.js` uses the plugin's `recommended` preset rather than listing rules explicitly. - [ ] `npm run lint` clean (0 errors, 0 warnings). - [ ] Frontend test suite still green, with no behaviour change intended — call out explicitly in the PR if any `set-state-in-effect` fix does change behaviour. ## Reproducing the measurement The probe config used (not committed): ```js import js from "@eslint/js"; import globals from "globals"; import reactHooks from "eslint-plugin-react-hooks"; export default [{ files: ["src/**/*.{js,jsx}"], plugins: { "react-hooks": reactHooks }, languageOptions: { ecmaVersion: "latest", sourceType: "module", parserOptions: { ecmaFeatures: { jsx: true } }, globals: { ...globals.browser, ...globals.node }, }, rules: { ...js.configs.recommended.rules, ...reactHooks.configs.recommended.rules }, }]; ``` ``` npx eslint src -c eslint.probe.mjs ``` _Filed as a follow-up to #21 (v3.5.0 — Frontend Platform & PWA)._

claude-bot added this to the Backlog - Speculative / Long-Term milestone

2026-07-17 02:12:40 +00:00

claude-bot referenced this issue

2026-07-17 02:45:45 +00:00

[Ops] Live-stack verification of v3.4.0 reliability changes #175

claude-bot referenced this issue

2026-08-25 19:32:48 +00:00

[Review] Full audit of the session lifecycle: prep, recording, transcription, summarization, lore — scoping v4.0.0 #319

claude-bot modified the milestone from Backlog - Speculative / Long-Term to v4.4.0 - UX Overhaul: Design Exploration & Rebuild

2026-08-25 20:40:00 +00:00

claude-bot referenced this issue

2026-08-25 20:45:22 +00:00

[Review] Full audit of the session lifecycle: prep, recording, transcription, summarization, lore — scoping v4.0.0 #319

claude-bot commented

2026-09-06 19:27:23 +00:00

Author

Contributor

Picking this up alongside #464 as a v4.4.0 engineering lane. The rules should be on before the rebuild writes new components, so that new code is compliant from the start rather than swept afterwards. The July measurement (12 sites) predates v4.3.0's changes to most of the named files, so the first step is to re-run the probe config and work from the current count. Each site gets a deliberate fix, per the body; the preset flip comes last.

claude-bot referenced this issue

2026-09-06 19:30:20 +00:00

v4.4.0 build order: UX Overhaul in six phases, with two review checkpoints #535

rbrooks referenced this issue from a commit

2026-09-06 20:21:27 +00:00

chore(frontend): adopt the React Compiler lint rules from eslint-plugin-react-hooks v7 (#182)

claude-bot referenced this issue

2026-09-06 20:21:30 +00:00

[Frontend] Wiki draft review: the body autosave "Saved" indicator is wiped on the next render #539

claude-bot referenced this issue from a pull request that will close it,

2026-09-06 20:21:48 +00:00

chore(frontend): adopt the React Compiler lint rules from eslint-plugin-react-hooks v7 (#182) #540

claude-bot commented

2026-09-06 20:21:54 +00:00

Author

Contributor

Done; pull request to follow this comment (auto-merge on green CI).

The re-measurement mattered: 40 findings across 22 files, not the 12 from July. Every one is fixed by restructuring, none suppressed. The dominant pattern was a loading or stale flag an effect raised on its way past, now a value derived during render from what the data in hand was fetched for. The rule also turned up two genuine hazards beyond hygiene: ElapsedTimer read the clock during render (a re-render would move its origin), and the Shelf's onPointerUp removed itself by a binding that was not yet initialised, so the listener it detached was whichever the closure captured; both are rewritten.

Config: recommended-latest (a strict superset of recommended in v7), exhaustive-deps kept at warn, comment rewritten. The React Compiler itself stays a separate decision, as the body says.

One user-visible improvement rode along with its own changelog entry (the stat-block autosave indicator now keeps "Saved"); its twin on the body autosave is #539 for the rebuild's wiki lane. Two follow-ups filed from the phase 0 lanes overall: #536 and #539.

Done; pull request to follow this comment (auto-merge on green CI). The re-measurement mattered: **40 findings across 22 files**, not the 12 from July. Every one is fixed by restructuring, none suppressed. The dominant pattern was a `loading` or `stale` flag an effect raised on its way past, now a value derived during render from what the data in hand was fetched for. The rule also turned up two genuine hazards beyond hygiene: `ElapsedTimer` read the clock during render (a re-render would move its origin), and the Shelf's `onPointerUp` removed itself by a binding that was not yet initialised, so the listener it detached was whichever the closure captured; both are rewritten. Config: `recommended-latest` (a strict superset of `recommended` in v7), `exhaustive-deps` kept at `warn`, comment rewritten. The React Compiler itself stays a separate decision, as the body says. One user-visible improvement rode along with its own changelog entry (the stat-block autosave indicator now keeps "Saved"); its twin on the body autosave is #539 for the rebuild's wiki lane. Two follow-ups filed from the phase 0 lanes overall: #536 and #539.

rbrooks referenced this issue from a commit

2026-09-06 20:37:00 +00:00

chore(frontend): adopt the React Compiler lint rules from eslint-plugin-react-hooks v7 (#182)

rbrooks referenced this issue from a commit

2026-09-06 20:37:00 +00:00

fix(frontend): mint the unsaved-changes blocker key with useId, not a setState in an effect (#182)

rbrooks referenced this issue from a commit

2026-09-06 20:41:55 +00:00

chore(frontend): adopt the React Compiler lint rules from eslint-plugin-react-hooks v7 (#182)

rbrooks referenced this issue from a commit

2026-09-06 20:41:55 +00:00

fix(frontend): mint the unsaved-changes blocker key with useId, not a setState in an effect (#182)