How do I set up local storage synchronization in React?

How do I set up local storage synchronization in React?

To set up local storage synchronization in React, you can use the useEffect hook to read from and write to local storage whenever your component mounts or updates.

Can you show me a code example?

Sure! Here's a simple example:

import React, { useState, useEffect } from 'react';

const MyComponent = () => {
    const [value, setValue] = useState('');

    useEffect(() => {
        const storedValue = localStorage.getItem('myValue');
        if (storedValue) {
            setValue(storedValue);
        }
    }, []);

    useEffect(() => {
        localStorage.setItem('myValue', value);
    }, [value]);

    return (
        <input 
            type="text" 
            value={value} 
            onChange={(e) => setValue(e.target.value)} 
        />
    );
};

This code syncs the input value with local storage.

What if I want to sync multiple values?

You can create a similar setup for each value you want to sync. Just use separate state variables and useEffect hooks for each one.