Fix use local storage

package.json

@@ -85,6 +85,7 @@
     "gh-pages": "2.1.1",
     "husky": "3.1.0",
     "jest": "24.9.0",
+    "jest-localstorage-mock": "^2.4.0",
     "keyboardjs": "2.5.1",
     "lint-staged": "9.4.3",
     "markdown-loader": "5.1.0",

src/useLocalStorage.ts

@@ -1,40 +1,54 @@
-import { useEffect, useState } from 'react';
 import { isClient } from './util';
-
-type Dispatch<A> = (value: A) => void;
-type SetStateAction<S> = S | ((prevState: S) => S);
+import { useMemo, useCallback, Dispatch, SetStateAction } from 'react';
+import useEffectOnce from './useEffectOnce';
 
 const useLocalStorage = <T>(key: string, initialValue?: T, raw?: boolean): [T, Dispatch<SetStateAction<T>>] => {
-  if (!isClient) {
+  if (!isClient || !localStorage) {
     return [initialValue as T, () => {}];
   }
+  if (!key && (key as any) !== 0) {
+    throw new Error('useLocalStorage key may not be nullish or undefined');
+  }
 
-  const [state, setState] = useState<T>(() => {
-    try {
-      const localStorageValue = localStorage.getItem(key);
-      if (typeof localStorageValue !== 'string') {
-        localStorage.setItem(key, raw ? String(initialValue) : JSON.stringify(initialValue));
-        return initialValue;
-      } else {
-        return raw ? localStorageValue : JSON.parse(localStorageValue || 'null');
-      }
-    } catch {
-      // If user is in private mode or has storage restriction
-      // localStorage can throw. JSON.parse and JSON.stringify
-      // can throw, too.
-      return initialValue;
-    }
-  });
+  let localStorageValue: string | null = null;
+  try {
+    localStorageValue = localStorage.getItem(key);
+  } catch {
+    // If user is in private mode or has storage restriction
+    // localStorage can throw.
+  }
 
-  useEffect(() => {
+  const state: T = useMemo(() => {
     try {
-      const serializedState = raw ? String(state) : JSON.stringify(state);
-      localStorage.setItem(key, serializedState);
+      /* If key hasn't been set yet */
+      if (localStorageValue === null) return initialValue as T;
+      return raw ? localStorageValue : JSON.parse(localStorageValue);
     } catch {
-      // If user is in private mode or has storage restriction
-      // localStorage can throw. Also JSON.stringify can throw.
+      /* JSON.parse and JSON.stringify can throw. */
+      return localStorageValue === null ? initialValue : localStorageValue;
     }
-  }, [state]);
+  }, [key, localStorageValue]);
+
+  const setState: Dispatch<SetStateAction<T>> = useCallback(
+    (valOrFunc: SetStateAction<T>): void => {
+      try {
+        let newState = typeof valOrFunc === 'function' ? (valOrFunc as Function)(state) : valOrFunc;
+        newState = typeof newState === 'string' ? newState : JSON.stringify(newState);
+        localStorage.setItem(key, newState);
+      } catch {
+        /**
+         * If user is in private mode or has storage restriction
+         * localStorage can throw. Also JSON.stringify can throw.
+         */
+      }
+    },
+    [state, raw]
+  );
+
+  /* If value hasn't been set yet (null not 'null') then initialize it. */
+  useEffectOnce((): void => {
+    if (localStorageValue === null && initialValue) setState(initialValue);
+  });
 
   return [state, setState];
 };

tests/useLocalStorage.test.ts

@@ -0,0 +1,211 @@
+import useLocalStorage from '../src/useLocalStorage';
+import 'jest-localstorage-mock';
+import { renderHook, act } from '@testing-library/react-hooks';
+
+describe(useLocalStorage, () => {
+  afterEach(() => localStorage.clear());
+  it('retrieves an existing value from localStorage', () => {
+    localStorage.setItem('foo', 'bar');
+    const { result } = renderHook(() => useLocalStorage('foo'));
+    const [state] = result.current;
+    expect(state).toEqual('bar');
+  });
+  it('sets initial state', () => {
+    const { result } = renderHook(() => useLocalStorage('foo', 'bar'));
+    const [state] = result.current;
+    expect(state).toEqual('bar');
+    expect(localStorage.__STORE__.foo).toEqual('bar');
+  });
+  it('prefers existing value over initial state', () => {
+    localStorage.setItem('foo', 'bar');
+    const { result } = renderHook(() => useLocalStorage('foo', 'baz'));
+    const [state] = result.current;
+    expect(state).toEqual('bar');
+  });
+  it('does not clobber existing localStorage with initialState', () => {
+    localStorage.setItem('foo', 'bar');
+    const { result } = renderHook(() => useLocalStorage('foo', 'buzz'));
+    result.current; // invoke current to make sure things are set
+    expect(localStorage.__STORE__.foo).toEqual('bar');
+  });
+  it('correctly updates localStorage', () => {
+    const { result, rerender } = renderHook(() => useLocalStorage('foo', 'bar'));
+
+    const [, setFoo] = result.current;
+    act(() => setFoo('baz'));
+    rerender();
+
+    expect(localStorage.__STORE__.foo).toEqual('baz');
+  });
+  it('returns and allow setting null', () => {
+    localStorage.setItem('foo', 'null');
+    const { result, rerender } = renderHook(() => useLocalStorage('foo'));
+
+    const [foo1, setFoo] = result.current;
+    act(() => setFoo(null));
+    rerender();
+
+    const [foo2] = result.current;
+    expect(foo1).toEqual(null);
+    expect(foo2).toEqual(null);
+  });
+  it('correctly and promptly returns a new value', () => {
+    const { result, rerender } = renderHook(() => useLocalStorage('foo', 'bar'));
+
+    const [, setFoo] = result.current;
+    act(() => setFoo('baz'));
+    rerender();
+
+    const [foo] = result.current;
+    expect(foo).toEqual('baz');
+  });
+  it('should not double-JSON-stringify stringy values', () => {
+    const { result, rerender } = renderHook(() => useLocalStorage('foo', 'bar'));
+
+    const [, setFoo] = result.current;
+    act(() => setFoo(JSON.stringify('baz')));
+    rerender();
+
+    const [foo] = result.current;
+    expect(foo).not.toMatch(/\\/i); // should not contain extra escapes
+    expect(foo).toBe('baz');
+  });
+  it('keeps multiple hooks accessing the same key in sync', () => {
+    localStorage.setItem('foo', 'bar');
+    const { result: r1, rerender: rerender1 } = renderHook(() => useLocalStorage('foo'));
+    const { result: r2, rerender: rerender2 } = renderHook(() => useLocalStorage('foo'));
+
+    const [, setFoo] = r1.current;
+    act(() => setFoo('potato'));
+    rerender1();
+    rerender2();
+
+    const [val1] = r1.current;
+    const [val2] = r2.current;
+
+    expect(val1).toEqual(val2);
+    expect(val1).toEqual('potato');
+    expect(val2).toEqual('potato');
+  });
+  it('parses out objects from localStorage', () => {
+    localStorage.setItem('foo', JSON.stringify({ ok: true }));
+    const { result } = renderHook(() => useLocalStorage<{ ok: boolean }>('foo'));
+    const [foo] = result.current;
+    expect(foo.ok).toEqual(true);
+  });
+  it('safely initializes objects to localStorage', () => {
+    const { result } = renderHook(() => useLocalStorage<{ ok: boolean }>('foo', { ok: true }));
+    const [foo] = result.current;
+    expect(foo.ok).toEqual(true);
+  });
+  it('safely sets objects to localStorage', () => {
+    const { result, rerender } = renderHook(() => useLocalStorage<{ ok: any }>('foo', { ok: true }));
+
+    const [, setFoo] = result.current;
+    act(() => setFoo({ ok: 'bar' }));
+    rerender();
+
+    const [foo] = result.current;
+    expect(foo.ok).toEqual('bar');
+  });
+  it('safely returns objects from updates', () => {
+    const { result, rerender } = renderHook(() => useLocalStorage<{ ok: any }>('foo', { ok: true }));
+
+    const [, setFoo] = result.current;
+    act(() => setFoo({ ok: 'bar' }));
+    rerender();
+
+    const [foo] = result.current;
+    expect(foo).toBeInstanceOf(Object);
+    expect(foo.ok).toEqual('bar');
+  });
+  it('sets localStorage from the function updater', () => {
+    const { result, rerender } = renderHook(() =>
+      useLocalStorage<{ foo: string; fizz?: string }>('foo', { foo: 'bar' })
+    );
+
+    const [, setFoo] = result.current;
+    act(() => setFoo(state => ({ ...state, fizz: 'buzz' })));
+    rerender();
+
+    const [value] = result.current;
+    expect(value.foo).toEqual('bar');
+    expect(value.fizz).toEqual('buzz');
+  });
+  it('rejects nullish or undefined keys', () => {
+    const { result } = renderHook(() => useLocalStorage(null as any));
+    try {
+      result.current;
+      fail('hook should have thrown');
+    } catch (e) {
+      expect(String(e)).toMatch(/key may not be/i);
+    }
+  });
+  describe('raw setting', () => {
+    it('returns a string when localStorage is a stringified object', () => {
+      localStorage.setItem('foo', JSON.stringify({ fizz: 'buzz' }));
+      const { result } = renderHook(() => useLocalStorage('foo', null, true));
+      const [foo] = result.current;
+      expect(typeof foo).toBe('string');
+    });
+    it('returns a string after an update', () => {
+      localStorage.setItem('foo', JSON.stringify({ fizz: 'buzz' }));
+      const { result, rerender } = renderHook(() => useLocalStorage('foo', null, true));
+
+      const [, setFoo] = result.current;
+      // @ts-ignore
+      act(() => setFoo({ fizz: 'bang' }));
+      rerender();
+
+      const [foo] = result.current;
+      expect(typeof foo).toBe('string');
+      // @ts-ignore
+      expect(JSON.parse(foo)).toBeInstanceOf(Object);
+      // @ts-ignore
+      expect(JSON.parse(foo).fizz).toEqual('bang');
+    });
+    it('still forces setState to a string', () => {
+      localStorage.setItem('foo', JSON.stringify({ fizz: 'buzz' }));
+      const { result, rerender } = renderHook(() => useLocalStorage('foo', null, true));
+
+      const [, setFoo] = result.current;
+      // @ts-ignore
+      act(() => setFoo({ fizz: 'bang' }));
+      rerender();
+
+      const [value] = result.current;
+      // @ts-ignore
+      expect(JSON.parse(value).fizz).toEqual('bang');
+    });
+  });
+  /* Enforces proper eslint react-hooks/rules-of-hooks usage */
+  describe('eslint react-hooks/rules-of-hooks', () => {
+    it('memoizes an object between rerenders', () => {
+      const { result, rerender } = renderHook(() => useLocalStorage('foo', { ok: true }));
+
+      result.current; // if localStorage isn't set then r1 and r2 will be different
+      rerender();
+      const [r2] = result.current;
+      rerender();
+      const [r3] = result.current;
+      expect(r2).toBe(r3);
+    });
+    it('memoizes an object immediately if localStorage is already set', () => {
+      localStorage.setItem('foo', JSON.stringify({ ok: true }));
+      const { result, rerender } = renderHook(() => useLocalStorage('foo', { ok: true }));
+
+      const [r1] = result.current; // if localStorage isn't set then r1 and r2 will be different
+      rerender();
+      const [r2] = result.current;
+      expect(r1).toBe(r2);
+    });
+    it('memoizes the setState function', () => {
+      localStorage.setItem('foo', JSON.stringify({ ok: true }));
+      const { result, rerender } = renderHook(() => useLocalStorage('foo', { ok: true }));
+      const [, s1] = result.current;
+      rerender();
+      const [, s2] = result.current;
+      expect(s1).toBe(s2);
+    });
+  });
+});

yarn.lock

@@ -8062,6 +8062,11 @@ jest-leak-detector@^24.9.0:
     jest-get-type "^24.9.0"
     pretty-format "^24.9.0"
 
+jest-localstorage-mock@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/jest-localstorage-mock/-/jest-localstorage-mock-2.4.0.tgz#c6073810735dd3af74020ea6c3885ec1cc6d0d13"
+  integrity sha512-/mC1JxnMeuIlAaQBsDMilskC/x/BicsQ/BXQxEOw+5b1aGZkkOAqAF3nu8yq449CpzGtp5jJ5wCmDNxLgA2m6A==
+
 jest-matcher-utils@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-24.9.0.tgz#f5b3661d5e628dffe6dd65251dfdae0e87c3a073"