title: React JS: Remove a Localstorage value when the page reloads. onbeforeunload should not be used acc to my senior dev
body: <p>this is my first question in this forum. Please let me know if I made any mistake on asking this question.<br />
  I am implementing a popup modal that has to be shown only once for newly signed up user.
  I'm setting a local variable (&quot;popup&quot;) when the signup is successful. I'm calling this modal inside my parent component if the local Storage variable exists. I tried using the useEffect with return, but it is not working on reload. Basically it renders my component multiple times, so the value gets erased and the popup just flashes and disappears. I want to have the value erased only when all the rendering is done.</p>
  <p>Edit: I am setting the localStorage variable on response of the API, I can confirm that it's set. I don't know how to post that code here. But basically in the parent component, where I receive data from API, I'm setting the variable.</p>
  <p>My parent component code where I call the modal:</p>
  <pre><code>{
    localStorage.getItem(&quot;popup&quot;) &amp;&amp; &lt;PopUpModal /&gt;;
  }
  </code></pre>
  <p>My modal component:</p>
  <pre><code>useEffect(() =&gt; {
    return () =&gt; {
      localStorage.removeItem(&quot;popup&quot;);
    };
  });
  
  return &lt;div&gt;//content&lt;/div&gt;;
  </code></pre>