Implement useSessionStorage Custom Hook in React [Interview]

useLocalStorage and useSessionStorage is most widely used custom hooks to simplify the interaction with localStorage and sessionStorage at the application level and provide a clean way for interaction.

In this blog, Let's understand the implementation code of useSessionStorage custom hook in react.

How to Approach

While exploring the approach, its important to know that useSessionStorage custom hook in react will internally going to use the window.sessionStorage object only, and convert the object into string using JSON.stringify() function.

As part of the custom hook, we need to handle the set and get the session storage values, and introduce error handing at the common place under useSessionStorage custom hook, to handle any runtime errors.

Implementation of useSessionStorage Custom Hook

Let's checkout the code implementation and explanation of the useSessionStorage hook.

Custom Hook Code

import { useState } from 'react';

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

    const setValue = (value) => {
        try {
            setStoredValue(value);
            window.sessionStorage.setItem(key, JSON.stringify(value));
        } catch (error) {
            console.error(error);
        }
    };

    return [storedValue, setValue];
};

export default useSessionStorage;

Step by Step Code Explanation

1. useSessionStorage Function: Define the custom hook function that takes two parameters, key (for sessionStorage key) and initialValue.
2. storedValue: Initialize state using useState and try to retrieve the value from sessionStorage based on the provided key. If no value is found, the initialValue is used.
3. setValue Function: Define a function to update the storedValue in state and synchronize the sessionStorage with the new value.
4. Return: Return an array containing storedValue and setValue to be used in components.

Understand useSessionStorage Hook Usage

Let's understand the useSessionStorage usage with a simple example of setting the useName key in the session storage.

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

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

    const handleNameChange = (e) => {
        setName(e.target.value);
    };

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

export default App; 

In this example, we import the useSessionStorage custom hook and use it to manage the 'userName' key in sessionStorage with a default value of 'Guest'. We then update the name value based on user input in an input field.

Further Reading

1. Top 20 Most Asked Custom Hooks in React
2. Understand JavaScript localStorage & sessionStorage