Fix initializeWithValue default not respected, fix docs and tests

src/useLocalStorageValue/__docs__/example.stories.tsx

@@ -18,7 +18,6 @@ export const Example: React.FC<ExampleProps> = ({
 }) => {
   const lsVal = useLocalStorageValue(key, {
     defaultValue,
-    initializeWithValue: true,
   });
 
   return (

src/useLocalStorageValue/__docs__/story.mdx

@@ -1,6 +1,6 @@
-import { Example } from './example.stories'
-import { ImportPath } from '../../__docs__/ImportPath'
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'
+import {Example} from './example.stories'
+import {ImportPath} from '../../__docs__/ImportPath'
+import {ArgsTable, Canvas, Meta, Story} from '@storybook/addon-docs'
 
 <Meta title="Side-effect/useLocalStorageValue" component={Example} />
 
@@ -18,8 +18,9 @@ Manages a single LocalStorage key.
 > Does not allow usage of `null` value, since JSON allows serializing `null` values - it would be
 > impossible to separate null value fom 'no such value' API result which is also `null`.
 
-> Due to support of SSR this hook returns undefined on first render even if value is there, to avoid
-> this behavior set the `initializeWithValue` option to true.
+> If you are doing SSR, set `initializeWithValue` to `false` in order for this hook to return
+> `undefined` on first render. The LocalStorage value will be fetched client-side when effects
+> are executed.
 
 #### Example
 

src/useSessionStorageValue/__docs__/example.stories.tsx

@@ -16,7 +16,7 @@ export const Example: React.FC<ExampleProps> = ({
   key = 'react-hookz-ss-test',
   defaultValue = '@react-hookz is awesome',
 }) => {
-  const ssVal = useSessionStorageValue(key, { defaultValue, initializeWithValue: true });
+  const ssVal = useSessionStorageValue(key, { defaultValue });
 
   return (
     <div>

src/useSessionStorageValue/__docs__/story.mdx

@@ -1,6 +1,6 @@
-import { Example } from './example.stories'
-import { ImportPath } from '../../__docs__/ImportPath'
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'
+import {Example} from './example.stories'
+import {ImportPath} from '../../__docs__/ImportPath'
+import {ArgsTable, Canvas, Meta, Story} from '@storybook/addon-docs'
 
 <Meta title="Side-effect/useSessionStorageValue" component={Example} />
 
@@ -18,8 +18,9 @@ Manages a single SessionStorage key.
 > Does not allow usage of `null` value, since JSON allows serializing `null` values - it would be
 > impossible to separate null value fom 'no such value' API result which is also `null`.
 
-> Due to support of SSR this hook returns undefined on first render even if value is there, to avoid
-> this behavior set the `initializeWithValue` option to true.
+> If you are doing SSR, set `initializeWithValue` to `false` in order for this hook to return
+> `undefined` on first render. The SessionStorage value will be fetched client-side when effects
+> are executed.
 
 #### Example
 

src/useStorageValue/__tests__/ssr.ts

@@ -12,58 +12,71 @@ describe('useStorageValue', () => {
     expect(result.error).toBeUndefined();
   });
 
-  it('should not fetch value from storage on init', () => {
-    const storage = newStorage();
-    const { result } = renderHook(() => useStorageValue(storage, 'foo'));
+  describe('if initializeWithValue set to false', () => {
+    it('should not fetch value from storage on init', () => {
+      const storage = newStorage();
+      const { result } = renderHook(() =>
+        useStorageValue(storage, 'foo', { initializeWithValue: false })
+      );
 
-    expect(result.current.value).toBe(undefined);
-    expect(storage.getItem).not.toHaveBeenCalled();
-  });
+      expect(result.current.value).toBe(undefined);
+      expect(storage.getItem).not.toHaveBeenCalled();
+    });
 
-  it('should not fetch value from storage on .fetch() call', () => {
-    const storage = newStorage();
-    const { result } = renderHook(() => useStorageValue(storage, 'foo'));
+    it('should not fetch value from storage on .fetch() call', () => {
+      const storage = newStorage();
+      const { result } = renderHook(() =>
+        useStorageValue(storage, 'foo', { initializeWithValue: false })
+      );
 
-    expect(result.current.value).toBe(undefined);
-    act(() => {
-      result.current.fetch();
+      expect(result.current.value).toBe(undefined);
+      act(() => {
+        result.current.fetch();
+      });
+      expect(result.current.value).toBe(undefined);
+      expect(storage.getItem).not.toHaveBeenCalled();
     });
-    expect(result.current.value).toBe(undefined);
-    expect(storage.getItem).not.toHaveBeenCalled();
-  });
 
-  it('should not set storage value on .set() call', () => {
-    const storage = newStorage();
-    const { result } = renderHook(() => useStorageValue<string>(storage, 'foo'));
+    it('should not set storage value on .set() call', () => {
+      const storage = newStorage();
+      const { result } = renderHook(() =>
+        useStorageValue<string>(storage, 'foo', { initializeWithValue: false })
+      );
 
-    expect(result.current.value).toBe(undefined);
-    act(() => {
-      result.current.set('bar');
+      expect(result.current.value).toBe(undefined);
+      act(() => {
+        result.current.set('bar');
+      });
+      expect(result.current.value).toBe(undefined);
+      expect(storage.setItem).not.toHaveBeenCalled();
     });
-    expect(result.current.value).toBe(undefined);
-    expect(storage.setItem).not.toHaveBeenCalled();
-  });
 
-  it('should not call storage`s removeItem on .remove() call', () => {
-    const storage = newStorage();
-    const { result } = renderHook(() => useStorageValue<string>(storage, 'foo'));
+    it('should not call storage`s removeItem on .remove() call', () => {
+      const storage = newStorage();
+      const { result } = renderHook(() =>
+        useStorageValue<string>(storage, 'foo', { initializeWithValue: false })
+      );
 
-    act(() => {
-      result.current.remove();
+      act(() => {
+        result.current.remove();
+      });
+      expect(storage.removeItem).not.toHaveBeenCalled();
     });
-    expect(storage.removeItem).not.toHaveBeenCalled();
-  });
 
-  it('should not set state to default value on item remove', () => {
-    const storage = newStorage(() => '"bar"');
-    const { result } = renderHook(() =>
-      useStorageValue<string>(storage, 'foo', { defaultValue: 'default value' })
-    );
+    it('should not set state to default value on item remove', () => {
+      const storage = newStorage(() => '"bar"');
+      const { result } = renderHook(() =>
+        useStorageValue<string>(storage, 'foo', {
+          defaultValue: 'default value',
+          initializeWithValue: false,
+        })
+      );
 
-    expect(result.current.value).toBe(undefined);
-    act(() => {
-      result.current.remove();
+      expect(result.current.value).toBe(undefined);
+      act(() => {
+        result.current.remove();
+      });
+      expect(result.current.value).toBe(undefined);
     });
-    expect(result.current.value).toBe(undefined);
   });
 });

src/useStorageValue/useStorageValue.ts

@@ -156,7 +156,9 @@ export function useStorageValue<
 
   const isFirstMount = useFirstMountState();
   const [state, setState] = useState<Type | null | undefined>(
-    options?.initializeWithValue && isFirstMount ? storageActions.current.fetch() : undefined
+    optionsRef.current?.initializeWithValue && isFirstMount
+      ? storageActions.current.fetch()
+      : undefined
   );
   const stateRef = useSyncedRef(state);
 
@@ -172,7 +174,7 @@ export function useStorageValue<
   }, [key]);
 
   useEffect(() => {
-    if (!options?.initializeWithValue) {
+    if (!optionsRef.current.initializeWithValue) {
       stateActions.current.fetch();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps