React - custom useLocalStorage hook

In this article, we would like to show you how to create a custom hook to save data in local storage under React application.

Quick solution:

import { useState, useEffect } from 'react';

const getSavedValue = (key, initialValue) => {
    const savedValue = JSON.parse(localStorage.getItem(key));
    if (savedValue) return savedValue;
    return initialValue;
};

const useLocalStorage = (key, initialValue) => {
    const [value, setValue] = useState(() => {
        return getSavedValue(key, initialValue);
    });
    useEffect(() => {
        localStorage.setItem(key, JSON.stringify(value));
    }, [value]);
    return [value, setValue];
};

export default useLocalStorage;

Practical example

In this example, we present a practical example of how to use useLocalStorage() custom hook to store data in local storage.

There are two basic concepts in this solution:

1. useEffect inside the useLocalStorage hook is responsible for setting the key/value pair inside the local storage,
2. getSavedValue method is a getter for data saved in the local storage by key.

import React, { useState, useEffect } from 'react';

const getSavedValue = (key, initialValue) => {
    const savedValue = JSON.parse(localStorage.getItem(key));
    if (savedValue) return savedValue;
    return initialValue;
};

const useLocalStorage = (key, initialValue) => {
    const [value, setValue] = useState(() => {
        return getSavedValue(key, initialValue);
    });
    useEffect(() => {
        localStorage.setItem(key, JSON.stringify(value));
    }, [value]);
    return [value, setValue];
};

// --------------------------------------

// Usage example:

const App = () => {
    const [text, setText] = useLocalStorage('initialKey', 'initialValue');
    return (
      <div>
        <input type="text" value={text} onChange={(e) => setText(e.target.value)} />
      </div>
    );
};

export default App;

Note: local storage stores values as trings. This is the reason why JSON.parse() to get the value and JSON.stringify() to set value are used.

Result:

References

1. Window.localStorage - Web APIs | MDN
2. Storage.getItem() - Web APIs | MDN
3. Storage.setItem() - Web APIs | MDN