How to useEffect when value in localStorage changed?

Question

In my react app i'm saving user data filters into localStorage. I want to useEffect, when that data was changed. How to correctly trigger that effect? I tried this:

useEffect(() => {
    if (rawEstateObjects.length && localStorage.activeEstateListFilter) {
      const activeFilter = JSON.parse(localStorage.activeEstateListFilter)
      if (activeFilter.length) {
        applyFilter(activeFilter)
      }
    }
  }, [rawEstateObjects, localStorage.activeEstateListFilter])

but localStorage.activeEstateListFilter doesn't triggers the effect..

Answer 1

did you set value in localStorge? if set it then:

useEffect(() => {
  function activeEstateList() {
    const item = localStorage.getItem('activeEstateListFilter')

    if (rawEstateObjects.length && item) {
      const activeFilter = JSON.parse(localStorage.activeEstateListFilter)
      if (activeFilter.length) {
        applyFilter(activeFilter)
      }
    }
  }

  window.addEventListener('storage', activeEstateList)

  return () => {
    window.removeEventListener('storage', activeEstateList)
  }
}, [])

refrence answer: https://stackoverflow.com/a/61178371/7962191