How to Set State Inside a Useeffect Hook

Can I set state inside a useEffect hook

Effects are always executed after the render phase is completed even if you setState inside the one effect, another effect will read the updated state and take action on it only after the render phase.

Having said that its probably better to take both actions in the same effect unless there is a possibility that b can change due to reasons other than changing a in which case too you would want to execute the same logic

cannot set state inside useEffect hook

setUsers() is the asynchronous method, and you can't get the updated value of users immediately after setusers().

setUsers([...users,data]);
console.log(users); // This will console old value of users

You should use useEffect with adding a users dependency to check the updated value of users.

useEffect(() => {
  console.log(users);
}, [users]);

setting the state inside the useEffect with that state as a dependency

If you fix the syntax (setTimeOut needs to be spelled properly), yes, that'll cause an infinite loop.

const App = () => {
    console.log('rendering');
    const [a , setA] = React.useState(false);
    React.useEffect(() => {
          setA(true);

        setTimeout(()=>{
          setA(false);
        },300);

    },[a]);
    return 'foo';
};

ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

React Hooks: How to setState inside useEffect?

useState much like it's counterpart setState returns an asynchronous function to set the state. So logging dreams just below the setDreams call isn't going to give you any results. Instead you can log inside outside the useEffect to see the state.

But setDreams being async has another disadvantage in your case, the loop doesn't set dreams quick enough for you to be able to spread it, you might be loosing updates in between, you can fix this using the functional setDreams.

setDreams(prevDreams => [...prevDreams, doc.doc.data()])

Or better still, you can save up all your data and setState at the very end.

const newDreamsState = newDreams.map(
  return doc.doc.data();
});
setDreams(newDreamsState);

React setState call inside a custom hook useEffect is not updating the state

users state was getting set again in another function with sorted list, which is getting called in useEffect. I commented that function call and then issue got solved. I am not sure why this issue would come because of that.

React cannot set state inside useEffect does not update state in the current cycle but updates state in the next cycle. What could be causing this?

The 2 console.logs here will display the same value for expressions, because they are referencing the same copy of expressions:

console.log(expressions);
setExpressions(newExp);
console.log(expressions);

If you want to see the changed value of expressions, you can add a useEffect() that triggers after expressions has had a chance to change:

useEffect(() => {

    console.log(expressions);

}, [expressions]);

I'm not sure if there's enough info here to give a specific solution to the other problem. Add more info if you are still stuck.

---

Related Topics