From 22abfb4e158ddc389c87fc6493395ad6fd679e77 Mon Sep 17 00:00:00 2001 From: DISCONNECTED-png Date: Wed, 6 May 2026 22:36:22 +0530 Subject: [PATCH] fix(useLocalStorage): replace useLayoutEffect with useIsomorphicLayoutEffect MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit useLayoutEffect causes a React warning when rendered server-side because it does not exist in SSR environments. The library already exports useIsomorphicLayoutEffect which automatically falls back to useEffect on the server — the same pattern used in createGlobalState. Relates to: #956 --- src/useLocalStorage.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/useLocalStorage.ts b/src/useLocalStorage.ts index def6ad804a..6f66e4965a 100644 --- a/src/useLocalStorage.ts +++ b/src/useLocalStorage.ts @@ -1,4 +1,5 @@ -import { Dispatch, SetStateAction, useCallback, useState, useRef, useLayoutEffect } from 'react'; +import { Dispatch, SetStateAction, useCallback, useState, useRef } from 'react'; +import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect'; import { isBrowser, noop } from './misc/util'; type parserOptions = @@ -53,7 +54,7 @@ const useLocalStorage = ( const [state, setState] = useState(() => initializer.current(key)); // eslint-disable-next-line react-hooks/rules-of-hooks - useLayoutEffect(() => setState(initializer.current(key)), [key]); + useIsomorphicLayoutEffect(() => setState(initializer.current(key)), [key]); // eslint-disable-next-line react-hooks/rules-of-hooks const set: Dispatch> = useCallback(