Experiment: Redux with useMutableSource

[dai-shi]

useMutableSource is proposed in the RFC.

Let us experiment with it.

[dai-shi]

The React Redux binding implementation is surprisingly compact.

https://github.com/dai-shi/will-this-react-global-state-work-in-concurrent-mode/blob/99eea3ec9172189e115ce340a6104cb4a3c582c7/src/redux-use-mutable-source/index.js#L22-L44

[dai-shi]

  redux-use-mutable-source
    check with events from outside
      ✓ check 1: updated properly (8379ms)
      ✓ check 2: no tearing during update (2ms)
      ✓ check 3: ability to interrupt render (1ms)
      ✓ check 4: proper update after interrupt (2412ms)
    check with useTransition
      ✓ check 5: updated properly with transition (4560ms)
      ✓ check 6: no tearing with transition (2ms)
      ✕ check 7: proper branching with transition (7425ms)
    check with intensive auto increment
      ✓ check 8: updated properly with auto increment (3006ms)
      ✕ check 9: no tearing with auto increment (3ms)

Unfortunately, check 9 is failing. The failure in check 7 is OK, which is impossible.

[dai-shi]

This is done with this commit with a patch:

diff --git a/packages/react-reconciler/src/ReactFiberHooks.js b/packages/react-reconciler/src/ReactFiberHooks.js
index 375c5e971..5e3f2b587 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.js
@@ -1019,7 +1019,7 @@ function useMutableSourceImpl<Source, Snapshot>(
             return prevState;
           }
 
-          setState({
+          return ({
             ...prevState,
             snapshot: newSnapshot,
           });

[salvoravida]

great work!

have you patched useMutableSource or is the last version?

[dai-shi]

Now, I try the latest one: facebook/react@b028a0b

  redux-use-mutable-source
    check with events from outside
      ✓ check 1: updated properly (8717ms)
      ✓ check 2: no tearing during update (5ms)
      ✓ check 3: ability to interrupt render (1ms)
      ✓ check 4: proper update after interrupt (2399ms)
    check with useTransition
      ✓ check 5: updated properly with transition (3675ms)
      ✓ check 6: no tearing with transition (2ms)
      ✕ check 7: proper branching with transition (7444ms)
    check with intensive auto increment
      ✓ check 8: updated properly with auto increment (3192ms)
      ✕ check 9: no tearing with auto increment (3ms)

No difference in result.

[dai-shi]

Hoping to support state branching.

https://github.com/dai-shi/will-this-react-global-state-work-in-concurrent-mode/blob/53f42617c33e039ee2b32aadf339d0537bc17f18/src/redux-use-mutable-source/index.js#L25-L74

  redux-use-mutable-source
    check with events from outside
      ✓ check 1: updated properly (3602ms)
      ✓ check 2: no tearing during update (10ms)
      ✓ check 3: ability to interrupt render (1ms)
      ✓ check 4: proper update after interrupt (2373ms)
    check with useTransition
      ✓ check 5: updated properly with transition (3600ms)
      ✓ check 6: no tearing with transition (2ms)
      ✕ check 7: proper branching with transition (5415ms)
    check with intensive auto increment
      ✓ check 8: updated properly with auto increment (3163ms)
      ✓ check 9: no tearing with auto increment (1ms)

Hmm, it tears with useTransition. (It's failing with check 7, but it's because check 6 is not enough.)

[dai-shi]

I was probably sleeping. State branching won't work because we don't have update queue.

[dai-shi]

As useMutableSource is now in the experimental channel, let's merge this and continue experiments in master.