React Tearing in Jotai and Reducer

[rikisamurai]

Bug Description

Hi, I'm currently learning about React tearing. I discovered that Jotai uses useReducer, which might lead to tearing issues. However, when I tried Jotai and created a simple demo using useReducer alone, I didn't experience any tearing. I'm not sure if there's an issue with my demo, but I'm very curious about why it's behaving differently.
There is a codesandbox

Reproduction Link

https://codesandbox.io/p/sandbox/rwvlk4

[dai-shi]

Yes, it's an intentional limitation.

See also: #2137

[dai-shi]

useState or useReducer isn't a problem. It's the external store which is the source of state. So, useReducer + useEffect for sync can cause tearing.

[rikisamurai]

Thanks🙏 I used to think Jotai was only use useReducer, but after examining the source code, I realized it also uses useEffect. This has given me a deeper understanding of Jotai.

[dai-shi]

You are welcome.
Check out the blog post too https://blog.axlight.com/posts/why-use-sync-external-store-is-not-used-in-jotai/ if you haven't.

[billnye2]

Hello, which scenarios does tearing occur under? From your great blog post, you link to this sandbox which shows tearing when using the raw startTransition (non-hook version). Let me outline some research I've done here and my thoughts.

This open react issue shows that useTransition (or rather the startTransition function you get from that hook) and startTransition (non-hook version) have different behavior. Specifically, that the useTransition version will interrupt existing low-priority transition updates (due to the isPending flag needing to be a high-priority update); but the non-hook startTransition version will not, and from my testing it will instead run transitions in sequence, which is why with Jotai we see tearing.

In that sandbox, as you demonstrated, if you click twice rapidly, then you see tearing. And from my debugging, it appears that's because the 2 transitions (each of which occur from the click) run in sequence, one after the other; or rather more accurately stated, while the actual code in the startTransition blocks run immediately, the re-renders from them occur in sequence. This causes the tearing because while the first transition renders each Counter, the global state is all-of-a-sudden updated by the second click (a high-priority update), causing the later Counter components to render with that new value. But then after the first transition completes rendering, React will render the second transition that occurred due to the second click, and thus everything will become stable after this completes.

After finding that Github issue I linked above, I tested using useTransition and, lo and behold, there was no tearing. Instead, the first transition was thrown out, and then the second one ran to completion. So the user (me) only sees a single screen update, and it's actually faster to get to that final state because React aborts the first transition.

Wondering if you are aware of other scenarios where tearing will occur, and also if you have any thoughts regarding that open React issue; is that something that could be fixed by the core React devs where the non-hook startTransition follows the same behavior as the useTransition one?

[dai-shi]

Wow, what deep thought and research. No, I wasn't aware the hook version of startTransition changes the behavior. My understanding is based on the experiment I did with https://github.com/dai-shi/will-this-react-global-state-work-in-concurrent-rendering. It still tears on the mount time.