Issue with HMR (Fast Refresh) in NextJS

[ivan-dalmet]

Hi,
I just tried the hooks on a very simple project with NextJS. In development, I get an error on HMR (Fast Refresh), because (I think) the connection is closed and open too fast.

Did you already had this issue? Do you know a workaround?

If not, I will be able to provide you a code sandbox 😊

[NickTaykey]

I also have this issue did you find a solution?

[NickTaykey]

I found a potential solution to this issue. The hook useChannel should not be used in components which are supposed to be re-rendered multiple times because of state updates in parent components (this was what was causing my code to raise this error). So what I did was to declare useChannel in the closest parent component to the one where it was before. In this way the hook wasn't run multiple times because of "parent state" updates. Moreover, pay attention to the operation you do on a channel object because with asynchronous code you risk to make multiple operations on the same channel overlap and this can be another reason why this error is raised.

[ivan-dalmet]

@NickTaykey I didn't found a solution and your solution is OK for a quick fix I think. I currently not using Ably on a production application so I will not investigate more but I think that the Ably team should if they want more Next users to use Ably 😊

[thisisjofrank]

I have just merged a PR which I believe will fix this issue. This was related to us detatching unmounted components, that has been exacerbated by react 18's new debug mode, where it runs useEffect twice.
Please try out the latest version and verify if you can.
Thank you!

[sync-by-unito]

➤ Automation for Jira commented:

The link to the corresponding Jira issue is https://ably.atlassian.net/browse/SDK-3756