ReactJS useLocalStorage Custom Hook

useLocalStorage hook makes it easy. It creates a stateful value for localStorage and gives us a function to update that value like useState.

In our projects, we frequently use localStorage and state but it’s a bit tricky to work localStorage’s value with the state. 

Syntax:  

const [ count, setCount ] = useLocalStorage(key, defaulValue)

Setting up Application: Follow the below steps to set up the application:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: create a hooks folder in src/hooks.

mkdir src/hooks

Project Structure: The project should look like below:

Project Structure

Example 1: Below example will illustrate the use of useLocalStorage:

useLocalStorage.js:

Create

The useLocalStorage.js in the hooks folder.

Javascript

import { useState } from "react";

const useLocalStorage = (key, defaultValue) => {
    // Create state variable to store
    // localStorage value in state
    const [localStorageValue, setLocalStorageValue] = useState(() => {
        try {
            const value = localStorage.getItem(key)
            // If value is already present in
            // localStorage then return it

            // Else set default value in
            // localStorage and then return it
            if (value) {
                return JSON.parse(value)
            } else {
                localStorage.setItem(key, JSON.stringify(defaultValue));
                return defaultValue
            }
        } catch (error) {
            localStorage.setItem(key, JSON.stringify(defaultValue));
            return defaultValue
        }
    })

    // this method update our localStorage and our state
    const setLocalStorageStateValue = (valueOrFn) => {
        let newValue;
        if (typeof valueOrFn === 'function') {
            const fn = valueOrFn;
            newValue = fn(localStorageValue)
        }
        else {
            newValue = valueOrFn;
        }
        localStorage.setItem(key, JSON.stringify(newValue));
        setLocalStorageValue(newValue)
    }
    return [localStorageValue, setLocalStorageStateValue]
}

export default useLocalStorage;

Now your custom hook is ready to use in your component like below.

App.js:

Write the below code in the app.js file.

Javascript

import useLocalStorage from "./hooks/useLocalStorage";

const App = () => {
    const [count, setCount] = useLocalStorage("count", 0);
    return (
        <div style={{ display: "grid", placeItems: "center" }}>
            <h1 style={{ color: "green" }}>GeekForGeeks</h1>
            <h2>useLocalStorage</h2>
            <h4>Count - {count}</h4>
            <button onClick={() => setCount((prevCount) => prevCount + 1)}>
                Increment
            </button>
        </div>
    );
};

export default App;

Steps to run the application: Write the below code in the terminal to run the application:

npm start

Output:

Example 2: Let’s build another example with useLocalStorage custom hook

App.js:

Write the below code in the app.js file.

Javascript

import useLocalStorage from "./hooks/useLocalStorage";

const App = () => {
    const [show, setShow] = useLocalStorage("show", true);
    return (
        <div style={{ display: "grid", placeItems: "center" }}>
            <h1 style={{ color: "green" }}>GeekForGeeks</h1>
            <h2>useLocalStorage</h2>
            <h4>{show ? "GFG" : null}</h4>
            <button onClick={() => setShow((prev) => !prev)}>
                Toggle</button>
        </div>
    );
};

export default App;

Output: