Atoms with a selector default cause memory leak

[noritheduck]

Discussed in #1821

^{Originally posted by janicduplessis May 24, 2022}

Issue

Creating an atom with a selector to lazily initialize the default value like mentioned in the documentation here will cause all values set to it to leak.

This will leak:

atom({
  key: "transactions",
  default: selector({
    key: "transactions/default",
    get: retrieveTransactions
  })
});

This is fine:

atom({
  key: "transactions",
  default: retrieveTransactions()
});

The issue is caused by the selector created by atomWithFallback (https://github.com/facebookexperimental/Recoil/blob/main/packages/recoil/recoil_values/Recoil_atom.js#L661) which will cause all set on the atom to be cached.

Suggestion

Disabling cache for the selector created by atomWithFallback fixes the problem and should not cause any issue as I don't see why we would want to keep old values for this selector. It is also very cheap to execute.

   const sel = Recoil_selector({
     key: `${options.key}__withFallback`,
+    cachePolicy_UNSTABLE: { eviction: 'most-recent' },
     get: ({
       get
     }) => {

If this makes sense I can open a PR to make this change.

Repro

https://codesandbox.io/s/clever-wilbur-8cv6qr?file=/src/App.js

Open chrome devtools and go to the Memory tab. Notice ever increasing memory usage for the .csb.app js context.

By taking a snapshot we can clearly see the leaked Transaction objects.

Set LEAK to false and refresh

Observe no more memory leak