RocketChat / RocketChat/Rocket.Chat

Fix react-hooks/exhaustive-deps violations in admin settings components

Open
#38,465 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
46.1k
Forks
13.9k
Avg merge
3d 3h
Merged PRs (30d)
130

Description

Problem

There are multiple instances in admin settings components where the ESLint rule react-hooks/exhaustive-deps is disabled.

In particular, some useEffect and useCallback hooks include type-cast expressions (e.g. (setting as ISettingColor).editor) in their dependency arrays. This causes two issues:

  • The dependency expression is not statically analyzable by the hooks linter
  • ESLint warnings are suppressed instead of fixing the underlying dependency tracking

As a result, React cannot reliably determine when effects should re-run, and the intent of the dependencies is unclear.


Affected Files (high priority)
  • apps/meteor/client/views/admin/settings/Setting/Setting.tsx
  • apps/meteor/client/views/admin/ABAC/ABACSettingTab/SettingField.tsx

Both files contain identical patterns with:

  • useEffect using type-cast dependencies
  • useCallback disabling react-hooks/exhaustive-deps

Proposed Solution

Instead of suppressing the lint rule, extract the derived editor value using useMemo, and depend on that memoized value in hooks.

This approach:

  • Avoids type-casts in dependency arrays
  • Allows ESLint to correctly track dependencies
  • Preserves existing component behavior
  • Follows recommended React patterns for derived state

Example pattern:

const editorValue = useMemo(() => {
  return isSettingColor(setting) ? setting.editor : undefined;
}, [setting]);

useEffect(() => {
  setEditor(editorValue);
}, [editorValue]);

Scope
  • Limit changes to 1–2 components only
  • No behavioral changes or refactors
  • Remove all eslint-disable react-hooks/exhaustive-deps comments in the touched files

Additional Notes

This issue focuses on fixing the root cause of exhaustive-deps violations rather than suppressing lint warnings. A follow-up can address remaining files incrementally if this approach is accepted.


I plan to work on this issue and submit a PR addressing the points above.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with apps/meteor/client/views/admin/settings/Setting/Setting.tsx and apps/meteor/client/views/admin/ABAC/ABACSettingTab/SettingField.tsx, inspecting their useEffect and useCallback dependencies and eslint-disable comments. Run ESLint for the affected files, then confirm the violations are resolved, the suppressions are removed, and existing behavior is preserved.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend, tooling
Issue type
Refactor
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.