Explore using FinalizationRegistry for reactions disposal in react concurrent mode

[Bnaya]

As a spin-off of other discussions, such as
facebook/react#15317 (comment) and other's
It might be possible to utilize FinalizationRegistry to cleanup reactions.

FinalizationRegistry browser support is quite wide in modern browsers.
FinalizationRegistry callback is guaranteed to run "some time in the future", It's not sync, or even not immediate async

How (In very high-level)?
To use FinalizationRegistry we will need an object that React will retain, But won't be retained by us.

This object needs to be retained by react and bound to a component.
For example, it can be a something we pass as initial value to a setState.
then you register it on the finalizationRegistry:

// global
const reactionsOfCompoents = new Map()
const myFinalizationRegistry = new FinalizationRegistry((generatedTokenToGetLookupReactionBy) => {
  reactionsOfCompoents.get(generatedTokenToGetLookupReactionBy).cleanup()
  reactionsOfCompoents.delete(generatedTokenToGetLookupReactionBy);
});

// Per react component
reactionsOfCompoents.set(generatedTokenToGetLookupReactionBy, reactionsOfSpecificComponent);
myFinalizationRegistry.register(objectePassedToSetState, generatedTokenToGetLookupReactionBy);
// we must not holt reference on `objectePassedToSetState` other than via WeakRef if we need a way to manually unregister 

If React decides not to commit this component (as after unmount), it will stop retaining the object we've passed to setState,
And the cleanup callback of FinalizationRegistry will be called with the token that we will need to dispose the reactions by.

TBH I don't really know the internals of mobx-react-* nowdays

cc @benjamingr @FredyC @mweststrate

Edit:
POC: https://github.com/mobxjs/mobx-react-lite/pull/332/files#diff-33c284d6bf49fd504d1250e7090d24ab73dae525efcc6376363ec89722a0df32

[mweststrate]

Yep, that could work as far as I can see :)

[Bnaya]

I have a POC for that here:
https://github.com/mobxjs/mobx-react-lite/pull/332/files#diff-33c284d6bf49fd504d1250e7090d24ab73dae525efcc6376363ec89722a0df32

[danielkcz]

@Bnaya How did you come up with

FinalizationRegistry browser support is quite wide in modern browsers.

It seems rather limited for major browsers really. Not even Safari? https://caniuse.com/mdn-javascript_builtins_finalizationregistry

I tried to find some accessible polyfill, but it seems it's not even possible? What that would imply for other unsupported browsers? Memory leaks?

[Bnaya]

We keep the timer based implementation,
So there are no regressions

Regarding browser support, it was shipped in chromium 84, firefox,
And safari support is worked on:
https://bugs.webkit.org/show_bug.cgi?id=198710

Regarding Hermes, seems like it's not supporting it atm
https://github.com/facebook/hermes/blob/0eb2494ed036a902a6d8779416555013de819ca4/utils/testsuite/testsuite_skiplist.py#L1705

[danielkcz]

Right, I just noticed in the PR you are checking for it and keeping timers, cool :)

[mweststrate]

Bnaya, random thought, did you consider making a separate package for this? Most state management libraries need this and a standardized useDiscard with smart and fallback implementation would be pretty neat. Op zo 1 nov. 2020 14:58 schreef Daniel K. <[email protected]>:

…

Right, I just noticed in the PR you are checking for it and keeping timers, cool :) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2562 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBFY6NCVRNCSG4LAK6LSNVZRBANCNFSM4S7TW74A> .

[Bnaya]

Bnaya, random thought, did you consider making a separate package for this? Most state management libraries need this and a standardized useDiscard with smart and fallback implementation would be pretty neat. Op zo 1 nov. 2020 14:58 schreef Daniel K. [email protected]:
…
Right, I just noticed in the PR you are checking for it and keeping timers, cool :) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2562 (reply in thread)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAN4NBFY6NCVRNCSG4LAK6LSNVZRBANCNFSM4S7TW74A .

I'm working on it :),
Because i need to make it more general there are some mode edge cases

[Bnaya]

The poc is merged, locking the discussion:)