title: Best practice of setting state from axios request
body: <p>I have an api.js file with the following function:</p>
  <pre><code>export const login =  (loginUserName, loginPassword, setUser) =&gt; {
      axios({
          method: 'post',
          data: {
              username: loginUserName,
              password: loginPassword
          },
          withCredentials: true,
          url: '...........'
      }).then(async (res) =&gt; {
          if (res.data.loggedIn === true) setUser(loginUserName);
      });
  };
  </code></pre>
  <p>My useState hooks looks the following:</p>
  <pre><code>const [ user, setUser ] = useState({});
  </code></pre>
  <p>I was wondering, instead of sending the setUser function from my Login component like I do:</p>
  <pre><code>login(userName,password,setUser);
  </code></pre>
  <p>which is in another file, how can I do it from outside of the function like the following:</p>
  <pre><code>setUser(login(userName,password));
  </code></pre>
  <p>So in case the function did retrieve the information I wanted it'll return it (in this case the username), and in case not it will set the user as undefined or something.</p>
  <p>I tried using</p>
  <pre><code>export const login =  (loginUserName, loginPassword) =&gt; {
     axios({
         method: 'post',
         data: {
             username: loginUserName,
             password: loginPassword
         },
         withCredentials: true,
         url: '............'
     }).then(async (res) =&gt; {
         if (res.data.loggedIn === true) return loginUserName;
     });
  };
  </code></pre>
  <p>But I had some struggling with the async function.
  It seems like it wont return that information for some reason.
  if I had to guess it returns it only for the axios function or something..
  How do I get the effect I am looking for and what's the best practice? Is sending the &quot;setUser&quot; function considered a good practice or is it better trying to get rid of it?</p>