refactor: Replace useMutableCallback (#34902)

RocketChat · Jan 8, 2025 · 7839bf0 · 7839bf0
1 parent bfa92f4
commit 7839bf0
Show file tree

Hide file tree

Showing 167 changed files with 447 additions and 447 deletions.
diff --git a/apps/meteor/client/apps/gameCenter/GameCenter.tsx b/apps/meteor/client/apps/gameCenter/GameCenter.tsx
@@ -1,5 +1,5 @@
 import type { IExternalComponent } from '@rocket.chat/apps-engine/definition/externalComponent';
-import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { useState } from 'react';
 import type { ReactElement } from 'react';
 
@@ -18,12 +18,12 @@ const GameCenter = (): ReactElement => {
 
 	const result = useExternalComponentsQuery();
 
-	const handleClose = useMutableCallback((e) => {
+	const handleClose = useEffectEvent((e) => {
 		preventSyntheticEvent(e);
 		closeTab();
 	});
 
-	const handleBack = useMutableCallback((e) => {
+	const handleBack = useEffectEvent((e) => {
 		setOpenedGame(undefined);
 		preventSyntheticEvent(e);
 	});

diff --git a/apps/meteor/client/components/Omnichannel/Tags.tsx b/apps/meteor/client/components/Omnichannel/Tags.tsx
@@ -1,5 +1,5 @@
 import { TextInput, Chip, Button, FieldLabel, FieldRow } from '@rocket.chat/fuselage';
-import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
 import type { ChangeEvent, ReactElement } from 'react';
 import { useMemo, useState } from 'react';
@@ -41,7 +41,7 @@ const Tags = ({ tags = [], handler, error, tagRequired, department }: TagsProps)
 		handler(tags.filter((tag) => tag !== tagToRemove));
 	};
 
-	const handleTagTextSubmit = useMutableCallback(() => {
+	const handleTagTextSubmit = useEffectEvent(() => {
 		if (!tags) {
 			return;
 		}

diff --git a/apps/meteor/client/components/avatar/RoomAvatarEditor.tsx b/apps/meteor/client/components/avatar/RoomAvatarEditor.tsx
@@ -2,7 +2,7 @@ import { isRoomFederated } from '@rocket.chat/core-typings';
 import type { IRoom, RoomAdminFieldsType } from '@rocket.chat/core-typings';
 import { css } from '@rocket.chat/css-in-js';
 import { Box, Button, ButtonGroup } from '@rocket.chat/fuselage';
-import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { RoomAvatar } from '@rocket.chat/ui-avatar';
 import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
@@ -24,7 +24,7 @@ const RoomAvatarEditor = ({ disabled = false, room, roomAvatar, onChangeAvatar }
 	const { t } = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
 
-	const handleChangeAvatar = useMutableCallback(async (file) => {
+	const handleChangeAvatar = useEffectEvent(async (file) => {
 		const reader = new FileReader();
 		reader.readAsDataURL(file);
 		reader.onloadend = async (): Promise<void> => {
@@ -38,7 +38,7 @@ const RoomAvatarEditor = ({ disabled = false, room, roomAvatar, onChangeAvatar }
 	});
 
 	const [clickUpload, reset] = useSingleFileInput(handleChangeAvatar);
-	const clickReset = useMutableCallback(() => {
+	const clickReset = useEffectEvent(() => {
 		reset();
 		onChangeAvatar(null);
 	});

diff --git a/apps/meteor/client/components/message/content/MessageActions.tsx b/apps/meteor/client/components/message/content/MessageActions.tsx
@@ -1,6 +1,6 @@
 import type { IMessage } from '@rocket.chat/core-typings';
 import { Box, ButtonGroup } from '@rocket.chat/fuselage';
-import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import type { Keys as IconName } from '@rocket.chat/icons';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
@@ -23,7 +23,7 @@ type MessageActionsProps = {
 };
 
 const MessageActions = ({ message, actions }: MessageActionsProps): ReactElement => {
-	const runAction = useMutableCallback((action: string) => () => {
+	const runAction = useEffectEvent((action: string) => () => {
 		actionLinks.run(action, message);
 	});
 

diff --git a/apps/meteor/client/hooks/useClipboardWithToast.ts b/apps/meteor/client/hooks/useClipboardWithToast.ts
@@ -1,5 +1,5 @@
 import type { UseClipboardReturn } from '@rocket.chat/fuselage-hooks';
-import { useClipboard, useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import { useClipboard, useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
 import { useTranslation } from 'react-i18next';
 
@@ -8,7 +8,7 @@ export default function useClipboardWithToast(text: string): UseClipboardReturn
 	const dispatchToastMessage = useToastMessageDispatch();
 
 	return useClipboard(text, {
-		onCopySuccess: useMutableCallback(() => dispatchToastMessage({ type: 'success', message: t('Copied') })),
-		onCopyError: useMutableCallback((e) => dispatchToastMessage({ type: 'error', message: e })),
+		onCopySuccess: useEffectEvent(() => dispatchToastMessage({ type: 'success', message: t('Copied') })),
+		onCopyError: useEffectEvent((e) => dispatchToastMessage({ type: 'error', message: e })),
 	});
 }
diff --git a/apps/meteor/client/hooks/useSingleFileInput.ts b/apps/meteor/client/hooks/useSingleFileInput.ts
@@ -1,4 +1,4 @@
-import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { useRef, useEffect } from 'react';
 
 export const useSingleFileInput = (
@@ -52,8 +52,8 @@ export const useSingleFileInput = (
 		};
 	}, [fileField, fileType, onSetFile]);
 
-	const onClick = useMutableCallback(() => ref?.current?.click());
-	const reset = useMutableCallback(() => {
+	const onClick = useEffectEvent(() => ref?.current?.click());
+	const reset = useEffectEvent(() => {
 		if (ref.current) {
 			ref.current.value = '';
 		}

diff --git a/apps/meteor/client/navbar/actions/NavbarHomeAction.tsx b/apps/meteor/client/navbar/actions/NavbarHomeAction.tsx
@@ -1,5 +1,5 @@
 import { IconButton } from '@rocket.chat/fuselage';
-import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { useRouter, useLayout, useSetting } from '@rocket.chat/ui-contexts';
 import type { HTMLAttributes } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -16,7 +16,7 @@ const NavbarHomeAction = (props: NavbarHomeActionProps) => {
 
 	const routeName = router.getLocationPathname();
 
-	const handleHome = useMutableCallback(() => {
+	const handleHome = useEffectEvent(() => {
 		sidebar.toggle();
 		router.navigate('/home');
 	});

diff --git a/apps/meteor/client/omnichannel/businessHours/useRemoveBusinessHour.tsx b/apps/meteor/client/omnichannel/businessHours/useRemoveBusinessHour.tsx
@@ -1,4 +1,4 @@
-import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { useSetModal, useToastMessageDispatch, useMethod } from '@rocket.chat/ui-contexts';
 import { useQueryClient } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
@@ -12,7 +12,7 @@ export const useRemoveBusinessHour = () => {
 	const removeBusinessHour = useMethod('livechat:removeBusinessHour');
 	const queryClient = useQueryClient();
 
-	const handleRemove = useMutableCallback((_id, type) => {
+	const handleRemove = useEffectEvent((_id, type) => {
 		const onDeleteBusinessHour = async () => {
 			try {
 				await removeBusinessHour(_id, type);

diff --git a/apps/meteor/client/omnichannel/cannedResponses/CannedResponsesTable.tsx b/apps/meteor/client/omnichannel/cannedResponses/CannedResponsesTable.tsx
@@ -1,5 +1,5 @@
 import { Box, IconButton, Pagination } from '@rocket.chat/fuselage';
-import { useDebouncedValue, useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import { useDebouncedValue, useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { UserAvatar } from '@rocket.chat/ui-avatar';
 import { useTranslation, usePermission, useToastMessageDispatch, useEndpoint, useRouter } from '@rocket.chat/ui-contexts';
 import { hashKey, useQuery } from '@tanstack/react-query';
@@ -62,9 +62,9 @@ const CannedResponsesTable = () => {
 		refetchOnWindowFocus: false,
 	});
 
-	const handleAddNew = useMutableCallback(() => router.navigate('/omnichannel/canned-responses/new'));
+	const handleAddNew = useEffectEvent(() => router.navigate('/omnichannel/canned-responses/new'));
 
-	const onRowClick = useMutableCallback((id, scope) => (): void => {
+	const onRowClick = useEffectEvent((id, scope) => (): void => {
 		if (scope === 'global' && isMonitor && !isManager) {
 			return dispatchToastMessage({
 				type: 'error',

diff --git a/...lient/omnichannel/cannedResponses/contextualBar/CannedResponse/WrapCannedResponseList.tsx b/...lient/omnichannel/cannedResponses/contextualBar/CannedResponse/WrapCannedResponseList.tsx
@@ -1,4 +1,4 @@
-import { useDebouncedValue, useLocalStorage, useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import { useDebouncedValue, useLocalStorage, useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { useSetModal, useRouter } from '@rocket.chat/ui-contexts';
 import type { ChangeEvent, MouseEvent } from 'react';
 import { memo, useCallback, useMemo, useState } from 'react';
@@ -38,7 +38,7 @@ export const WrapCannedResponseList = () => {
 	);
 	const { phase, items, itemCount } = useRecordList(cannedList);
 
-	const onClickItem = useMutableCallback((data) => {
+	const onClickItem = useEffectEvent((data) => {
 		const { _id: context } = data;
 
 		router.navigate({

diff --git a/apps/meteor/client/omnichannel/cannedResponses/useRemoveCannedResponse.tsx b/apps/meteor/client/omnichannel/cannedResponses/useRemoveCannedResponse.tsx
@@ -1,4 +1,4 @@
-import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { useSetModal, useToastMessageDispatch, useRouter, useMethod } from '@rocket.chat/ui-contexts';
 import { useQueryClient } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
@@ -14,7 +14,7 @@ export const useRemoveCannedResponse = () => {
 	const dispatchToastMessage = useToastMessageDispatch();
 	const removeCannedResponse = useMethod('removeCannedResponse');
 
-	const handleDelete = useMutableCallback((id) => {
+	const handleDelete = useEffectEvent((id) => {
 		const onDeleteCannedResponse: () => Promise<void> = async () => {
 			try {
 				await removeCannedResponse(id);

diff --git a/apps/meteor/client/omnichannel/hooks/useOmnichannelPrioritiesMenu.tsx b/apps/meteor/client/omnichannel/hooks/useOmnichannelPrioritiesMenu.tsx
@@ -1,6 +1,6 @@
 import { LivechatPriorityWeight } from '@rocket.chat/core-typings';
 import type { Menu } from '@rocket.chat/fuselage';
-import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { useEndpoint } from '@rocket.chat/ui-contexts';
 import { useQueryClient } from '@tanstack/react-query';
 import type { ComponentProps } from 'react';
@@ -18,7 +18,7 @@ export const useOmnichannelPrioritiesMenu = (rid: string): ComponentProps<typeof
 	const removeRoomPriority = useEndpoint('DELETE', '/v1/livechat/room/:rid/priority', { rid });
 	const { data: priorities } = useOmnichannelPriorities();
 
-	const handlePriorityChange = useMutableCallback((priorityId: string) => async () => {
+	const handlePriorityChange = useEffectEvent((priorityId: string) => async () => {
 		try {
 			priorityId ? await updateRoomPriority({ priorityId }) : await removeRoomPriority();
 			queryClient.invalidateQueries({

diff --git a/apps/meteor/client/omnichannel/priorities/PrioritiesPage.tsx b/apps/meteor/client/omnichannel/priorities/PrioritiesPage.tsx
@@ -1,5 +1,5 @@
 import { Button, ButtonGroup } from '@rocket.chat/fuselage';
-import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { useEndpoint, useRoute, useSetModal, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
 import { useQueryClient } from '@tanstack/react-query';
 import type { ReactElement } from 'react';
@@ -59,7 +59,7 @@ export const PrioritiesPage = ({ priorityId, context }: PrioritiesPageProps): Re
 		setModal(<PrioritiesResetModal onReset={onReset} onCancel={(): void => setModal(null)} />);
 	};
 
-	const onRowClick = useMutableCallback((id: string): void => {
+	const onRowClick = useEffectEvent((id: string): void => {
 		prioritiesRoute.push({ context: 'edit', id });
 	});
 

diff --git a/apps/meteor/client/omnichannel/priorities/PriorityEditForm.tsx b/apps/meteor/client/omnichannel/priorities/PriorityEditForm.tsx
@@ -1,6 +1,6 @@
 import type { ILivechatPriority, Serialized } from '@rocket.chat/core-typings';
 import { Field, FieldError, Button, Box, ButtonGroup } from '@rocket.chat/fuselage';
-import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
 import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
@@ -44,7 +44,7 @@ const PriorityEditForm = ({ data, onSave, onCancel }: PriorityEditFormProps): Re
 		defaultValues: data ? { name: dirty ? name : defaultName } : {},
 	});
 
-	const handleSave = useMutableCallback(async () => {
+	const handleSave = useEffectEvent(async () => {
 		const { name } = getValues();
 
 		if (!isValid) {

diff --git a/apps/meteor/client/omnichannel/reports/components/AgentsTable.tsx b/apps/meteor/client/omnichannel/reports/components/AgentsTable.tsx
@@ -1,4 +1,4 @@
-import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -24,7 +24,7 @@ type AgentsTableProps = {
 export const AgentsTable = memo(({ data, sortBy, sortDirection, setSort }: AgentsTableProps) => {
 	const { t } = useTranslation();
 
-	const onHeaderClick = useMutableCallback((id) => {
+	const onHeaderClick = useEffectEvent((id) => {
 		setSort(id, sortDirection === 'asc' ? 'desc' : 'asc');
 	});
 

diff --git a/apps/meteor/client/omnichannel/slaPolicies/RemoveSlaButton.tsx b/apps/meteor/client/omnichannel/slaPolicies/RemoveSlaButton.tsx
@@ -1,5 +1,5 @@
 import { IconButton } from '@rocket.chat/fuselage';
-import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { useRoute, useEndpoint, useSetModal, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
 import { useTranslation } from 'react-i18next';
 
@@ -14,7 +14,7 @@ const RemoveSlaButton = ({ _id, reload }: { _id: string; reload: () => void }) =
 
 	const removeSLA = useEndpoint('DELETE', `/v1/livechat/sla/:slaId`, { slaId: _id });
 
-	const handleDelete = useMutableCallback((e) => {
+	const handleDelete = useEffectEvent((e) => {
 		e.stopPropagation();
 		const onDeleteAgent = async (): Promise<void> => {
 			try {

diff --git a/apps/meteor/client/omnichannel/slaPolicies/SlaEdit.tsx b/apps/meteor/client/omnichannel/slaPolicies/SlaEdit.tsx
@@ -1,6 +1,6 @@
 import type { IOmnichannelServiceLevelAgreements, Serialized } from '@rocket.chat/core-typings';
 import { Field, FieldLabel, FieldRow, FieldError, TextInput, Button, Margins, Box, NumberInput } from '@rocket.chat/fuselage';
-import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { useToastMessageDispatch, useRoute, useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import { useController, useForm } from 'react-hook-form';
@@ -51,7 +51,7 @@ function SlaEdit({ data, isNew, slaId, reload, ...props }: SlaEditProps): ReactE
 
 	const { field: descField } = useController({ control, name: 'description' });
 
-	const handleSave = useMutableCallback(async () => {
+	const handleSave = useEffectEvent(async () => {
 		const { name, description, dueTimeInMinutes } = getValues();
 
 		if (!isValid || !name || dueTimeInMinutes === undefined) {

diff --git a/apps/meteor/client/omnichannel/slaPolicies/SlaPage.tsx b/apps/meteor/client/omnichannel/slaPolicies/SlaPage.tsx
@@ -1,5 +1,5 @@
 import { Button, ButtonGroup } from '@rocket.chat/fuselage';
-import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { useRouteParameter, useRoute } from '@rocket.chat/ui-contexts';
 import { useRef, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -28,7 +28,7 @@ const SlaPage = () => {
 		reload.current();
 	}, []);
 
-	const handleClick = useMutableCallback(() =>
+	const handleClick = useEffectEvent(() =>
 		slaPoliciesRoute.push({
 			context: 'new',
 		}),

diff --git a/apps/meteor/client/omnichannel/slaPolicies/SlaTable.tsx b/apps/meteor/client/omnichannel/slaPolicies/SlaTable.tsx
@@ -1,5 +1,5 @@
 import { Pagination } from '@rocket.chat/fuselage';
-import { useDebouncedValue, useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import { useDebouncedValue, useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { useTranslation, useEndpoint, useRouter } from '@rocket.chat/ui-contexts';
 import { useQuery, hashKey } from '@tanstack/react-query';
 import type { MutableRefObject } from 'react';
@@ -55,8 +55,8 @@ const SlaTable = ({ reload }: { reload: MutableRefObject<() => void> }) => {
 		reload.current = refetch;
 	}, [reload, refetch]);
 
-	const handleAddNew = useMutableCallback(() => router.navigate('/omnichannel/sla-policies/new'));
-	const onRowClick = useMutableCallback((id) => () => router.navigate(`/omnichannel/sla-policies/edit/${id}`));
+	const handleAddNew = useEffectEvent(() => router.navigate('/omnichannel/sla-policies/new'));
+	const onRowClick = useEffectEvent((id) => () => router.navigate(`/omnichannel/sla-policies/edit/${id}`));
 
 	const headers = (
 		<>

diff --git a/apps/meteor/client/omnichannel/tags/TagEdit.tsx b/apps/meteor/client/omnichannel/tags/TagEdit.tsx
@@ -1,6 +1,6 @@
 import type { ILivechatDepartment, ILivechatTag, Serialized } from '@rocket.chat/core-typings';
 import { Field, FieldLabel, FieldRow, FieldError, TextInput, Button, ButtonGroup, FieldGroup, Box } from '@rocket.chat/fuselage';
-import { useMutableCallback, useUniqueId } from '@rocket.chat/fuselage-hooks';
+import { useEffectEvent, useUniqueId } from '@rocket.chat/fuselage-hooks';
 import { useToastMessageDispatch, useRouter, useMethod } from '@rocket.chat/ui-contexts';
 import { useQueryClient } from '@tanstack/react-query';
 import { useForm, Controller } from 'react-hook-form';
@@ -52,7 +52,7 @@ const TagEdit = ({ tagData, currentDepartments }: TagEditProps) => {
 		},
 	});
 
-	const handleSave = useMutableCallback(async ({ name, description, departments }: TagEditPayload) => {
+	const handleSave = useEffectEvent(async ({ name, description, departments }: TagEditPayload) => {
 		const departmentsId = departments?.map((dep) => dep.value) || [''];
 
 		try {

diff --git a/apps/meteor/client/omnichannel/tags/TagsTable.tsx b/apps/meteor/client/omnichannel/tags/TagsTable.tsx
@@ -1,5 +1,5 @@
 import { IconButton, Pagination } from '@rocket.chat/fuselage';
-import { useDebouncedValue, useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import { useDebouncedValue, useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { useTranslation, useEndpoint, useRouter } from '@rocket.chat/ui-contexts';
 import { useQuery, hashKey } from '@tanstack/react-query';
 import { useMemo, useState } from 'react';
@@ -27,8 +27,8 @@ const TagsTable = () => {
 	const { current, itemsPerPage, setItemsPerPage: onSetItemsPerPage, setCurrent: onSetCurrent, ...paginationProps } = usePagination();
 	const { sortBy, sortDirection, setSort } = useSort<'name' | 'description'>('name');
 
-	const onRowClick = useMutableCallback((id) => router.navigate(`/omnichannel/tags/edit/${id}`));
-	const handleAddNew = useMutableCallback(() => router.navigate('/omnichannel/tags/new'));
+	const onRowClick = useEffectEvent((id) => router.navigate(`/omnichannel/tags/edit/${id}`));
+	const handleAddNew = useEffectEvent(() => router.navigate('/omnichannel/tags/new'));
 	const handleDeleteTag = useRemoveTag();
 
 	const query = useDebouncedValue(

diff --git a/apps/meteor/client/omnichannel/tags/useRemoveTag.tsx b/apps/meteor/client/omnichannel/tags/useRemoveTag.tsx
@@ -1,4 +1,4 @@
-import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { useSetModal, useToastMessageDispatch, useRouter, useMethod } from '@rocket.chat/ui-contexts';
 import { useQueryClient } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
@@ -13,7 +13,7 @@ export const useRemoveTag = () => {
 	const queryClient = useQueryClient();
 	const router = useRouter();
 
-	const handleDeleteTag = useMutableCallback((tagId) => {
+	const handleDeleteTag = useEffectEvent((tagId) => {
 		const handleDelete = async () => {
 			try {
 				await removeTag(tagId);

diff --git a/apps/meteor/client/omnichannel/units/UnitEdit.tsx b/apps/meteor/client/omnichannel/units/UnitEdit.tsx
@@ -14,7 +14,7 @@ import {
 	FieldRow,
 	CheckOption,
 } from '@rocket.chat/fuselage';
-import { useMutableCallback, useDebouncedValue, useUniqueId } from '@rocket.chat/fuselage-hooks';
+import { useEffectEvent, useDebouncedValue, useUniqueId } from '@rocket.chat/fuselage-hooks';
 import { useToastMessageDispatch, useMethod, useTranslation, useRouter } from '@rocket.chat/ui-contexts';
 import { useQueryClient } from '@tanstack/react-query';
 import { useMemo, useState } from 'react';
@@ -127,7 +127,7 @@ const UnitEdit = ({ unitData, unitMonitors, unitDepartments }: UnitEditProps) =>
 		return [...mappedMonitorsItems, ...pending];
 	}, [monitors, monitorsItems]);
 
-	const handleSave = useMutableCallback(async ({ name, visibility }) => {
+	const handleSave = useEffectEvent(async ({ name, visibility }) => {
 		const departmentsData = departments.map((department) => ({ departmentId: department.value }));
 
 		const monitorsData = monitors.map((monitor) => ({