jotai-scheduler

[L-Qun]

@dai-shi

Hi Daishi, I created a package called jotai-scheduler: https://github.com/L-Qun/jotai-scheduler

It is used to solve the issue of state update priorities. Jotai helps us address the problem of re-rendering, but there may be different priorities in the rendering order of components. Therefore, I invented jotai-scheduler. It is still in its early stages; please let me know your thoughts.

All components share the same state, but each component has a different level of importance. For instance, the <Content /> component should be considered more important. Therefore, when this state is updated, the <Content /> component should be rendered first to provide a better user experience.

Before use useAtomValue/useAtom, It might appear somewhat laggy:

Now we use useAtomValueWithScheduler/useAtomWithScheduler, the <Content /> Component is updated first, followed by the <Sidebar />, and finally the <Header /> and <Footer />:

Important content will be displayed to users more quickly, thereby providing a better user experience.

The only difference from the native Jotai API is that it requires passing a priority parameter, which can be ImmediatePriority, NormalPriority, or LowPriority.

const num = useAtomValue(anAtom, {});

const num = useAtomValueWithSchedule(anAtom, {
  priority: LowPriority,
});

[L-Qun]

Can this library be added to Jotai Labs https://github.com/jotaijs?

[dai-shi]

Sure, I can invite you.

[dai-shi]

While I like the idea of scheduler and/or batching for Jotai.
This looks like a bit different from what I expect.
It feels like you are re-inventing something React has already invented (I guess you know it as you name such priorities). Can you try and see if useDefferedValue helps for your case? I'm not sure if it works out of the box though.

[L-Qun]

Yes, If all items are re-rendered, it might cause lag. Batch rendering is a good choice.

[dai-shi]

I mean if some items are changed, separating atoms would be better. If all items are changed at once, but some of them are rendered with a low priority, it sounds like a very rare case.

Wait, you are not saying that, because even with your suggestion, it's not possible.

[dai-shi]

So, in summary, we should first reach out for useDefferedValue or useTransition. In some cases, they might not work, and a third-party library could help.

[L-Qun]

I agree with you. If users find that useDeferredValue or useTransition cannot solve their problems, or if they are using React 17, this library can be helpful.