Scoped atom leaks to other Provider when storing Set

[lamualfa]

Reproduction

1. Click Toggle 0.0, the Total active togglers should be 1 ✅
2. Then click Toggle 0.1, the Total active togglers should be 2 ✅
3. Then click Toggle 0.2, the Total active togglers should be 3 ✅
4. And last, click Toggle 1.0 (use different Provider), the Total active togglers should be 1, but it gives you 2 ❌

https://codesandbox.io/p/sandbox/rjgmzm

screen-capture.webm

Tech Stack

• Jotai 2.10.0
• React 18.2.0

[rothsandro]

Your atom callback mutates the Set before creating a new one but you shouldn't mutate atom values.

Change your atom callback to first create a copy of the set and then mutate the copy:

  const onClick = useAtomCallback(
    useCallback(
      (get, set) => {
        set(activeIdsAtom, (activeIds) => {
          const next = new Set(activeIds); // 1. Create a copy

          if (isActive) {
            next.delete(id); // 2. Mutate the copy
          } else {
            next.add(id); // 2. Mutate the copy
          }

          return next;
        });
        setIsActive((isActive) => !isActive);
      },
      [isActive, id]
    )
  );

[lamualfa]

Yes, it works. But, isn't the activeIds parameter passed by useAtomCallback supposed to be isolated from the other Provider? Even if the activeIds is mutated, the change should only affect all the consumers in the same Provider, not the consumers behind other Provider.

[rothsandro]

You define the initial value once when creating the atom and it is then reused for all providers / scoped because otherwise Jotai / Jotai Scope would have to clone your initial value (which isn't easy possible).

It should work if you use atomWithLazy because then you can create a new Set for every scope. You'll need to test it if everything works fine with Jotai Scope but I think it should.

const activeIdsAtom = atomWithLazy<Set<string>>(() => new Set([]));

[lamualfa]

It's make sense now. Thank you.