How can I use React hooks to manage session storage?

How can I use React hooks to manage session storage?

You can create a custom hook that uses the useEffect and useState hooks to manage session storage.

Can you show me an example of such a custom hook?

Sure! Here's a simple example:

import { useState, useEffect } from 'react';

function 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;
        }
    });

    useEffect(() => {
        try {
            window.sessionStorage.setItem(key, JSON.stringify(storedValue));
        } catch (error) {
            console.error(error);
        }
    }, [key, storedValue]);

    return [storedValue, setStoredValue];
}

This hook allows you to get and set values in session storage.

What are the benefits of using session storage over local storage?

Session storage is cleared when the page session ends, making it ideal for temporary data that doesn't need to persist across sessions.