Children components don't see update of one atom in parent one
AlekseyP18 opened this issue · comments
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
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.
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.