Atoms with a selector default cause memory leak

[janicduplessis]

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

[noritheduck]

Hey @janicduplessis, have you checked out Least Recently Used (LRU) cache in the selector documentation? https://recoiljs.org/docs/api-reference/core/selector/

[janicduplessis]

@noritheduck I think this is actually an issue since it is impossible to configure the selector created internally by atomWithFallback. See https://github.com/facebookexperimental/Recoil/blob/main/packages/recoil/recoil_values/Recoil_atom.js#L661. The selector passed as default is fine and is not the one causing the problem.

[noritheduck]

We re-opened the issue here #1840. We are basically disabling cache in the wrapping selector for the atomWithFallback. Thank you @janicduplessis.