Function useLocalStorage

packages/react-devtools-shared/src/devtools/views/hooks.js:145–217

(
  key: string,
  initialValue: T | (() => T),
  onValueSet?: (any, string) => void,
)

// Forked from https://usehooks.com/useLocalStorage/
export function useLocalStorage<T>(
  key: string,
  initialValue: T | (() => T),
  onValueSet?: (any, string) => void,
): [T, (value: T | (() => T)) => void] {
  const getValueFromLocalStorage = useCallback(() => {
    try {
      const item = localStorageGetItem(key);
      if (item != null) {
        return JSON.parse(item);
      }
    } catch (error) {
      console.log(error);
    }
    if (typeof initialValue === 'function') {
      return ((initialValue: any): () => T)();
    } else {
      return initialValue;
    }
  }, [initialValue, key]);

  const storedValue = useSyncExternalStore(
    useCallback(
      function subscribe(callback) {
        window.addEventListener(key, callback);
        return function unsubscribe() {
          window.removeEventListener(key, callback);
        };
      },
      [key],
    ),
    getValueFromLocalStorage,
  );

  const setValue = useCallback(
    (value: $FlowFixMe) => {
      try {
        const valueToStore =
          value instanceof Function ? (value: any)(storedValue) : value;
        localStorageSetItem(key, JSON.stringify(valueToStore));

        // Notify listeners that this setting has changed.
        window.dispatchEvent(new Event(key));

        if (onValueSet != null) {
          onValueSet(valueToStore, key);
        }
      } catch (error) {
        console.log(error);
      }
    },
    [key, storedValue],
  );

  // Listen for changes to this local storage value made from other windows.
  // This enables the e.g. "⚛ Elements" tab to update in response to changes from "⚛ Settings".
  useLayoutEffect(() => {
    // $FlowFixMe[missing-local-annot]