title: React - using a callback function with useState Hook
body: <p>I need to use a callback function, immediately after state hook gets updated.</p>
  
  <p>Before hooks I could do this in a very simple fashion, as following:</p>
  
  <pre><code>myFunction= () =&gt; {
      this.setState({
          something: "something"
      }, () =&gt; {
       // do something with this.state
      })
  }
  </code></pre>
  
  <p>Here is my code:</p>
  
  <pre><code>const EmployeeDetails = () =&gt; 
  const [state, setState] = useState({
      employee: undefined,
      companyDocuments: undefined,
      personalDocuments: undefined,
  });
  
  useEffect(() =&gt; {
      const fetchData = async () =&gt; {
          axios
              .all([
                  await axios.get("someUrl"),
                  await axios.get("someUrl"),
                  await axios.get("someUrl"),
              ])
              .then(
                  axios.spread((...responses) =&gt; {
                      setState({
                          employee: responses[0].data,
                          companyDocuments: responses[1].data,
                          personalDocuments: responses[2].data,
                      });
                  })
              )
              .catch(errors =&gt; {});
      };
      fetchData()
      .then(processMyEmployee); // should be called something like this
  }, []);
  
  const processMyEmployee= () =&gt; {
    // crash because state.employee is not fetched yet
  }
  
  return (
      &lt;div&gt;it works!&lt;/div&gt;
  );
  };
  </code></pre>
  
  <p>I've seen some other suggestions on stack, most of them imply using custom hooks, but I believe this is a common problem and therefore must be a common solution to solve it.</p>