title: how to make page re-render after localstorage change
body: <p>Please how can i make the useEffect make the page re-render on storage change? i'm using a radio button to change the value of the language, the code inside of the useEffect doesn't seem to work</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> const [lang, setLang] = useState(JSON.parse(localStorage.getItem("lang")));
  
    useEffect(() =&gt; {
      function checkUserData() {
        const item = JSON.parse(localStorage.getItem("lang"));
  
        if (item) {
          setLang(item);
        }
      }
  
      window.addEventListener("storage", () =&gt; {
        checkUserData();
      });
  
      return () =&gt; {
        window.removeEventListener("storage", checkUserData);
      };
    }, []);
  
    const handleChange = (e) =&gt; {
      const { name, value } = e.target;
      localStorage.setItem("lang", JSON.stringify({ [name]: value }));
      //setLang({ [name]: value });
      console.log(lang);
    };</code></pre>
  </div>
  </div>
  </p>