Чтение local.storage изменяемого в другом компоненте React.js

Пишу приложение на функциональных компонентах в React.js

Есть 2 компонента, назовём их Хедер и Форма.

В обоих компонентах Я вношу и считываю стейты в/из local.storage. В обоих компонентах код выглядит вот так

    const useLocalStorageList = (key, defaultValue) => {
        const [state, setState] = useState(() => JSON.parse(localStorage.getItem(key) || defaultValue))
        useEffect(() => {
            localStorage.setItem(key, JSON.stringify(state))
        }, [state])
        return [state, setState]
    }

В компоненте "Хедер" в local.storage Я передаю ключ 'Account Name' со значением 1

    const [activeAccount, setActiveAccount] = useLocalStorageList('Account Name', 1)

Ситуация следующая: В зависимости от значения ключа Account Name, мне нужно отображать/не отображать параграф, для этого Я выполняю следующий код:

    function Header() {

      const useLocalStorageList = (key, defaultValue) => {
        const [state, setState] = useState(() => JSON.parse(localStorage.getItem(key) || defaultValue))
        useEffect(() => {
            localStorage.setItem(key, JSON.stringify(state))
        }, [state])
        return [state, setState]
      }

      const [activeAccount, setActiveAccount] = useLocalStorageList('Account Name', 1)


      return (
        <header>
            {activeAccount === 1 ? <p>Hello</p> : ''}
            <button onClick={() =>setActiveAccount(1)}>Choose first account</button>
            <button onClick={() =>setActiveAccount(2)}>Choose second account</button>
        </header>
      )
    }

Этот код срабатывает, и при нажатии на кнопки, значение activeAccount в local.storage меняется, и параграф, выводящий "Hello" отображается/пропадает в зависимости от условий, без перезагрузки страницы, т.е. в реальном времени.

Но проблема в том, что сетить стейт Я буду в одном компоненте, а выводить/прятать элемент зависящий от этого стейта, в другом компоненте (Форме).

Сейчас этот элемент рендерится/не рентерится в зависимости от состояния стейта, но требует перезагрузки страницы, как мне сделать, что бы компонент ререндерился в реальном времени ?


Ответы (0 шт):