title: React hook useSelector value not changed inside async function
body: <p>I've been using React Hook with useSelector and useDispatch for a while, mostly it works very well but recently I've experienced some very wired scenario. For example</p>
  <pre><code>// parentComponent
  const MyComponent = (props) =&gt; {
    const hasChanged = useSelector(state =&gt; {
      const isChanged = checkIfChanged(state);
      console.log('useSelector isChanged:&gt;&gt; ', isChanged);
      return isChanged;
    });
  
    const selectChange = async(userId, userCode)=&gt; {
      console.log('selectChange hasChanged :&gt;&gt; ', hasChanged);
      // ...
    }
    return (
        &lt;div&gt;
          &lt;ChildComponent onSelectChange={selectChange} /&gt;
        &lt;/div&gt;
    );
  }
  </code></pre>
  <p>I have my properties saved in the state and whenever there is anything changed in my component, my <code>hasChanged</code> from <code>useSelector</code> will become <strong>true</strong>, however, when I made a change, I can see my <code>hasChanged</code> already become <strong>true</strong> in the <code>useSelector</code>, but still <strong>false</strong> inside my function <code>selectChange</code>!</p>
  <pre><code>console log
  useSelector isChanged:&gt;&gt; true
  useSelector isChanged:&gt;&gt; true
  selectChange hasChanged :&gt;&gt; false // why it's false here as already true from useSelector
  useSelector isChanged:&gt;&gt; true
  </code></pre>
  <p>Does anyone have the same experience? I am wondering if it's because my <code>selectChanged</code> is async-await so the value inside will not fetch from the latest state?</p>