From 457dbe4abfd01a3be03095da57604e055bd76428 Mon Sep 17 00:00:00 2001
From: xiejay97 <xiejay97@gmail.com>
Date: Mon, 8 May 2023 09:36:15 +0800
Subject: [PATCH] fix(hooks): add golbal update to effect hook

---
 packages/hooks/src/createGlobalState.ts  | 10 +++++++---
 packages/hooks/src/storage/useStorage.ts | 16 ++++++++++------
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/packages/hooks/src/createGlobalState.ts b/packages/hooks/src/createGlobalState.ts
index 853bbd2a..dbb9ecae 100644
--- 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
index 7c145d68..a9519828 100644
--- 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);