Compose atoms with server data sync.

[RodolfoSilva]

What's the best way to derive two atom lists to only re-render an individual list of items?

I'm using Jotai with React Query. Initially, I was storing the server-fetched list as individual atoms and then including a property called isSelected. However, every time React Query refetches, I lose the previously selected item.

I was wondering if it would be possible to use three atoms: one to store the selected items, another to store the list of items, and a derived atom to combine the two. The goal is to ensure that only the relevant item re-renders when it is updated or selected.

const itemListAtom = atom<Item[]>([]);
const selectedItemsAtom = atom<Set<string>>(new Set());
const derivedListAtom = atom((get) => {
  const items = get(itemListAtom);
  const selectedItems = get(selectedItemsAtom);
  
  // Should I use atom here?
  return items.map((item) => ({
    ...item,
    isSelected: selectedItems.has(item.id),
  }));
});

const toggleSelectionAtom = atom(null, (get, set, itemId: string) => {
  const selectedItems = new Set(get(selectedItemsAtom));

  if (selectedItems.has(itemId)) {
    selectedItems.delete(itemId);
  } else {
    selectedItems.add(itemId);
  }

  set(selectedItemsAtom, selectedItems);
});

// Usage:

const items = useAtomValue(derivedListAtom);
const [, toggleSelection] = useAtom(toggleSelectionAtom);

return (
  <ul>
    {items.map((item) => (
      <li key={item.id} onClick={() => toggleSelection(item.id)}>
        {item.name} {item.isSelected ? "(Selected)" : ""}
      </li>
    ))}
  </ul>
);

[RodolfoSilva]

@dai-shi do you have any advice?

[dai-shi]

The goal is to ensure that only the relevant item re-renders when it is updated or selected.

Yeah, with the atoms-in-atom technique, you would be able to have more control over rerenders.