Recoil: List and delete atoms created by atomFamily

[dvasconcelos1]

Hi, first of all congrats! Recoil seems really promissing.

Is there a way to list the atoms created by atomFamily?
What about deleting them?

[drarmstr]

You can currently delete the state for atoms in a family explicitly using useResetRecoilState().
We don't currently have cleanup of the registered atom metadata, but that is something we hope to do.

The new observability API we are working on will allow you to inspect atoms in the current state, though not yet specifically those that are related in a family.

[dvasconcelos1]

Thanks @drarmstr
It would be helpful if we could also reset/delete the value from inside a selector. Something like a reset method being passed in just like get and set.

[drarmstr]

In fact there is a reset as well as a set provided to the selector set callback. Looks like that's just missing from the documentation..

[drarmstr]

Added reset to documentation in #267

[el-angel]

It seems only the delete functionality in OP's question is answered, just to up the other question: is it possible to list all the atoms from one family?

[Shmew]

Atoms in a family AFAIK aren't distinguishable from any other atom except by the key. When you observe transactions you can filter based on the atom keys if they start with the family key value.

[el-angel]

@Shmew do you maybe have a small example? I would like to know how you are able to get all the atoms in the first place.

for example:

const paymentAtomFamily = atomFamily<Payment, string>({
  key: 'paymentState',
  default: {
    id: undefined,
    amount: 0,
    currency: 'EUR',
  }
})

const Payments: React.FC = () => {
  // this errors, because I need to supply a param to paymentAtomFamily, but I don't have it at this point
  const paymentState = useRecoilState(paymentAtomFamily)
  return (
    <div>
    {...}
    </div>
  );
};

[Shmew]

It's the useTransactionObservation_UNSTABLE hook, but the API is currently unstable. You're able to view things like currently modified atoms in each transaction or all atom values that aren't in a pending/error state.

[davidmccabe]

It would be interesting to know what you're trying to do by listing the atoms in a family. Please provide a high-level description of the problem you're trying to solve and I may be able to suggest an approach that will work.

[dvasconcelos1]

A very simplistic example is the TODO LIST.
I can implement it using a list in a simple Atom, as in here.
But I don't want all the items being re-rendered again every time I update one. Therefore I pass the id to the TODO Item component and it will fetch the item data from an atomFamily so any change only affects itself.
Therefore would be nice to have a way of listing the atoms from a family. Otherwise I would need to keep a list of IDs somewhere else.

[davidmccabe]

I would suggesting keeping track of the list of IDs in another atom.

[justinbelcher]

Still not super clear how you remove atomFamily entities outside of selectors. Any help understanding this?

Given a straightforward list:

const itemListState = atom({
  key: 'itemListState',
  default: [],
}
const itemState = atomFamily({
  key: 'itemState',
  default: null
});
// Items are added via something like: set(itemState(id), data)

How do you later remove those items to get back to an empty document? AFAIK, Recoil wants you to create resetters for specific atoms:

const resetItem1 = useRecoilResetState(itemState(1));
resetItem1();

What's the generalized approach?

[drarmstr]

If you're maintaining the set of items in itemListState, then you can iterate over each item to reset it in itemState family. Since using hooks conditionally or in a loop is problematic, you can use useRecoilCallback()

[justinbelcher]

Got it, thanks @drarmstr!

[tonyabracadabra]

I would suggesting keeping track of the list of IDs in another atom.

It’s been a few months, is there any new ways to maintain the list of ids of atomFamily? What if I have a lot of states and maintaining the list of ids would still be a problem?

[NateAGeek]

I know this might be a bit out of the scope of this discussion. But I am currently using a hybrid approach with Redux and Recoil. We have a list of nodes positions being stored in recoil by id via atomFamily and a list of node data in redux. We can dispatch the removal of a node in Redux, however, I can't call useRecoilResetState in the redux reducer(rule of hooks). I am worried about state poisoning carrying over if I were to re-add the node's position after removal.