fix(hooks): add golbal update to effect hook

DevCloudFE · May 8, 2023 · 457dbe4 · 457dbe4
1 parent 4d0422b
commit 457dbe4
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 9 deletions.
diff --git a/packages/hooks/src/createGlobalState.ts b/packages/hooks/src/createGlobalState.ts
@@ -3,6 +3,7 @@ import type { ImmerHook, Updater } from './useImmer';
 import { freeze, produce } from 'immer';
 import { useState } from 'react';
 
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
 import { useUnmount } from './useUnmount';
 
 interface GlobalStateHook<S> {
@@ -34,9 +35,12 @@ export function createGlobalState<S>(initialValue?: S): GlobalStateHook<S | unde
     () => {
       const [state, setState] = useState(store.state);
 
-      if (!store.updates.has(setState)) {
-        store.updates.add(setState);
-      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      useIsomorphicLayoutEffect(() => {
+        if (!store.updates.has(setState)) {
+          store.updates.add(setState);
+        }
+      });
 
       useUnmount(() => {
         store.updates.delete(setState);

diff --git a/packages/hooks/src/storage/useStorage.ts b/packages/hooks/src/storage/useStorage.ts
@@ -4,6 +4,7 @@ import type { AbstractStorage } from './storage';
 import { isNull, isUndefined } from 'lodash';
 import { useEffect, useMemo, useState } from 'react';
 
+import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect';
 import { LocalStorageService } from './localStorage';
 import { STRING_PARSER } from './parser';
 
@@ -64,12 +65,15 @@ export function useStorage<V, K = string>(
   }, [SERVICE, defaultValue, deserializer, key, serializer]);
   const [, setOriginValue] = useState(SERVICE.getItem(key));
 
-  const updatesOfKey = updates.get(key);
-  if (isUndefined(updatesOfKey)) {
-    updates.set(key, new Set([setOriginValue]));
-  } else if (!updatesOfKey.has(setOriginValue)) {
-    updatesOfKey.add(setOriginValue);
-  }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useIsomorphicLayoutEffect(() => {
+    const updatesOfKey = updates.get(key);
+    if (isUndefined(updatesOfKey)) {
+      updates.set(key, new Set([setOriginValue]));
+    } else if (!updatesOfKey.has(setOriginValue)) {
+      updatesOfKey.add(setOriginValue);
+    }
+  });
 
   useEffect(() => {
     updates.get(key)?.delete(setOriginValue);