title: React Hooks state is not updating with correct output
body: <p>I am using React Hooks. I am trying to sort the data that I fetch from an API and update the state with the newly sorted data.</p>
  <pre><code>const [runs, setRuns] = useState({
      runs: [],
    });
  const [altConcentrationRuns, setAltConcentrationRuns ] = useState({
      altConcentrationRuns : []
    })
  
  async function handleRuns() {
      getRuns().then((result) =&gt; {
      
        setRuns(result.rows);
        setFilteredRuns(result.rows);
  
        //function to sort data according to column header/property
        
        const sortRowsByProperty = (property, direction) =&gt; {
          return result.rows.sort(function(a,b) { 
            var A = Object.keys(a)[0];
            var B = Object.keys(b)[0];
            if(direction == &quot;ascending&quot;) {
                  return (a[A][property] - b[B][property]);
                } else if(direction == &quot;descending&quot;) {
                  return b[B][property] - a[A][property];
                }
            });
          } 
          setAltConcentrationRuns(sortRowsByProperty('altConcentration', 'ascending'));
          //not updating, only showing runs 
  
        
        setIsLoading(false);
        
        
      });
    }
  
    useEffect(() =&gt; {
      setIsLoading(true);
      handleRuns();
      
    }, []);
    console.log('runs', altConcentrationRuns);
  
  </code></pre>
  <p>When I console log my output, I don't get the sorted data, only the original data (result.rows). What am I doing wrong?</p>
  <p>Thanks!</p>