Чтение 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" отображается/пропадает в зависимости от условий, без перезагрузки страницы, т.е. в реальном времени.
Но проблема в том, что сетить стейт Я буду в одном компоненте, а выводить/прятать элемент зависящий от этого стейта, в другом компоненте (Форме).
Сейчас этот элемент рендерится/не рентерится в зависимости от состояния стейта, но требует перезагрузки страницы, как мне сделать, что бы компонент ререндерился в реальном времени ?