Unexpected rerenders on derived atom

[nocksock]

I encountered a rerendering issue, and boiled it down to this simple recreation.

I have list of items, from which I create an itemAtomsAtom. From that I derive another atomsAtom that contains a subset of the itemAtomsAtom (eg. items that are not marked "done"):

const items = [
  { id: 1, done: false, title: "apples" },
  { id: 2, done: false, title: "Flour" },
  { id: 3, done: false, title: "yeast" },
  { id: 4, done: true, title: "sugar" },
  { id: 5, done: true, title: "cinnamon" },
];

const itemsAtom = atom(items);

const itemAtomsAtom = atom((get) =>
  get(itemsAtom).map((listItem) => atom(listItem))
);

const openItemAtomsAtom = atom((get) =>
  get(itemAtomsAtom).filter((itemAtom) => !get(itemAtom).done)
);

This setup works as expected and only rerenders the Item that was changed. However when I use the openItemAtomsAtom, it rerenders all of them 🤔

  const itemAtoms = useAtomValue(itemAtomsAtom);
  return (
    <ul className="vstack">
      {itemAtoms.map((atom) => (
        <li key={atom.toString()} className="hstack">
          {atom.toString()}
          <Item itemAtom={atom} />
        </li>
      ))}
    </ul>
  );

What am I missing? I can't really use splitAtom here, because in my actual setup, it's not just a primitive atom. But even with const itemAtomsAtom = splitAtom(itemsAtom, (t) => t.id); I get the same behaviour.

Here's the setup in a codesandbox: https://codesandbox.io/p/sandbox/jotai-derived-and-filtered-rerender-issue-j3f64x

[dmaskasky]

Can you try adding React.memo to Item component?

[nocksock]

A React.memo around the Item does indeed fix the rerender. So is this more of a rect-behaviour than Jotai? I was trying to understand why it's behaving differently.

[dmaskasky]

I might be mistaken, but I thought that by default React renders the component even if props didn't change. So the parent component changes because OpenItems change, which causes all the child components to rerender.

[nocksock]

Hm. But it doesn't seem like that's what's happening. I updated the CSB to hopefully make my point a bit clearer. All lists are one the same level. So according to the assumed default behaviour, all components should re-render the same way.

Oh, or are you referring to the state/dependency graph when saying parent? I just realized that'd match the behaviour. Guess I'll need to have a re-read of the core-implementation to understand why it's behaving the way it does.

[rothsandro]

If you change an item, it updates the atom of that list item (atom(listItem)).

The openItemAtomsAtom depends on all atom(listItem)s, so it will recompute whenever any item atom value changes, which triggers a re-render of the Open list component. And as mentioned by dmaskasky, React will then re-render all child components unless there are wrapped in React.memo.

The itemAtomsAtom on the other hand only depends on itemsAtom, which is never updated. It creates the individual item atoms but doesn't depend on them. And because of that, itemAtomsAtom isn't recomputed when a single item atom changes. And that's why the All list component doesn't re-render when changing a single item.

Hope it helps a bit and didn't make it worse 😅

[rothsandro]

You could create separate atoms for each item's done property. This prevents re-renders of the whole list when the item changes but not it's done value.

const openItemAtomsAtom = atom((get) =>
  get(itemAtomsAtom).filter((itemAtom) => {
    const isDoneAtom = atom((get) => get(itemAtom).done);
    return !get(isDoneAtom);
  })
);

However, this re-creates the separate isDoneAtom atom for every item whenever any of the done values changes, which is likely a memory overhead (even if the old atoms are gc). You could write a custom utility to memoize the atoms but (edit: I'm not sure if this is possible) it's probably not worth the additional complexity it would introduce, if React.memo just works fine (and actually better, as it prevents re-render of individual items).

[nocksock]

The itemAtomsAtom on the other hand only depends on itemsAtom, which is never updated. It creates the individual item atoms but doesn't depend on them

Oooooh! That makes total sense! I was primarily mentally visualising the component-hierarchy and not thinking too much about the atoms in that way.

Hope it helps a bit and didn't make it worse 😅

Not at all! Quite the opposite! Thanks for clearing it up! 🙏