title: call callback function only once
body: <p>I am working on a fullstack project with ReactJS in front and it has user management.</p>
  <p>Some pages are available only if the user is connected, so basically, I am checking it by asking my server, and I am doing it in my <code>NavBar.js</code> component (because it used in every pages).</p>
  <p>it looks like something like this:</p>
  <pre><code>const Navigation = ({ callback }) =&gt; {
      useEffect(() =&gt; {
          axios({
              method: &quot;GET&quot;,
              withCredentials: true,
              url: process.env.REACT_APP_SERVER + &quot;/user&quot;,
          }).then((res) =&gt; {
              if (callback) 
                  callback(res.data.username);
              setUser(res.data.username);
          }).catch((e) =&gt; {
              if (callback)
                  callback(null);
          });
      }, [callback])
  
      return (
          &lt;div&gt;Some navbar stuff&lt;/div&gt;
      )
  }
  
  export default Navigation;
  </code></pre>
  <p>and inside my other pages, I use my Navigation component like this :</p>
  <pre><code>const PublishContent = () =&gt; {
      const [loading, setLoading] = useState(true);
      const [user, setUser] = useState(null);
  
      const handleUserName = e =&gt; {
          setUser(e);
          setLoading(false);
      }
  
      return (
          &lt;div&gt;
              &lt;Navigation callback={handleUserName} /&gt;
              {
                  !loading &amp;&amp; &lt;div&gt;{user ? &lt;div&gt;CONNECTED&lt;/div&gt; : &lt;div&gt; NOT CONNECTED&lt;/div&gt;} &lt;/div&gt;
              }
          &lt;/div&gt;
      )
  }
  
  export default PublishContent;
  </code></pre>
  <p>My problem is that my <code>handleUserName</code> is called three times, I don't understand why, even if <code>callback</code> is the the dependency list of my <code>UseEffect</code>, it should be constant...</p>
  <p>Also, since <code>useState</code> is async, even if the user is logged, the first time my <code>user</code> is undefined.</p>
  <p>Do you know how I can solve this problem ? Also, can you tell me if the way I am doing (checking if user is authenticated, sounds weird to you ? Thank you.</p>