title: If condition uses old state in the functional component
body: <p>I am building a create functionality working with react and laravel and I've encountered an error I am unable to fix. The thing is, I am catching an error and trying to process it in a nice way, if the error isn't shown then make the &quot;success operations&quot;.</p>
  <p>Some code:</p>
  <pre><code>const createProduct = async (event) =&gt; {
      const RESPONSE = await axios.post('/api/create-product', formData, {
          'Content-Type': 'multipart/form-data',
      })
      .then((response) =&gt; response.data)
      .catch(error =&gt; {
          const errorValues = Object.values(error.response.data.errors);
          const errorsArray = [];
  
          errorValues.forEach((errorArray) =&gt; {
              // Save message from API to an array and omit the dot
              errorArray.forEach((errorMessage) =&gt; errorsArray.push(errorMessage.slice(0, errorMessage.length - 1)));
          })
  
          setMessage({
              show: true,
              text: errorsArray.join(', '),
              type: 'danger',
          });
      });
      if( message.show == false ) {
          if( RESPONSE.status ) {
               do things ...
          }
      }
  }
  </code></pre>
  <p>but react compares the old state in case the error has been encountered and then throws an error &quot;Can't access property status, RESPONSE is undefined&quot; ... Any suggestions on how to bypass this behavior?</p>
  <p>EDIT: Resolved it by adding try and catch block.
  Code:</p>
  <pre><code>try {
          const RESPONSE = await axios.post('/api/create-product', formData, {
              'Content-Type': 'multipart/form-data',
          })
          .then((response) =&gt; response.data);
  
          if( RESPONSE.status ) {
              do things...
          }
  
          if( RESPONSE.message ) {
              setMessage({
                  show: true,
                  text: RESPONSE.message,
                  type: RESPONSE.status ? 'success' : 'danger',
              });
          }
      } catch(error) {
          const errorValues = Object.values(error.response.data.errors);
          const errorsArray = [];
  
          errorValues.forEach((errorArray) =&gt; {
              // Save message from the API to an array and omit the dot
              errorArray.forEach((errorMessage) =&gt; errorsArray.push(errorMessage.slice(0, errorMessage.length - 1)));
          })
  
          setMessage({
              show: true,
              text: errorsArray.join(', '),
              type: 'danger',
          });
  
          return Promise.reject(errorsArray);
      }
  </code></pre>