diff --git a/src/components/Channel/Channel.tsx b/src/components/Channel/Channel.tsx index 427276c1a..74de7f266 100644 --- a/src/components/Channel/Channel.tsx +++ b/src/components/Channel/Channel.tsx @@ -407,7 +407,7 @@ const ChannelInner = < const [quotedMessage, setQuotedMessage] = useState>(); const [channelUnreadUiState, _setChannelUnreadUiState] = useState(); - const notificationTimeouts: Array = []; + const notificationTimeouts = useRef>([]); const [state, dispatch] = useReducer>( channelReducer, @@ -641,15 +641,15 @@ const ChannelInner = < channel.on(handleEvent); } })(); + const notificationTimeoutsRef = notificationTimeouts.current; return () => { if (errored || !done) return; channel?.off(handleEvent); client.off('connection.changed', handleEvent); client.off('connection.recovered', handleEvent); - client.off('user.updated', handleEvent); client.off('user.deleted', handleEvent); - notificationTimeouts.forEach(clearTimeout); + notificationTimeoutsRef.forEach(clearTimeout); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [ @@ -671,7 +671,10 @@ const ChannelInner = < /** MESSAGE */ // Adds a temporary notification to message list, will be removed after 5 seconds - const addNotification = makeAddNotifications(setNotifications, notificationTimeouts); + const addNotification = useMemo( + () => makeAddNotifications(setNotifications, notificationTimeouts.current), + [], + ); // eslint-disable-next-line react-hooks/exhaustive-deps const loadMoreFinished = useCallback(