diff --git a/packages/hooks/src/createUseStorageState/index.ts b/packages/hooks/src/createUseStorageState/index.ts
index c4f8e90df3..70a3e2cd9e 100644
--- a/packages/hooks/src/createUseStorageState/index.ts
+++ b/packages/hooks/src/createUseStorageState/index.ts
@@ -70,7 +70,10 @@ export function createUseStorageState(getStorage: () => Storage | undefined) {
 
     const updateState = (value?: SetState<T>) => {
       const currentState = isFunction(value) ? value(state) : value;
-      setState(currentState);
+
+      if (!listenStorageChange) {
+        setState(currentState);
+      }
 
       try {
         let newValue: string | null;
@@ -126,5 +129,6 @@ export function createUseStorageState(getStorage: () => Storage | undefined) {
 
     return [state, useMemoizedFn(updateState)] as const;
   }
+
   return useStorageState;
 }
diff --git a/packages/hooks/src/useLocalStorageState/demo/demo4.tsx b/packages/hooks/src/useLocalStorageState/demo/demo4.tsx
index ca1c914229..8acae72d72 100644
--- a/packages/hooks/src/useLocalStorageState/demo/demo4.tsx
+++ b/packages/hooks/src/useLocalStorageState/demo/demo4.tsx
@@ -24,15 +24,12 @@ function Counter() {
     listenStorageChange: true,
   });
 
-  const add = () => setCount(count! + 1);
-  const clear = () => setCount();
-
   return (
     <div style={{ marginBottom: '8px' }}>
-      <button style={{ marginRight: '8px' }} onClick={add}>
+      <button style={{ marginRight: '8px' }} onClick={() => setCount(count! + 1)}>
         count: {count}
       </button>
-      <button onClick={clear}>Clear</button>
+      <button onClick={() => setCount()}>Clear</button>
     </div>
   );
 }