splitAtom(arrayAtom) returns inconsistent length temporarily with multiple renderers since v1.3.3

[sxy8469]

const itemsAtom = atom([])
const itemAtomsAtom = splitAtom(itemsAtom)

const items= useAtomValue(itemsAtom );
const itemAtoms= useAtomValue(itemAtomsAtom);
items.length ≠ itemAtoms.length ???

[dai-shi]

Thanks for reporting. This seems unexpected.
Would you be able to create a minimal reproduction in codesandbox?

It works in v1.3.2, but not v1.3.3, right?
Either #678 or #689 might cause an issue. 🤔

[sxy8469]

Thanks for reporting. This seems unexpected.
Would you be able to create a minimal reproduction in codesandbox?

It works in v1.3.2, but not v1.3.3, right?
Either #678 or #689 might cause an issue. 🤔

https://codesandbox.io/s/react-typescript-forked-gi301?file=/src/App.tsx

[dai-shi]

It works in v1.3.2, but not v1.3.3, right?
Either #678 or #689 might cause an issue.

Either #687 or #689, and it's #687 causing this.

[dai-shi]

Hm, removePoint removes the original array. A bit of surprising it's working pre v1.3.3.
Let me see if I can repro in tests.

[dai-shi]

Okay, I found the issue is not reproducible if we don't use react-konva.

[dai-shi]

Please see #729. I assumed react-konva triggers action asynchronously, and the error is reproduced. And it is solved with unstabled_batchedUpdates.

However, I was able to only solve your codesandbox with batchedUpdates + setTimeout. So, my assumption can be wrong.

Do you think you can reproduce the issue without react-konva and/or can you modify the test in #729 to make it fail like with react-konva (even with batchedUpdates)?

[sxy8469]

Okay, I found the issue is not reproducible if we don't use react-konva.

Yes, but the "react-konva" is required.
I still hope this problem can be solved in the next version

[dai-shi]

But, we don't know what is the problem, thus we can't investigate a possible solution. We would like to fix it for sure. Do you happen to know how react-konva works? Or, can you try to reproduce the issue without react-konva?
Meanwhile, this is a workaround: https://codesandbox.io/s/react-typescript-forked-6dqs8

[sxy8469]

But, we don't know what is the problem, thus we can't investigate a possible solution. We would like to fix it for sure. Do you happen to know how react-konva works? Or, can you try to reproduce the issue without react-konva?
Meanwhile, this is a workaround: https://codesandbox.io/s/react-typescript-forked-6dqs8

Thanks, I temporarily reverted to 1.3.2 version : )

[sxy8469]

This problem also occurs when using "@inlet/react-pixi".
It should be caused by using "ReactFiberReconciler"

Example：
https://codesandbox.io/s/react-typescript-forked-wwyru?file=/src/App.tsx

[dai-shi]

We need somebody to help on this.
If anyone is interested or got challenged, please try to create a reproduction of the issue without react-konva.

[dai-shi]

This problem also occurs when using "@inlet/react-pixi".
It should be caused by using "ReactFiberReconciler"

Oh, that's good to know! Then, I guess it would be extremely hard to solve this now.
But, the good news is when React 18 comes, it will probably batch actions, so hopefully it will work.

react-three-fiber from @pmndrs uses a separate reconciler too.

[dai-shi]

So, given that this is not solvable, my suggestion is to use (read) only the result of splitAtom, not mixing with the original arrayAtom (of course, we need to mutate arrayAtom).

Here's the fix: https://codesandbox.io/s/react-typescript-forked-6u6pe?file=/src/App.tsx

Hope it helps.

[dai-shi]

@Thisen We might be interested if #854 changes the behavior. Otherwise, we can close this as wontfix. Or, you can dig into it. I'm happy if you rebuild splitAtom from scratch.

[dai-shi]

Unfortunately, v1.5.0 doesn't change the behavior. Please use the workaround.
Let me close this as wontfix. That doesn't mean to stop someone to challenge it.