How to use retainedBy: components?

[alexkirsz]

Hello!

I'm very interested in Recoil's upcoming garbage collection feature. It appears the GK is enabled on 0.7, but I can't seem to make the retainedBy_UNSTABLE: "components" option work properly for my atoms. Here's an example CodeSandbox that showcases the issue: the atom only gets disposed of when the whole <RecoilRoot> is unmounted, and not when the last component that reads it is unmounted.

I realize this feature is not officially supported at the moment, but it's a must-have for using Recoil in my current project so I can deal with the instability 🙂

Cheers,
Alex

[alexkirsz]

I've been using the getInfo_UNSTABLE utility function to count all references to an atom from dependant components on a loop (requestAnimationFrame), and clearing my atoms manually after a timeout once the dependant count hits 0.

This is not equivalent to proper garbage collection since there's no way to make the atom return to a "suspending" state, nor is there a way to fully clear its value. The only thing that's possible is setting/resetting the atom, but then effects do not run again when the atom is requested.

Despite these limitations, it works well enough for my purpose.

function getDependants<T>(getInfo: GetInfo<T>, atom: RecoilValue<T>): number {
  const dependants = [];
  const nodes = [atom];

  // BFS to look up all dependant components.
  let node;
  while ((node = nodes.pop()) != null) {
    const info = getInfo(node);

    for (const component of info.subscribers.components) {
      dependants.push(component);
    }

    for (const childNode of info.subscribers.nodes) {
      nodes.push(childNode);
    }
  }

  return dependants.length;
}