Nested object references are shared when using createStore

[controlol]

Bug Description

When an atom with nested objects is created and reused in different stores the nested objects are not cloned. Resulting in each atom keeping the reference to the original object. This result in problems when updating the data in one store and getting the same changes in another store. This second store is not immediately updated because Object.is will not detect this until the atom in the second store is also updated.

Reproduction Link

https://stackblitz.com/edit/vitejs-vite-31argexu?file=src%2FApp.tsx

[rothsandro]

I think that's by design that Jotai doesn't clone the initial value. It's not trivial (e.g. structuredClone doesn't support all possibles values) and can also lead to problems / unexpected behaviors.

If Jotai would clone the initial value, your code would still not work in some cases. For example, if you have a derived atom that returns the nested object, the components reading this atom would not re-render because you mutated the object so it's still the same reference.

You can use atomWithDefault() if you want to create a new object for each store:

export const basicAtom = atomWithDefault<BasicObject>(() => ({ /* ... */ }));

And when updating atom values, I recommend to create new objects instead of mutating them. You can use Immer and Jotai also has an integration for Immer

[dai-shi]

There's atomWithLazy which should be a better choice in that case.

[controlol]

Thanks! I already thought something like this would be the answer, but thought it might be a bug anyways.

I already heard of Immer before, but didn't fell the need to find out it's use cases because I think Jotai is already really good! Maybe now is the time to check that out in more detail :)
atomWithLazy is what I was looking for.