🐎 don't re-render when localStorage contains the defaultValue

src/useLocalStorageState.ts

@@ -77,6 +77,12 @@ function useBrowserLocalStorageState<T>(
     parse: (value: string) => unknown = parseJSON,
     stringify: (value: unknown) => string = JSON.stringify,
 ): LocalStorageState<T | undefined> {
+    // we keep the `parsed` value in a ref because `useSyncExternalStore` requires a cached version
+    const storageItem = useRef<{ string: string | null; parsed: T | undefined }>({
+        string: null,
+        parsed: undefined,
+    })
+
     // store default value in localStorage:
     // - initial issue: https://github.com/astoilkov/use-local-storage-state/issues/26
     //   issues that were caused by incorrect initial and secondary implementations:
@@ -94,14 +100,13 @@ function useBrowserLocalStorageState<T>(
         // - trying to access localStorage object when cookies are disabled in Safari throws
         //   "SecurityError: The operation is insecure."
         // eslint-disable-next-line no-console
-        goodTry(() => localStorage.setItem(key, stringify(defaultValue)))
+        goodTry(() => {
+            const string = stringify(defaultValue)
+            localStorage.setItem(key, string)
+            storageItem.current = { string, parsed: defaultValue }
+        })
     }
 
-    // we keep the `parsed` value in a ref because `useSyncExternalStore` requires a cached version
-    const storageItem = useRef<{ string: string | null; parsed: T | undefined }>({
-        string: null,
-        parsed: defaultValue,
-    })
     const value = useSyncExternalStore(
         useCallback(
             (onStoreChange) => {

test/browser.test.tsx

@@ -474,6 +474,21 @@ describe('useLocalStorageState()', () => {
         expect(queryAllByText(/^1$/u)).toHaveLength(2)
     })
 
+    describe('hydration', () => {
+        test(`non-primitive defaultValue to return the same value by reference`, () => {
+            const defaultValue = ['first', 'second']
+            const hook = renderHook(
+                () =>
+                    useLocalStorageState('todos', {
+                        defaultValue,
+                    }),
+                { hydrate: true },
+            )
+            const [todos] = hook.result.current
+            expect(todos).toBe(defaultValue)
+        })
+    })
+
     describe('"storage" event', () => {
         const fireStorageEvent = (storageArea: Storage, key: string, newValue: unknown): void => {
             const oldValue = localStorage.getItem(key)