react icon indicating copy to clipboard operation
react copied to clipboard

Fixed `useSyncExternalStoreWithSelector` to update memoizedSnapshot on change

Open jellevoost opened this issue 2 years ago • 8 comments

Summary

A proposed fix for the bug described in https://github.com/facebook/react/issues/25967

How did you test this change?

See the issue linked above, test scenario included in the code sandbox: https://codesandbox.io/s/fervent-ives-0vm9es?file=/src/App.jsx

jellevoost avatar Jan 06 '23 13:01 jellevoost

Unfortunately I did not figure out a way to properly unit test this issue which is why I've included the sandbox to prove that the fix works as intended. If anyone has any idea on how to add a unit test to this I would be happy to add them!

jellevoost avatar Jan 06 '23 13:01 jellevoost

oh nice

softstrong avatar Jan 12 '23 05:01 softstrong

Hi @jellevoost - I'm finding the stale snapshot issue this fixes is a serious issue for our application. Did you end up using this solution in your own code, and if so, did it work well for you? I'm likely going to pick it up for our codebase but just wanted to do a bit of due diligence first in case you had any other findings since this PR was created. Thanks for figuring this out!

jkillian avatar Dec 04 '23 21:12 jkillian

Hi @jellevoost - I'm finding the stale snapshot issue this fixes is a serious issue for our application. Did you end up using this solution in your own code, and if so, did it work well for you? I'm likely going to pick it up for our codebase but just wanted to do a bit of due diligence first in case you had any other findings since this PR was created. Thanks for figuring this out!

As it was quite a serious problem for me as well (leading to quite a few OOM crashes) I did include the fix and it has no longer posed any problem or any noticeable side-effect since (and there are quite a bunch of users that use it extensively). Since in my case the problem was only present in combination of react-redux (as it was using the use-sync-external-store shim) the fix was included the react-redux and patched in there. I've not yet tested v9 of react-redux in combination with react 18.2.0, but looking at the changes I think the problem still exists there (but you can no longer fix the shim included in react-redux as it relies fully on react 18 now) and you would have to patch react with this change.

jellevoost avatar Dec 05 '23 08:12 jellevoost

This pull request has been automatically marked as stale. If this pull request is still relevant, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize reviewing it yet. Your contribution is very much appreciated.

github-actions[bot] avatar Apr 09 '24 20:04 github-actions[bot]

Not stale

markerikson avatar Apr 09 '24 20:04 markerikson

Will mention for anyone else stumbling here that we've been applying @jellevoost's change to use-sync-external-store using patch-package and it's been working well to resolve the memory issues we saw without any noticeable negative effects!

jkillian avatar Apr 09 '24 20:04 jkillian

Unfortunately I did not figure out a way to properly unit test this issue which is why I've included the sandbox to prove that the fix works as intended. If anyone has any idea on how to add a unit test to this I would be happy to add them!

Looks like there's a PR implementing the same fix but with a test https://github.com/facebook/react/pull/27776

jy14898 avatar Apr 13 '24 23:04 jy14898

This pull request has been automatically marked as stale. If this pull request is still relevant, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize reviewing it yet. Your contribution is very much appreciated.

github-actions[bot] avatar Jul 13 '24 01:07 github-actions[bot]

Still not stale

markerikson avatar Jul 13 '24 01:07 markerikson

@rickhanlonii as @jy14898 mentioned, that my PR also has tests for that issue.

gentlee avatar Jul 22 '24 08:07 gentlee