'Watch()' permanently stops reacting after changes during an intial async action.

[RichardsA25]

I'm not an expert, but...

Bug

watch() permanently stops reacting after changes during an intial async action (e.g. AsyncStorage).
Especially prominent with nested arrays.

Root cause

watch() uses a global mutable currentCleanups variable.

subscribe() (called inside the callback) queues its first notification via Promise.resolve().then().

Doing an async modification to the main proxy somehow causes parallel revalidate commands for watch(), causing the external currentCleanups to equal something not right, and watch ends up deleting it's own subscription.

Raw subscribe() works fine (no global state).

Could be a similar race condition problem in derive-valtio that other's have posted about.

Fix

Remove the global and make nesting local to each watch instance:

-let currentCleanups;

 function watch(callback, options) {
   let alive = true;
   const cleanups = new Set();
   const subscriptions = new Map();
+  let nestedCleanups = null;

   const cleanup = () => { /* ... */ };

   const revalidate = async () => {
     /* ... */
-    const parent = currentCleanups;
-    currentCleanups = cleanups;
+    const parent = nestedCleanups;
+    nestedCleanups = cleanups;
     try {
       /* ... */
     } finally {
-      currentCleanups = parent;
+      nestedCleanups = parent;
     }
     /* ... */
   };

-  if (currentCleanups) currentCleanups.add(cleanup);
+  if (nestedCleanups) nestedCleanups.add(cleanup);

   revalidate();
   return cleanup;
 }

[dai-shi]

Hi, thanks for opening a discussion.
Sorry for taking time, but actually, I'd like to deprecate watch in valtio/utils and valtio-derive, in favor of valtio-reactive.

Could you try https://github.com/valtiojs/valtio-reactive ?

[dai-shi]

#924 is a related discussion.
If your fix doesn't break existing tests, it's probably worth even if it's going to be deprecated (we could make it a separate package.)