RocketChat / RocketChat/Rocket.Chat
Fix react-hooks/exhaustive-deps violations in admin settings components
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.tsxapps/meteor/client/views/admin/ABAC/ABACSettingTab/SettingField.tsx
Both files contain identical patterns with:
useEffectusing type-cast dependenciesuseCallbackdisablingreact-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-depscomments 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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