Instances of `Error: This Suspense boundary received an update before it finished hydrating`

[Rodeoclash]

I'm currently on v1.02 and recently tried to upgrade to v2.01. This went fine (and a ton of boilerplate was removed, well done!) but my automated tests started to get the error Error: This Suspense boundary received an update before it finished hydrating.

I didn't notice this error in development when using the site normally and I suspect that it might have something to do with how aggressively playwright controls the browser (i.e. it will navigate to another page very quickly after the first page has rendered some HTML).

I don't understand the internals of relay-nextjs very well but it it possible that something changed in the new version that might be related to suspense boundaries?

I found some details around how hard it is to debug where this occurring (facebook/react#25625) and some other users that have tracked this to a useEffect hook problem, however the stack trace is not very useful for figuring out exactly where it went wrong.

Just curious if anyone else has run into this!

React version 18.2.0
Next 13.3.0

[rrdelaney]

@Rodeoclash Sorry for the late response here! We started to see this issue a lot in development with the React 18 upgrade and it hasn't really impacted us since. We're under the impression this is a somewhat misleading error message and don't plan to fix it.

[rrdelaney]

Following up here and to be clear, I mean that this has not impacted production for us and the application continues to work as expected. This is annoying in development mode, but this is an issue with React we cannot fix without substantially altering our code to be less efficient. Please see this discussion surrounding the issue on Reddit: https://www.reddit.com/r/nextjs/comments/yxa87v/im_glad_im_not_the_only_one_that_thinks_this/

If there are ideas on a workaround for the error we would be very happy to incorporate them into the library and welcome contribution.

[Rodeoclash]

@rrdelaney Interesting, I was getting rehydration issues in production as well (and have basically turned off SSR until I find some time to get to the bottom of what's going on) but it seems that this problem is tangentially related to SSR right? I think I might have an underlying issue going on which is also occurring alongside this issue.

[FINDarkside]

Just for some context, as of my understanding the error was already removed in 2022. See: facebook/react#25692

The big change here is that we consider this a bug of React that we should fix. Therefore it's not actionable to users today because it should just get fixed. So we're removing the error early. Although anyone that has fixed these issues already are probably better off for it.

The latest stable React release is almost 2 years old though which is why we're still seeing this error.