is there anyway I can remove an atomFamily all items?

[lili21]

I'm trying to build an infinite scroll list. there will be some atomFamily with different params.

const listDataAtom = atomFamily({ offset, limit } => atom(async () => {
  const res = fakeRequest({ offset, limit })
}, deepEqual);

I want to remove all the listDataAom when the list page is unmounted. so the data will keep fresh when the users revisit the list page.

any ideal?

[dai-shi]

Because .setShouldRemove() will run once immediately, you can do this:

listDataAtom.setShouldRemove(() => true); // set function to remove all
listDataAtom.setShouldRemove(null); // clear function

[blissdev]

This solution did not have the impact of clearing the data for me. Or at least did not cause a rerender where I expected it. Any ideas?

[ryym]

Hi, how about adding a method for this purpose to AtomFamily such as .clear() ?
I want to remove all items too, and the solution using setShouldRemove works for my usecase.
However I think this solution cannot be used for an atom family whose shouldRemove function is already set, because this solution replaces the shouldRemove function and there is no way to restore the original one.

[dai-shi]

I think I might have misdesigned setShouldRemove.
atomFamily shouldn't be that complex. It's just a Map of atoms.
If you know what it is, you can just drop the atom family entirely, everything will be cleared.
It feels like if atomFamily.clear() is necessary, it's probably not best use case. Adding .clear() is easy, but I'm afraid that would lead to bad usage more than good usage.

That said, we can have various types of atom families.

[ryym]

I see, thank you.
Currently I am using atomFamily in the React component so that the whole atom family data becomes garbage collectable when the component unmounts. So the .clear() method is not absolutely necessary for me.

const itemMapAtom = atom({});
const makeItemAtom = (id) => selectAtom(itemMapAtom, (m) => m[id]);

function StateProvider(props) {
  const [itemAtomFamily] = useState(() => atomFamily(makeItemAtom));
  return <StateContext.Provider value={{ itemAtomFamily }}>{props.children}</StateContext.Provider>;
}

// A component in the tree wrapped by StateProvider
function ItemList(props) {
  // ... Load items to itemMapAtom ...
  return (
    <div>
      {itemIds.map((id) => (
        <Item key={id} id={id} />
      ))}
    </div>
  );
}

function Item(props) {
  const itemAtom = useContext(StateContext).itemAtomFamily(props.id);
  const item = useAtomValue(itemAtom);
  return <div>{item.name}</div>;
}