Implement useLocalStorage Custom Hook in React [Interview]

In this blog post, we will go through the implementation and usage of useLocalStorage custom hook in React, specifically focusing on managing local storage.

The useLocalStorage custom hook will allow us to easily store and retrieve data from the browser's local storage, providing a convenient way to persist data across sessions in a React application.

Implementation of useLocalStorage Custom Hook

Let's start creating useLocalStorage custom hook, which will abstract the logic for interacting with local storage.

const useLocalStorage = (key, initialValue) => {
    const [storedValue, setStoredValue] = React.useState(() => {
        try {
            const item = window.localStorage.getItem(key);
            return item ? JSON.parse(item) : initialValue;
        } catch (error) {
            console.error(error);
            return initialValue;
        }
   });

   const setValue = (value) => {
        try {
            const valueToStore = value instanceof Function ? value(storedValue) : value;
            setStoredValue(valueToStore);
            window.localStorage.setItem(key, JSON.stringify(valueToStore));
        } catch (error) {
            console.error(error);
        }
    };

    return [storedValue, setValue];
};

Using the useLocalStorage Hook in a Component

Now, let's see how we can utilize our custom hook in a React component to store and retrieve data from local storage.

import React from 'react';
import useLocalStorage from './useLocalStorage';

const App = () => {
    const [name, setName] = useLocalStorage('name', 'Guest');

    return (
        <div>
            <p>Hello, {name}!</p>
            <input
                type="text"
                value={name}
                onChange={(e) => setName(e.target.value)}
            />
        </div>
    );
};

export default App; 

Final Thoughts

In this blog post, we have explored the implementation of a custom hook, useLocalStorage, in React to manage local storage efficiently. By encapsulating the logic for interacting with local storage in a reusable hook, we can easily persist and retrieve data across sessions in our React applications.

Further Learning

1. Top 20 Most Asked Custom Hooks in React
2. localStorage and sessionStorage Objects