Most modern web applications use session storage to store data temporarily during a user’s session. Managing session storage can become repetitive and error-prone when you have to handle it in multiple components. To simplify this process, we can create a custom hook called useSessionStorage that provides a convenient way to interact with session storage.

In this blog post, we will walk through the process of creating a custom useSessionStorage hook using React.

Table of Contents

• Introduction to Session Storage
• Creating the useSessionStorage Hook
• Using the useSessionStorage Hook
• Conclusion

Introduction to Session Storage

Session storage is a web storage API that allows you to store key-value pairs in the browser’s session storage area. The data stored using session storage is available to all tabs and windows of the same origin and persists until the user closes the session or the browser.

To interact with session storage, we can use the sessionStorage object provided by the browser’s JavaScript API. It exposes methods like setItem, getItem, removeItem, and clear to manage the stored data.

Creating the useSessionStorage Hook

Let’s start by creating the useSessionStorage hook in a file called useSessionStorage.js.

import { useState, useEffect } from 'react';

const useSessionStorage = (key, initialValue) => {
  const [value, setValue] = useState(() => {
    const storedValue = sessionStorage.getItem(key);
    return storedValue ? JSON.parse(storedValue) : initialValue;
  });

  useEffect(() => {
    sessionStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
};

export default useSessionStorage;

In the code snippet above, we import useState and useEffect from React. The hook takes two parameters: key, which is the key for storing the value in session storage, and initialValue, which is the initial value to set if no value exists for the provided key.

Inside the hook, we use useState to create a state variable value and setValue function to update it. We initialize value with the value retrieved from session storage or the initialValue if no value exists.

We also use useEffect to update session storage whenever the value changes. We listen for changes in both key and value so that multiple components using the same key will stay in sync.

Finally, we return an array with value and setValue so that consumers of the hook can easily access and update the value.

Using the useSessionStorage Hook

Now let’s see how we can use the useSessionStorage hook in a React component.

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

const App = () => {
  const [username, setUsername] = useSessionStorage('username', '');

  const handleUsernameChange = (event) => {
    setUsername(event.target.value);
  };

  return (
    <div>
      <h1>Welcome, {username}!</h1>
      <input type="text" value={username} onChange={handleUsernameChange} />
    </div>
  );
};

export default App;

In the code above, we import the useSessionStorage hook and use it to manage the username value. We can easily set and retrieve the username value from session storage by using the setUsername function returned by the hook.

When the input field changes, we call setUsername to update the value and store it in session storage. The updated value is automatically propagated to other components that use the same useSessionStorage hook with the 'username' key.

Conclusion

Creating a custom useSessionStorage hook allows us to easily manage session storage in our React components. This approach improves code reusability and reduces duplication when dealing with session storage across multiple components.

By providing a clean and reusable API, the useSessionStorage hook simplifies the management of session storage in our applications, leading to more maintainable code.

Give it a try in your next project and see how it simplifies your session storage management!