search

ably-labs / react-hooks

The recommended way to use Ably in React components
https://www.npmjs.com/package/@ably-labs/react-hooks
MIT License
37 stars 9 forks source link

Issue with HMR (Fast Refresh) in NextJS #15

Open ivan-dalmet opened 2 years ago

ivan-dalmet commented 2 years ago

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.

image

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

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

NickTaykey commented 2 years ago

I also have this issue did you find a solution?

NickTaykey commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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[bot] commented 1 year ago

➤ Automation for Jira commented:

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