OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

React hook useSelector value not changed inside async function

  • Thread starter Thread starter Drex
  • Start date Start date
D

Drex

Guest
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 weird scenario.

For example:

Code:
// parentComponent
const MyComponent = (props) => {
  const hasChanged = useSelector(state => {
    const isChanged = checkIfChanged(state);
    console.log('useSelector isChanged:>> ', isChanged);
    return isChanged;
  });

  const selectChange = async(userId, userCode)=> {
    console.log('selectChange hasChanged :>> ', hasChanged);
    // ...
  }
  return (
      <div>
        <ChildComponent onSelectChange={selectChange} />
      </div>
  );
}

I have my properties saved in the state and whenever there is anything changed in my component, my hasChanged from useSelector will become true, however, when I made a change, I can see my hasChanged already become true in the useSelector, but still false inside my function selectChange!

Code:
console log
useSelector isChanged:>> true
useSelector isChanged:>> true
selectChange hasChanged :>> false // why it's false here as already true from useSelector
useSelector isChanged:>> true

Does anyone have the same experience? I am wondering if it's because my selectChanged is async-await so the value inside will not fetch from the latest state?

<p>I've been using React Hook with <code>useSelector</code> and <code>useDispatch</code> for a while, mostly it works very well but recently I've experienced some very weird scenario.</p>
<p>For example:</p>
<pre><code>// parentComponent
const MyComponent = (props) => {
const hasChanged = useSelector(state => {
const isChanged = checkIfChanged(state);
console.log('useSelector isChanged:>> ', isChanged);
return isChanged;
});

const selectChange = async(userId, userCode)=> {
console.log('selectChange hasChanged :>> ', hasChanged);
// ...
}
return (
<div>
<ChildComponent onSelectChange={selectChange} />
</div>
);
}
</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:>> true
useSelector isChanged:>> true
selectChange hasChanged :>> false // why it's false here as already true from useSelector
useSelector isChanged:>> 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>
 

Online statistics

Members online
0
Guests online
3
Total visitors
3
Top