title: useEffect side effect on submit of form
body: <p>Let's say I have a form with some user input fields and a submit button in the header that dispatches a couple of actions when pressed. I use a function called <code>calculate</code>, which takes a user input stored in <code>number</code> and updates a state variable <code>result</code>, which I would like to pass to <code>submitFunction</code> after pressing a submit header button. I am trying to achieve this with <code>useEffect</code>, but for some reason <code>result</code> is not being updated in time.</p>
  <p>For example, if I enter 99 in the text input field, <code>result</code> is sent to the <code>submitHandler</code> as 90 instead of 990, i.e. one of the digits from the text input is being left off. Can someone tell me how to modify <code>useEffect</code> or my function calls so that <code>number</code> will be updated in time and the correct value of <code>result</code> is passed to <code>submitHandler</code>?</p>
  <pre><code>const ExampleScreen = props =&gt; {
      const dispatch = useDispatch();
  
      const [number, setNumber] = useState(0);
      const [result, setResult] = useState(0);
  
      const calculate = (n) =&gt; {
          setResult(n * 10);
      };
  
      useEffect(() =&gt; {
          calculate(number); // something not working here!
      })
  
      const submitHandler = useCallback(() =&gt; {
          dispatch(updateList(result));
          dispatch(updateTotal(result));
      }, [dispatch, result]);
      
      useEffect(() =&gt; {
          props.navigation.setParams({submit: submitHandler});
      }, [submitHandler]);
  
      return (
          &lt;View&gt;
              &lt;TextInput
                  keyboardType='numeric'
                  value={number}
                  onChangeText={(val) =&gt; setNumber(val)}
              /&gt;
          &lt;/View&gt;
      );
  };
  
  ExampleScreen.navigationOptions = navData =&gt; {
      const submitFunction = navData.navigation.getParam('submit');
      return {
          headerRight: () =&gt; &lt;HeaderButtons&gt;
              &lt;Item 
                  title='Submit'
                  iconName='md-checkmark'
                  onPress={submitFunction}
              /&gt;
          &lt;/HeaderButtons&gt;
      }
  };
  </code></pre>