Jotai async atom combined with provider triggers huge amount of re-render, most likely bug.

[devnomic]

It seems if the parent has async atom
and the child is a generic component that has both provider and async atom
will cause huge amount of rerender

Repro: (react 18.0.0)
https://codesandbox.io/s/thirsty-lumiere-pymffw?file=/src/App.tsx

I also got another similar huge amount of re-render when mounting/unmounting component,
after hours of debugging why my app rerender like crazy,
managed to find this one only affect react 18.2.0 and 18.1.0, while 18.0.0 is not affected.
But i don't know exactly what caused it. most likely connected to 1st issue, but the first issue affect 18.0.0 too.

Repro: (react 18.2.0)
https://codesandbox.io/s/async-frog-vocg32?file=/src/App.tsx

[dai-shi]

Thanks for reporting.

https://codesandbox.io/s/thirsty-lumiere-pymffw?file=/src/App.tsx

I think it is because you create a new jotai store within suspense, and for initial render, react will re-mount the entire tree under suspense. So, this behavior is somewhat reproducible with useState, I suppose.

Didn't look into very closely, so I might be missing something.

[dai-shi]

Are you sure you need jotai provider (another store) for such use case?
Maybe, jotai-molecules fits better.

[devnomic]

I followed the docs initializing atom state on render, and search the discussions, so i thought using the provider was the best practice since i don't have to use another lib.

Thank you, I just tried jotai-molecules!
it seems to fix the first issue well, will try for the next issue, and report back again.

[dai-shi]

Yeah, the docs around best practices still have room for improvement. I start to think using custom store (or multiple providers) is less likely for most app development.

[devnomic]

It seems the second issue also fixed using jotai-molecules.
Now i have confidence writing the component that has standalone atom, and async.
I wish this jotai-molecules is under jotaijs to make it more maintainable and as first class utils 😄

I think it is because you create a new jotai store within suspense, and for initial render, react will re-mount the entire tree under suspense. So, this behavior is somewhat reproducible with useState, I suppose.

Perhaps this need to be put into docs also?

[dai-shi]

well, having something under jotaijs doesn't mean it's more maintainable. what's important is if there's someone who maintains it.