use useLayoutEffect instead of useEffect in useReactiveVar (fixes #8012)

Author: brainkim

src/cache/inmemory/reactiveVars.ts

@@ -16,19 +16,6 @@ export type ReactiveListener<T> = (value: T) => any;
 // called in Policies#readField.
 export const cacheSlot = new Slot<ApolloCache<any>>();
 
-// A listener function could in theory cause another listener to be added
-// to the set while we're iterating over it, so it's important to commit
-// to the original elements of the set before we begin iterating. See
-// iterateObserversSafely for another example of this pattern.
-function consumeAndIterate<T>(set: Set<T>, callback: (item: T) => any) {
-  if (set.size) {
-    const items: T[] = [];
-    set.forEach(item => items.push(item));
-    set.clear();
-    items.forEach(callback);
-  }
-}
-
 const cacheInfoMap = new WeakMap<ApolloCache<any>, {
   vars: Set<ReactiveVar<any>>;
   dep: OptimisticDependencyFunction<ReactiveVar<any>>;
@@ -79,7 +66,9 @@ export function makeVar<T>(value: T): ReactiveVar<T> {
           broadcast(cache);
         });
         // Finally, notify any listeners added via rv.onNextChange.
-        consumeAndIterate(listeners, listener => listener(value));
+        const oldListeners = Array.from(listeners);
+        listeners.clear();
+        oldListeners.forEach(listener => listener(value));
       }
     } else {
       // When reading from the variable, obtain the current cache from

src/react/hooks/useReactiveVar.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useLayoutEffect } from 'react';
 import { ReactiveVar } from '../../core';
 
 export function useReactiveVar<T>(rv: ReactiveVar<T>): T {
@@ -9,7 +9,7 @@ export function useReactiveVar<T>(rv: ReactiveVar<T>): T {
   // We subscribe to variable updates on initial mount and when the value has
   // changed. This avoids a subtle bug in React.StrictMode where multiple listeners
   // are added, leading to inconsistent updates.
-  useEffect(() => rv.onNextChange(setValue), [value]);
+  useLayoutEffect(() => rv.onNextChange(setValue), [value]);
   // Once the component is unmounted, ignore future updates. Note that the
   // above useEffect function returns a mute function without calling it,
   // allowing it to be called when the component unmounts. This is
@@ -24,9 +24,7 @@ export function useReactiveVar<T>(rv: ReactiveVar<T>): T {
   // a useEffect higher in the component tree changing a variable's value
   // before the above useEffect can set the onNextChange handler. Note that React
   // will not schedule an update if setState is called with the same value as before.
-  useEffect(() => {
-    setValue(rv())
-  }, []);
+  useEffect(() => setValue(rv()), []);
 
   return value;
 }