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?

Question

I am using the useEffect hook for a get request using axios and consequently updating the state with some of the received data. This is my useEffect hook and the function inside:

const [expressions, setExpressions] = useState(expressionData.data);
const getFilteredExp = () => {
    console.log(catFilter);
    let config = {
      method: 'get',
      url: `/expressions/category/${catFilter}`,
      headers: {}
    };
    axios(config)
      .then((response) => {
        console.log(response.data);
        const newExp = response.data.payload.data;
        console.log(expressions);
        setExpressions(newExp);
        console.log(expressions);
      })
      .catch((err) => {
        console.error(err);
      })
  }

useEffect(() => {
  if (!catFilter) {
    setExpressions(expressionData.data)
    console.log(expressionData.data);
  }
  else {
    getFilteredExp();
   }
}, [catFilter])

catFilter is also a state variable. My expressions state variable is not updated directly after the setExpressions call but one render cycle after. Not sure how to fix this.The console logs inside the getFilteredExp function should highlight my problem perfectly. These console logs should show my problem Everytime I change the category filter (catFilter state variable), the page is re-rendered and the previous get request's results are updated in the state. Ideally, the logs should return with 5 items after the get request returns with an array of 5 items. This is clearly not shown in the console log.

Additionally, even though my state is updated a render-late, my page content that depends on the expressions state variable is not being updated and remains in its default state.

Any help would be much appreciated and I am sorry if my question is not very clear or follow some requirements, I am relatively new to this.

Does this answer your question? [useState set method not reflecting change immediately](https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately) — Janez Kuhar, Jun 25 '21 at 19:15
@JanezKuhar Not really but it did clarify why the console logs didnt show the right result due to the async nature of set method of useState. Thank you! — Niranjan Rajesh, Jun 26 '21 at 09:42

score 2 · Accepted Answer · answered Jun 25 '21 at 18:47

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.

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?

1 Answers1