title: Callback using old state when called
body: <p>I have a modal where I pass in the onConfirm callback that triggers when user clicks the confirm button. The issue I'm seeing is that the state in this function is not the current state but the initial application state.</p>
  <p>app.js</p>
  <pre><code>const discardClaim = async () =&gt; {
      try {
          // Showing undefined here?
          if (state.claim) { 
              await api.discard(state.claim.id);
          }
          // Close confirmation
          dispatch({ type: &quot;CLOSE_DISCARD_MODAL&quot; });
      } catch (error) {
          // handle error
      }
  };
  
  const handleDiscard = () =&gt; {
      // Set confirmation
      const modalSettings = {
          confirmTitle: &quot;MyTitle&quot;,
          confirmMessage: &quot;Are you sure?&quot;,
          onConfirm: discardClaim
      };
  
      dispatch({ type: &quot;OPEN_DISCARD_MODAL&quot;, payload: discardModal });
  };
  
  useEffect(() =&gt; {
      if (state.handleDiscard === undefined) {
          dispatch({ type: &quot;SET_HANDLERS&quot;, payload: { handleDiscard } });
      }
  }, []);
  </code></pre>
  <p>Inside the ConfirmationModal.jsx I do:</p>
  <pre><code>const { confirmTitle, confirmMessage, onConfirm } = modalSettings;
  &lt;Button color=&quot;red&quot; text={confirmButton} onClick={onConfirm} /&gt;
  </code></pre>
  <p>My state provider looks like this:</p>
  <pre><code>  const [state, dispatch] = useReducer&lt;state, any&gt;(reduce, {
      data: [],
      claim: null,
    });
  </code></pre>
  <p>When I try to call <code>onConfirm</code> inside the ConfirmationModal, I only get the initial state and now the latest state.</p>