bug: Infinity loop for jumpToFirstUnreadMessage

[MrMole96]

Describe the bug

Recently we got new functionality jumpToFirstUnreadMessage which I wanted to try. When I navigate to chat, I can see 50 unread messages and I would like to scroll to the first unread message. I wanted to trigger this function on mount of screen so I used useEffect.

Here is my findings:

• App is crashing on the web because we have infinity loop
• App isn't crashing on mobile but still we have infinity loop
• If we leave the dependency array empty, it doesn't work
• I also tried to create button and check if it make any difference just by clicking on it and trigger function but it didn't help

To Reproduce

Steps to reproduce the behavior:

  const {  jumpToFirstUnreadMessage } =
    useChannelActionContext<StreamChatType>();

 useEffect(() => {
    //Infinity scroll on both platforms. Crash on web.
    jumpToFirstUnreadMessage();
    //It doesnt work if we make the dependency array empty
  }, [jumpToFirstUnreadMessage]);

Expected behavior

Scroll should be initiated after triggering function

Screenshots
another thing, when you create new room and invite someone and other person wants to open chat, you can see this

[MartinCupela]

Hey @MrMole96, it seems that one function exposed through the ChannelStateContext is not well memoized. I have a fix for that. On the other hand, you should adjust your effect a bit - jump only if it makes sense:

const ML = () => {
  const { channel, loadingMore } = useChannelStateContext();
  const { jumpToFirstUnreadMessage } = useChannelActionContext();

  useEffect(() => {
    if (!channel?.state.unreadCount || loadingMore) return;
    jumpToFirstUnreadMessage();
  }, [channel?.state.unreadCount, jumpToFirstUnreadMessage, loadingMore]);

  return <MessageList />;
};

[MrMole96]

Hi @MartinCupela, thank you so much for help. You fixed infinity loop 🥳

I just saw one edge case when it is not working. When you create room and write couple of messages (30), function is triggered but still we stick to bottom of chat. If I leave this screen, other user writes messages again and then when I open room again, function works and we are moved to first unread message

[stream-ci-bot]

🎉 This issue has been resolved in version 11.21.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀

[MartinCupela]

I just saw one edge case when it is not working. When you create room and write couple of messages (30), function is triggered but still we stick to bottom of chat. If I leave this screen, other user writes messages again and then when I open room again, function works and we are moved to first unread message

@MrMole96 Could you please provide a video showing the workflow?