useEchoNotification does not trigger my callback

[DhiaBen20]

Echo Version

2.2.6

Laravel Version

12.0

PHP Version

8.4.15

NPM Version

11.7.0

Database Driver & Version

sqlite

Description

I have two hooks listening to the same notification channel and logging a message when a notification is received.

const channel = `App.Models.User.${auth.user.id}`;

useEchoNotification(channel, () => console.log('user notification channel using useEchoNotification'));

useEcho(
    channel,
    '.Illuminate\\Notifications\\Events\\BroadcastNotificationCreated',
    () => console.log("user notification channel using useEcho"),
);

I expect to see two logs in the console, but only the second one (useEcho) is logged.

Steps To Reproduce

A minimal reproduction is available here: https://github.com/DhiaBen20/laravel-echo-bug-report

Steps:

1. Clone the repository
2. Install dependencies
3. cp .env.example .env
4. php artisan key:gen
5. php artisan migrate
6. php artisan reverb:install
7. composer run dev
8. php artisan reverb:start
9. login and go to dashboard page and open the console.
10. inside tinker notify the currently authenticated user User::first()->notify(new \App\Notifications\Test) and you will see one log printed on the console instead of two

[haringsrob]

You are missing a .listen() after the useEchoNotification.

useEchoNotification(...).listen()

[DhiaBen20]

I tried it and it doesn't work and if you go to useEchoNotification definition you will see it calls .listen() inside useEffect. Also, the official docs don’t show .listen() being called explicitly: https://laravel.com/docs/12.x/notifications#using-react-or-vue

[github-actions]

Thank you for reporting this issue!

As Laravel is an open source project, we rely on the community to help us diagnose and fix issues as it is not possible to research and fix every issue reported to us via GitHub.

If possible, please make a pull request fixing the issue you have described, along with corresponding tests. All pull requests are promptly reviewed by the Laravel team.

Thank you!

[maks-oleksyuk]

I faced the same problem, but in my case, adding useEchoNotification(...).listen() helped me.

It's very strange that this isn't mentioned in the documentation.

[SameOldNick]

The problem is related to result.channel().notification(cb); only being called once because initializedRef is only set to true:

if (!initializedRef.current) {
  result.channel().notification(cb);
}

If the component calling the hook re-renders, it stops listening for the notification and doesn't listen again because initializedRef is still true. Not sure how it can be fixed because I'm not sure what the intended purpose of initializedRef is, but I'd suggest just sticking with useEcho.

echo/packages/react/src/hooks/use-echo.ts

Line 307 in 375e348

if (!initializedRef.current) {

[aliffiansyahm]

having the same problem, using .listen() on ver 2.3.0 still does not work. when i check in chrome debug tool, i can see that it is receiving the broadcast but not calling the callback. i use useEcho

[pataar]

Should be fixed in #481