bug: Channel list component never updates custom handler for `onMessageNewHandler`

[hkasabas]

Describe the bug

We're using component ChannelList and passing some custom event handlers (eg. onMessageNewHandler). That component uses hook useMessageNewListener to subscribe to message.new event and run some internal logic or to run custom event handler. Internally, hook uses useEffect to manage event subscription but since customHandler prop is not in effect's dependecies, it never updates it so we're always stuck with the inital event callback version which then contains stale component state.

To Reproduce

Steps to reproduce the behavior:

1. Create a React component
2. Make a custom callback event function that depends on some local state that changes over time and log that state in console
3. Use ChannelList component and pass it that event handler in onMessageNewHandler property
4. Console log that state from component
5. Trigger message.new event
6. See that event handler logs the first state value and not the latest one

Expected behavior

When an event handler for ChannelList.onMessageNewHandler changes (eg. because useCallback() dependecies chaged), component should update and use the latest handler version on next appropriate event.

Package version

• stream-chat-react: 11.23.10, 12.0.0

Desktop (please complete the following information):

• OS: Ubuntu
• Browser: Chrome
• Version: 129.0.6668.58

Additional context

v12.0.0 - https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelList/hooks/useMessageNewListener.ts#L51

v11.23.10 - https://github.com/GetStream/stream-chat-react/blob/v11.23.10/src/components/ChannelList/hooks/useMessageNewListener.ts#L51

[MartinCupela]

@hkasabas thank you for bringing this up.

[stream-ci-bot]

:tada: This issue has been resolved in version 12.2.0 :tada:

The release is available on:

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

Your semantic-release bot :package::rocket: