perf: avoid extra rerender

[hjiog]

Summary

useAtomValue called rerender inside useEffect, which led to an additional render, and this PR optimized that performance issue add a optimization test.

Check List

• pnpm run prettier for formatting code and docs

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
jotai	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 28, 2024 9:52am

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[dai-shi]

We should probably add another test to ensure that rerender() in useEffect is required, before tackling this.

If anyone is interested, contributions are welcome. It requires decent knowledge about React rendering.

Another point is that this optimization should be handled with React binding. There's nothing wrong in store implementation.

[github-actions]

Preview in LiveCodes

Latest commit: 515f416
Last updated: May 17, 2024 6:00am (UTC)

Playground	Link
React demo	https://livecodes.io?x=id/7EV87YTT2

---

See documentations for usage instructions.

[dai-shi]

We should probably add another test to ensure that rerender() in useEffect is required, before tackling this.

Please create a test for rerender() first before tackling this. Otherwise, you don't know why we need it. I think it's reasonable to create a separate PR.

Another point is that this optimization should be handled with React binding. There's nothing wrong in store implementation.

Please do not modify store implementation.

[hjiog]

If I have uderstood correctly, rerender() is to ensure that all the components have executed the subscription logic, so that there will be no problem when the onMounted method is called. But I don't know how to create a test for rerender(). Yea, this optimization can be handled with React binding, but what if we do it better? This PR can be used as a reference idea. If someone is interested, welcome to improve it.

[dai-shi]

Yeah, let's leave it for now. Here's some comments for the future.

rerender() exists because useEffect is async.
I think useLayoutEffect instead might be a fix (but I haven't confirmed),
but it will probably be a major bump with React 19 requirement (or maybe 18).

If we were to optimize it in Jotai v2, it must be within the hook.
It should be technically possible with something like use-sync-external-store shim.