title: React hooks, setting state on select
body: <p>I'm trying to add sorting feature to my data but I have some issues, I decided to try to play with React hooks a bit and not sure if I do something wrong, the problem is that when I select some value by Select, then eventho state has been changed, there is no differences on the page, after I click second time in another value (if I click same element then nothing changes) then everything starts to work normally and each time I click some value, the different way of sorting is applied. Why it doesn't want to work properly since the very beginning?</p>
  
  <p>EDIT:
  First in Parent component I fetch data which then I pass through the props:</p>
  
  <p>Parent:</p>
  
  <pre><code>  const [data, setData] = useState("")
  
  useEffect(() =&gt; getDeviceDataTotal(), [])
  
    const getDeviceDataTotal = () =&gt; {
      console.log('refresh clicked')
      fetch("http://localhost:4000/device")
        .then(res =&gt; res.json())
        .then((res) =&gt; setData(res))
        .catch(err =&gt; {
          throw err;
        });
    };
  
  
  
  
  &lt;Route
      exact
      path="/"
      render={() =&gt; &lt;Dashboard classes={classes} data={data} refresh={getDeviceDataTotal}/&gt; }
     /&gt;
  </code></pre>
  
  <p>Child component:</p>
  
  <pre><code>function Dashboard(props) {
    const [selectedSort, setSelectedSort] = useState("1")
    const [devices, setDevices] = useState(props.data)
  
    useEffect(() =&gt; {
      props.refresh(); 
      setDevices(props.data)
    },[devices])
  
  useEffect(() =&gt; sortDeviceData(), [selectedSort])
  
  
  
     const sortDeviceData = () =&gt; {
  
      console.log(devices)
      switch(selectedSort) {
        case "device":
          console.log(devices)
          props.data.sort(function(a,b) {
            return (a.device_id.toUpperCase() &lt; b.device_id.toUpperCase()) ? -1 : (a.device_id.toUpperCase() &gt; b.device_id.toUpperCase()) ? 1 : 0
          })
          setDevices(props.data)
          break;
        case "customer":
          props.data.sort(function(a,b) {
            return (a.customer.toUpperCase() &lt; b.customer.toUpperCase()) ? -1 : (a.customer.toUpperCase() &gt; b.customer.toUpperCase()) ? 1 : 0
          })
          setDevices(props.data)
          break;
        case "server":
          props.data.sort(function(a,b) {
            return (a.server.toUpperCase() &lt; b.server.toUpperCase()) ? -1 : (a.server.toUpperCase() &gt; b.server.toUpperCase()) ? 1 : 0
          })
          setDevices(props.data)
          break;
        case "creation":
          props.data.sort(function(a,b) {
            return (a.createdAt.toUpperCase() &lt; b.createdAt.toUpperCase()) ? -1 : (a.createdAt.toUpperCase() &gt; b.createdAt.toUpperCase()) ? 1 : 0
          })
          setDevices(props.data)
          break;
        case "update":
          props.data.sort(function(a,b) {
            return (a.updatedAt.toUpperCase() &lt; b.updatedAt.toUpperCase()) ? -1 : (a.updatedAt.toUpperCase() &gt; b.updatedAt.toUpperCase()) ? 1 : 0
          })
          setDevices(props.data)
          break;    
        default: 
          return setDevices(props.data)
      }
    }
  
  &lt;div&gt;
            &lt;FormControl className={classes.selectContainer}&gt;
  
              &lt;Select 
                value={selectedSort} 
                style={{position: 'absolute', right: 0, bottom: 10, width: 150}}
                onChange={e =&gt; setSelectedSort(e.target.value)}
                &gt;
                &lt;MenuItem value="1"&gt;Sort&lt;/MenuItem&gt;
                &lt;MenuItem value="device"&gt;Device&lt;/MenuItem&gt;
                &lt;MenuItem value="customer"&gt;User&lt;/MenuItem&gt;
                &lt;MenuItem value="server"&gt;Server&lt;/MenuItem&gt;
                &lt;MenuItem value="creation"&gt;Creation date&lt;/MenuItem&gt;
                &lt;MenuItem value="update"&gt;Update date&lt;/MenuItem&gt;
              &lt;/Select&gt;
            &lt;/FormControl&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;DeviceList
              classes={classes}
              deviceData={devices ? devices: props.data}
              filtered={props.filtered}
            /&gt;
          &lt;/div&gt;
  </code></pre>