How to change state when localStorage value changes?

Question

How to change state when localStorage value changed. For example, I have a language switching button, like French and English, when I click English, it will be storing to localStorage, when I click English it will also.

When I click the French the whole project need to see in French, also when I click English, want to do like that, it So how can I change state when I update localStorage?

<button onclick={()=>localStorage.setItem("language",'english')}>English</button>
<button onclick={()=>localStorage.setItem("language",'french')}>French</button>

let language;
if (typeof window !== "undefined") {
  if (localStorage.getItem("language") === null) {
    language = "english";
  }

  if (localStorage.getItem("language") !== null) {
    language = localStorage.getItem("language");
  }
}

const [langu, setLangua] = useState(language);

console.log(langu);

Answer 1

One way to achieve this that wouldn't change that much your current structure is first to change your buttons to this:

<button
  onClick={() => {
    localStorage.setItem("language", "english");
    window.dispatchEvent(new Event("storage"));
  }}
>
  English
</button>
<button
  onClick={() => {
    localStorage.setItem("language", "french");
    window.dispatchEvent(new Event("storage"));
  }}
>
  French
</button>

And then set up inside the component where you have setLangua and langu an useEffect that would listen to changes in the localStorage and update the state:

useEffect(() => {
  const listenStorageChange = () => {
    if (localStorage.getItem("language") === null) {
      setLangua("english");
    } else {
      setLangua(localStorage.getItem("language"));
    }
  };
  window.addEventListener("storage", listenStorageChange);
  return () => window.removeEventListener("storage", listenStorageChange);
}, []);