Children components don't see update of one atom in parent one

[AlekseyP18]

Summary

Hello dear jotai team. I liked this store manager because it has all needed features. I've been trying to migrate from mobx store to jotai, and I'm facing with one bug.

I have 2 components App and ParentFruit which use one atom - pricesAtom

When I added new price in App component the child component - ParentFruit doesn't see this new one object and doesn't render this new one

There is the same problem with arrays too - todosAtom

Link to reproduction

Link to sandbox reprodaction

Check List

Please do not ask questions in issues.

• I've already opened a discussion before opening this issue, or already discussed in other media.

Please include a minimal reproduction.

• I've added a link to a typescript playground or codesandbox with a minimal reproduction.

[rothsandro]

The problem is where your Provider is placed. The useAtom call in your App component is not wrapped in a provider and therefore uses the default store of Jotai. Your ParentFruit component is wrapped in a Provider and therefore uses a separate store, not the default store.

const App = () => {
  const [...] = useAtom(fruitsAtom);    // (1) Default store

  return (
    <Provider>
      <ParentFruit />                   // (2) Store from Provider
      <button>Add Fruit</button>
    </Provider>
  );
};

The Provider should be at the root of your application, everything should be wrapped in the provider.

const App = () => {
  return (
    <Provider>
      <DeliciousFruits />
    </Provider>
  );
}

const DeliciousFruits = () => {
  const [...] = useAtom(fruitsAtom);

  return (
    <ParentFruit />
    <button>Add Fruit</button>
  );
};

PS. I think it's better to open a discussion instead of an issue for the next time.