How can I use session storage in React with hooks?

How can I use session storage in React with hooks?

You can use the useState and useEffect hooks to manage session storage in React. Would you like a code example?

Yes, please provide a code example.

Here's a simple example:

import React, { useState, useEffect } 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;
        }
    });

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

    return [storedValue, setStoredValue];
};

const MyComponent = () => {
    const [name, setName] = useSessionStorage('name', '');

    return (
        <div>
            <input value={name} onChange={(e) => setName(e.target.value)} />
            <p>Your name is: {name}</p>
        </div>
    );
};

This custom hook allows you to easily manage session storage.

That's really helpful! Can I use this for other types of data?

Absolutely! You can use this approach for any type of data you want to store in session storage, like objects or arrays.