diff --git a/client/components/Message/Attachments/components/Image.tsx b/client/components/Message/Attachments/components/Image.tsx index 9c46a9e680399..4adbcff4b2f90 100644 --- a/client/components/Message/Attachments/components/Image.tsx +++ b/client/components/Message/Attachments/components/Image.tsx @@ -59,7 +59,6 @@ const Image: FC = ({ previewUrl, loadImage = true, setLoadImage, src return ( ( const callbacks = new Set(); - let currentValue: T; - - const computation = Tracker.autorun(() => { - currentValue = computeCurrentValue(); - callbacks.forEach((callback) => { - callback(); + let currentValue = computeCurrentValue(); + + let computation: Tracker.Computation | undefined; + const timeout = setTimeout(() => { + computation = Tracker.autorun(() => { + currentValue = computeCurrentValue(); + callbacks.forEach((callback) => { + callback(); + }); }); - }); + }, 0); return { getCurrentValue: (): T => currentValue, @@ -27,10 +30,12 @@ export const createReactiveSubscriptionFactory = ( callbacks.add(callback); return (): void => { + clearTimeout(timeout); + callbacks.delete(callback); if (callbacks.size === 0) { - computation.stop(); + computation && computation.stop(); } }; }, diff --git a/client/views/room/contextualBar/Threads/ThreadList.js b/client/views/room/contextualBar/Threads/ThreadList.js index dc6862e03e20f..7bc76da1910de 100644 --- a/client/views/room/contextualBar/Threads/ThreadList.js +++ b/client/views/room/contextualBar/Threads/ThreadList.js @@ -1,6 +1,6 @@ import { Box, Icon, TextInput, Select, Margins, Callout } from '@rocket.chat/fuselage'; import { useResizeObserver, useMutableCallback, useAutoFocus } from '@rocket.chat/fuselage-hooks'; -import React, { useMemo, useRef } from 'react'; +import React, { useMemo } from 'react'; import { Virtuoso } from 'react-virtuoso'; import ThreadComponent from '../../../../../app/threads/client/components/ThreadComponent'; @@ -35,7 +35,6 @@ function ThreadList({ setText, }) { const showRealNames = useSetting('UI_Use_Real_Name'); - const threadsRef = useRef(); const t = useTranslation(); const inputRef = useAutoFocus(true); @@ -60,8 +59,6 @@ function ThreadList({ [t], ); - threadsRef.current = threads; - const { ref, contentBoxSize: { inlineSize = 378, blockSize = 1 } = {} } = useResizeObserver({ debounceDelay: 200, }); diff --git a/client/views/room/contextualBar/Threads/useThreadsList.ts b/client/views/room/contextualBar/Threads/useThreadsList.ts index 7ed31535f9ba2..47308a4b8fba1 100644 --- a/client/views/room/contextualBar/Threads/useThreadsList.ts +++ b/client/views/room/contextualBar/Threads/useThreadsList.ts @@ -1,4 +1,4 @@ -import { useCallback, useEffect, useMemo, useState } from 'react'; +import { useCallback, useMemo } from 'react'; import { getConfig } from '../../../../../app/ui-utils/client/config'; import { IUser } from '../../../../../definition/IUser'; @@ -15,13 +15,7 @@ export const useThreadsList = ( initialItemCount: number; loadMoreItems: (start: number, end: number) => void; } => { - const [threadsList] = useState(() => new ThreadsList(options)); - - useEffect(() => { - if (threadsList.options !== options) { - threadsList.updateFilters(options); - } - }, [threadsList, options]); + const threadsList = useMemo(() => new ThreadsList(options), [options]); const getThreadsList = useEndpoint('GET', 'chat.getThreadsList');