[react] useEchoPresence "auto leave" breaks when we use here, joining and leaving.

[thoresuenert]

Echo Version

2.2.0

Laravel Version

12

PHP Version

8.4

NPM Version

10.9.3

Database Driver & Version

No response

Description

We try to implement a full functional chat:

we want to use:

• whisper
• here
• joining
• leaving to track the active/online users of a channel.

 const channelId = usePage().props.channelId;
    const { channel } = useEchoPresence(
        'message.' + channelId,
        'MessageCreated',
        (e) => {
            console.log('message');
        },
        [channelId],
    );

    channel()
        .here((members) => {
            console.log(
                'following members are here:',
                members.reduce((accumulator, currentValue) => accumulator + currentValue.id + ' ', ''),
            );
            console.log('here');
        })
        .joining((member) => {
            console.log('member joined: ', member.id);
        })
        .leaving((member) => {
            console.log('member left: ', member.id);
        })
        .error((error) => {
            console.error(error);
        });

we cannot figure out how to store members int he here callback to react state and update that state in joining an leaving.

All attempts until now break the ability of auto-leave a presence channel when the channelId changes.

Steps To Reproduce

This repo reproduces our issue: https://github.com/anotherfrontendguy/reverb-test

• chat.tsx is working fine
• chat-broken.tsx breaks the leaving of a channel

cp .env.example .env
touch database/database.sqlite
key:generate
install reverb
migrate 
composer run dev

Create two different users

In the sidebar: One user joins the channel and the other follows:

• Chat 1
• Chat 2
• Chat Broken 1 (when you leave this channel for broken 2, you wont leave the channel)
• Chat Broken 2

[thoresuenert]

Does anyone have an idea what we are doing wrong?