title: React Hooks: paradigm transition problem from sync to async
body: <p>I just started using React hooks and I'm having a problem. In the following component, I update a value through the react hook and I use it as a parameter for a function. The problem is that the hook is async, so when I call the function, the value is undefined.
  Here's the code:</p>
  
  <p>react hook:</p>
  
  <pre><code>const [selectedLocation, setSelectedLocation] = React.useState()
  </code></pre>
  
  <p>function where I need the updated <code>selectedLocation</code>:</p>
  
  <pre><code>  const sendLocationToDevice = (loader = true) =&gt; {
      props.dispatch({type: "CLEAR_ERROR"})
      const resObj = CalculateBearing({
        a: {lat: props.store.position.latitude, long: props.store.position.longitude},
        b: {lat: selectedLocation.coordinates.lat, long: selectedLocation.coordinates.lng} // -&gt; here's the value is undefined
      })
  </code></pre>
  
  <p>Form where I update the value of <code>selectedLocation</code>:</p>
  
  <pre><code>          &lt;View&gt;
            { selectedLocation === null ? (
              &lt;GooglePlacesAutocomplete
                placeholder='Enter Location'
                minLength={2}
                autoFocus={false}
                returnKeyType={'default'}
                fetchDetails={true}
                onPress={(data, details = null) =&gt; {
                  setSelectedLocation({name: details.formatted_address, coordinates: details.geometry.location})
                  sendLocationToDevice()
                }}
  </code></pre>
  
  <p>The flow is: user uses the form to select a location and call the function to calculate the bearing. with the old <code>this.setState</code> everything was sync so I had no problem, now I'm not sure what's the best pattern or if I'm misusing the hooks...how should I fix this?</p>