From c23120c0ba0a63e3677e3593462787fbc31be74d Mon Sep 17 00:00:00 2001 From: Chetan Agarwal Date: Mon, 2 Feb 2026 19:50:01 +0530 Subject: [PATCH 1/4] fix: add exhaustive dependencies to useEffect hooks in Setting components - Add useMemo to extract editor value from setting to avoid type-cast in dependency array - Update useEffect to properly track editorValue dependency - Update onResetButtonClick callback with correct dependencies - Remove eslint-disable react-hooks/exhaustive-deps comments This fixes exhaustive-deps violations in: - apps/meteor/client/views/admin/settings/Setting/Setting.tsx (lines 73, 99) - apps/meteor/client/views/admin/ABAC/ABACSettingTab/SettingField.tsx (lines 66, 92) The root cause was using type-cast (setting as ISettingColor).editor directly in dependency arrays, which React couldn't properly track. Using useMemo ensures React can correctly detect when the editor value changes and re-run effects. --- .../admin/ABAC/ABACSettingTab/SettingField.tsx | 15 +++++++++------ .../views/admin/settings/Setting/Setting.tsx | 15 +++++++++------ 2 files changed, 18 insertions(+), 12 deletions(-) diff --git a/apps/meteor/client/views/admin/ABAC/ABACSettingTab/SettingField.tsx b/apps/meteor/client/views/admin/ABAC/ABACSettingTab/SettingField.tsx index 6d743296c7316..d66e635656157 100644 --- a/apps/meteor/client/views/admin/ABAC/ABACSettingTab/SettingField.tsx +++ b/apps/meteor/client/views/admin/ABAC/ABACSettingTab/SettingField.tsx @@ -57,14 +57,18 @@ function SettingField({ className = undefined, settingId, sectionChanged }: Sett const [value, setValue] = useState(setting.value); const [editor, setEditor] = useState(isSettingColor(setting) ? setting.editor : undefined); + // Memoize editor value extraction to avoid type-cast in dependency array + const editorValue = useMemo(() => { + return isSettingColor(setting) ? setting.editor : undefined; + }, [setting]); + useEffect(() => { setValue(setting.value); }, [setting.value]); useEffect(() => { - setEditor(isSettingColor(setting) ? setting.editor : undefined); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [(setting as ISettingColor).editor]); + setEditor(editorValue); + }, [editorValue]); const onChangeValue = useCallback( (value: SettingValue) => { @@ -84,13 +88,12 @@ function SettingField({ className = undefined, settingId, sectionChanged }: Sett const onResetButtonClick = useCallback(() => { setValue(setting.value); - setEditor(isSettingColor(setting) ? setting.editor : undefined); + setEditor(editorValue); update({ value: persistedSetting.packageValue, ...(isSettingColor(persistedSetting) && { editor: persistedSetting.packageEditor }), }); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [setting.value, (setting as ISettingColor).editor, update, persistedSetting]); + }, [setting.value, editorValue, update, persistedSetting]); const { _id, readonly, type, packageValue, i18nLabel, i18nDescription, alert } = setting; diff --git a/apps/meteor/client/views/admin/settings/Setting/Setting.tsx b/apps/meteor/client/views/admin/settings/Setting/Setting.tsx index ad9bce8f25568..dba3befee907a 100644 --- a/apps/meteor/client/views/admin/settings/Setting/Setting.tsx +++ b/apps/meteor/client/views/admin/settings/Setting/Setting.tsx @@ -64,14 +64,18 @@ function Setting({ className = undefined, settingId, sectionChanged }: SettingPr const [value, setValue] = useState(setting.value); const [editor, setEditor] = useState(isSettingColor(setting) ? setting.editor : undefined); + // Memoize editor value extraction to avoid type-cast in dependency array + const editorValue = useMemo(() => { + return isSettingColor(setting) ? setting.editor : undefined; + }, [setting]); + useEffect(() => { setValue(setting.value); }, [setting.value]); useEffect(() => { - setEditor(isSettingColor(setting) ? setting.editor : undefined); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [(setting as ISettingColor).editor]); + setEditor(editorValue); + }, [editorValue]); const onChangeValue = useCallback( (value: SettingValue) => { @@ -91,13 +95,12 @@ function Setting({ className = undefined, settingId, sectionChanged }: SettingPr const onResetButtonClick = useCallback(() => { setValue(setting.value); - setEditor(isSettingColor(setting) ? setting.editor : undefined); + setEditor(editorValue); update({ value: persistedSetting.packageValue, ...(isSettingColor(persistedSetting) && { editor: persistedSetting.packageEditor }), }); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [setting.value, (setting as ISettingColor).editor, update, persistedSetting]); + }, [setting.value, editorValue, update, persistedSetting]); const { _id, readonly, type, packageValue, i18nLabel, i18nDescription, alert } = setting; From 0166585868137d6d65ca59afefb7134623c44f87 Mon Sep 17 00:00:00 2001 From: Chetan Agarwal Date: Mon, 2 Feb 2026 20:18:01 +0530 Subject: [PATCH 2/4] chore: remove inline comments per coding guidelines Address CodeRabbit review feedback to remove inline comments from implementation files as per project coding guidelines. --- .../client/views/admin/ABAC/ABACSettingTab/SettingField.tsx | 1 - apps/meteor/client/views/admin/settings/Setting/Setting.tsx | 1 - 2 files changed, 2 deletions(-) diff --git a/apps/meteor/client/views/admin/ABAC/ABACSettingTab/SettingField.tsx b/apps/meteor/client/views/admin/ABAC/ABACSettingTab/SettingField.tsx index d66e635656157..630b3b0872593 100644 --- a/apps/meteor/client/views/admin/ABAC/ABACSettingTab/SettingField.tsx +++ b/apps/meteor/client/views/admin/ABAC/ABACSettingTab/SettingField.tsx @@ -57,7 +57,6 @@ function SettingField({ className = undefined, settingId, sectionChanged }: Sett const [value, setValue] = useState(setting.value); const [editor, setEditor] = useState(isSettingColor(setting) ? setting.editor : undefined); - // Memoize editor value extraction to avoid type-cast in dependency array const editorValue = useMemo(() => { return isSettingColor(setting) ? setting.editor : undefined; }, [setting]); diff --git a/apps/meteor/client/views/admin/settings/Setting/Setting.tsx b/apps/meteor/client/views/admin/settings/Setting/Setting.tsx index dba3befee907a..04cb55e579036 100644 --- a/apps/meteor/client/views/admin/settings/Setting/Setting.tsx +++ b/apps/meteor/client/views/admin/settings/Setting/Setting.tsx @@ -64,7 +64,6 @@ function Setting({ className = undefined, settingId, sectionChanged }: SettingPr const [value, setValue] = useState(setting.value); const [editor, setEditor] = useState(isSettingColor(setting) ? setting.editor : undefined); - // Memoize editor value extraction to avoid type-cast in dependency array const editorValue = useMemo(() => { return isSettingColor(setting) ? setting.editor : undefined; }, [setting]); From 98bcc383fabdf81cb8f684aff1c9df0bebe234de Mon Sep 17 00:00:00 2001 From: Chetan Agarwal Date: Mon, 2 Feb 2026 20:32:44 +0530 Subject: [PATCH 3/4] fix: remove unused ISettingColor import after exhaustive-deps cleanup TypeScript CI was failing due to unused import after removing type-casts. Removed ISettingColor from both Setting.tsx and SettingField.tsx imports. --- .../client/views/admin/ABAC/ABACSettingTab/SettingField.tsx | 2 +- apps/meteor/client/views/admin/settings/Setting/Setting.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/meteor/client/views/admin/ABAC/ABACSettingTab/SettingField.tsx b/apps/meteor/client/views/admin/ABAC/ABACSettingTab/SettingField.tsx index 630b3b0872593..aafc46fd41b84 100644 --- a/apps/meteor/client/views/admin/ABAC/ABACSettingTab/SettingField.tsx +++ b/apps/meteor/client/views/admin/ABAC/ABACSettingTab/SettingField.tsx @@ -1,4 +1,4 @@ -import type { ISettingColor, SettingEditor, SettingValue } from '@rocket.chat/core-typings'; +import type { SettingEditor, SettingValue } from '@rocket.chat/core-typings'; import { isSettingColor, isSetting } from '@rocket.chat/core-typings'; import { useDebouncedCallback } from '@rocket.chat/fuselage-hooks'; import { useSettingsDispatch, useSettingStructure } from '@rocket.chat/ui-contexts'; diff --git a/apps/meteor/client/views/admin/settings/Setting/Setting.tsx b/apps/meteor/client/views/admin/settings/Setting/Setting.tsx index 04cb55e579036..1e6bdaeb00b44 100644 --- a/apps/meteor/client/views/admin/settings/Setting/Setting.tsx +++ b/apps/meteor/client/views/admin/settings/Setting/Setting.tsx @@ -1,4 +1,4 @@ -import type { ISettingColor, SettingEditor, SettingValue } from '@rocket.chat/core-typings'; +import type { SettingEditor, SettingValue } from '@rocket.chat/core-typings'; import { isSettingColor, isSetting } from '@rocket.chat/core-typings'; import { Box, Button, Tag } from '@rocket.chat/fuselage'; import { useDebouncedCallback } from '@rocket.chat/fuselage-hooks'; From 6f88ffba31914339ad67008a0ba64a790287d3db Mon Sep 17 00:00:00 2001 From: Chetan Agarwal Date: Mon, 2 Feb 2026 21:16:57 +0530 Subject: [PATCH 4/4] chore: retrigger CI