Skip to content

Instantly share code, notes, and snippets.

@gragland
Last active December 9, 2022 21:57
Show Gist options
  • Save gragland/2970ae543df237a07be1dbbf810f23fe to your computer and use it in GitHub Desktop.
Save gragland/2970ae543df237a07be1dbbf810f23fe to your computer and use it in GitHub Desktop.
import { useState } from 'react';
// Usage
function App() {
// Similar to useState but first arg is key to the value in local storage.
const [name, setName] = useLocalStorage('name', 'Bob');
return (
<div>
<input
type="text"
placeholder="Enter your name"
value={name}
onChange={e => setName(e.target.value)}
/>
</div>
);
}
// Hook
function useLocalStorage(key, initialValue) {
// State to store our value
// Pass initial state function to useState so logic is only executed once
const [storedValue, setStoredValue] = useState(() => {
try {
// Get from local storage by key
const item = window.localStorage.getItem(key);
// Parse stored json or if none return initialValue
return item ? JSON.parse(item) : initialValue;
} catch (error) {
// If error also return initialValue
console.log(error);
return initialValue;
}
});
// Return a wrapped version of useState's setter function that ...
// ... persists the new value to localStorage.
const setValue = value => {
try {
// Allow value to be a function so we have same API as useState
const valueToStore =
value instanceof Function ? value(storedValue) : value;
// Save state
setStoredValue(valueToStore);
// Save to local storage
window.localStorage.setItem(key, JSON.stringify(valueToStore));
} catch (error) {
// A more advanced implementation would handle the error case
console.log(error);
}
};
return [storedValue, setValue];
}
@disappearer
Copy link

disappearer commented Nov 25, 2021

Getting this error on Next.js for the first time

ReferenceError: window is not defined

Because your page is initially rendered on the server and not the browser, the window object is not available yet. In that case you need to use the useEffect when interacting with the window object, since useEffect gets called only on the client side. I don't know why this is not happening to me, but I have a different problem, but with the same cause. I get the warning:
Warning: Did not expect server HTML to contain a <div> in <div>

It happens because the initial client state is different the initial server state. As someone already pointed out interacting with localStorage is a side effect, therefore it should be in useEffect. My solution was to set the passed initial state and use useEffect to update it with the state from local storage. If I was the author of this hook, I would correct that.

With that said, I'm very grateful for this hook and it's still an awesome thing!

@Aravin
Copy link

Aravin commented Nov 25, 2021

Getting this error on Next.js for the first time
ReferenceError: window is not defined

Because your page is initially rendered on the server and not the browser, the window object is not available yet. In that case you need to use the useEffect when interacting with the window object, since useEffect gets called only on the client side. I don't know why this is not happening to me, but I have a different problem, but with the same cause. I get the warning: Warning: Did not expect server HTML to contain a <div> in <div>

It happens because the initial client state is different the initial server state. As someone already pointed out interacting with localStorage is a side effect, therefore it should be in useEffect. My solution was to set the passed initial state and use useEffect to update it with the state from local storage. If I was the author of this hook, I would correct that.

With that said, I'm very grateful for this hook and it's still an awesome thing!

Thanks man, I got the solution long back.

@c-c-6ypo8
Copy link

Add initial value saving to LS in the first try/catch block, because otherwise no LS record is created before setValue call. Also make setValue a callback for optimization.

import { useState, useCallback } from 'react'

export const useLocalStorage = (key, initialValue) => {
  // State to store our value
  // Pass initial state function to useState so logic is only executed once
  const [storedValue, setStoredValue] = useState(() => {
    if (typeof window === 'undefined') {
      return initialValue
    }
    try {
      // Get from local storage by key
      const item = window.localStorage.getItem(key)
      // Parse stored json or if none return initialValue
      if (item !== null) {
        return JSON.parse(item)
      } else {
        window.localStorage.setItem(key, JSON.stringify(initialValue))
        return initialValue
      }
    } catch (error) {
      // If error also return initialValue
      console.log(error)
      return initialValue
    }
  })
  // Return a wrapped version of useState's setter function that ...
  // ... persists the new value to localStorage.
  const setValue = useCallback(
    (value) => {
      try {
        // Allow value to be a function so we have same API as useState
        const valueToStore =
          value instanceof Function ? value(storedValue) : value
        // Save state
        setStoredValue(valueToStore)
        // Save to local storage
        if (typeof window !== 'undefined') {
          window.localStorage.setItem(key, JSON.stringify(valueToStore))
        }
      } catch (error) {
        // A more advanced implementation would handle the error case
        console.log(error)
      }
    },
    [key, storedValue],
  )

  return [storedValue, setValue]
}

@Richard87
Copy link

Hi all!

I would like to sugest a minor improvement to the setValuemethod:
instead of this:

    const setValue = (value: any) => {
        try {
        // Allow value to be a function so we have same API as useState
        const valueToStore =
          value instanceof Function ? value(storedValue) : value
        // Save state
        setStoredValue(valueToStore)
        // Save to local storage
        if (typeof window !== 'undefined') {
          window.localStorage.setItem(key, JSON.stringify(valueToStore))
        }
        } catch (error) {
            // A more advanced implementation would handle the error case
            console.log(error)
        }
    }

I suggest this:

    const setValue = (value: any) => {
        try {
            setStoredValue(latestValue => {
                const valueToStore = value instanceof Function ? value(latestValue) : value

                // Save to local storage
                if (typeof window !== 'undefined') {
                    window.localStorage.setItem(key, JSON.stringify(valueToStore))
                }

                return valueToStore
            })
        } catch (error) {
            // A more advanced implementation would handle the error case
            console.log(error)
        }
    }

The purpose is to have access to the real previous value in the callback method :)

Copy link

ghost commented Jun 17, 2022

I think this implementation has a small flaw in that you are assuming storedValue is up to date when you call

const valueToStore = value instanceof Function ? value(storedValue) : value

Probably better to use useEffect with a dependency on the value of useState and write the value there to localstorage instead.

@Klaasvaak
Copy link

When using this hook in an application and over time changing the object that is managed it will still return the object from localstorage which will miss the newly added property.
For example on my first day I commit using this hook:

useLocalStorage("example", { test: "hello" })

I deploy this code.
The next day I change the usage of this hook:

useLocalStorage("example", { test: "hello", somethingNew: "this was just added" })

Because I have test: "hello" in my storage, this won't return the initial value for somethingNew.

2 possible solutions:

  1. the consumer of this hook should change the storage key every time this is done
  2. change return item ? JSON.parse(item) : initialValue; to return item ? { ...initialValue, ...JSON.parse(item)} : initialValue;

There is also the problem when removing an attribute it will still return it, but this might be less problematic.

@AngelAlexQC
Copy link

You can sync the state of localStorage between all tabs that application is opened.
My solution was:

import { useEffect, useState } from "react";

const useLocalStorage = (key, initialValue) => {
    // State to store our value
    // Pass initial state function to useState so logic is only executed once
    const [storedValue, setStoredValue] = useState(() => {
        if (typeof window === "undefined") {
            return initialValue;
        }
        try {
            // Get from local storage by key
            const item = window.localStorage.getItem(key);
            // Parse stored json or if none return initialValue
            return item ? JSON.parse(item) : initialValue;
        } catch (error) {
            // If error also return initialValue
            console.log(error);
            return initialValue;
        }
    });
    // Return a wrapped version of useState's setter function that ...
    // ... persists the new value to localStorage.
    const setValue = (value) => {
        try {
            // Allow value to be a function so we have same API as useState
            const valueToStore =
                value instanceof Function ? value(storedValue) : value;
            // Save state
            setStoredValue(valueToStore);
            // Save to local storage
            if (typeof window !== "undefined") {
                window.localStorage.setItem(key, JSON.stringify(valueToStore));
            }
        } catch (error) {
            // A more advanced implementation would handle the error case
            console.log(error);
        }
    };

    // Sync localStorage between tabs
    useEffect(() => {
        const listener = (e) => {
            if (e.key === key) {
                setStoredValue(JSON.parse(e.newValue));
            }
        };
        window.addEventListener("storage", listener);
        return () => {
            window.removeEventListener("storage", listener);
        };
    }
        , [
            key,
            initialValue,
        ]);

    return [storedValue, setValue];
};

export default useLocalStorage;

@ris58h
Copy link

ris58h commented Sep 13, 2022

Could we add a custom serialization/deserialization logic?
function useLocalStorage(key, initialValue, serialize = JSON.stringify, deserialize = JSON.parse) {
And use those functions instead of calling JSON.stringify/JSON.parse.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment