React delaying my state update by 1 iteration

Question

Here's a function to update the state:

    GroupByHandler = (index) =>
        {
            const temporary = [...this.state.header.groupByHeader];
    
    
            if(this.state.header.groupByHeader.includes(this.props.Headers[index]))
            {
                temporary.splice(index,1);
                // console.log("[PivotTable.js]: if statement under GroupByHandler");
                // console.log(this.props.Headers[index]);
            }
            else
            {
                temporary.push(this.props.Headers[index]);
                // console.log("[PivotTable.js]: else statement under GroupByHandler");
                // console.log(this.props.Headers[index]);
                // console.log(temporary);
            }
            this.setState({
                header: {
                    ...this.state.header,
                    groupByHeader: temporary
                }
            });
            console.log("[PivotTable.js]: ");
            console.log(temporary);
            console.log(this.state.header.groupByHeader);
            console.log("Temporary: ");
            console.log(temporary);
        }

My console output is as shown below:

[PivotTable.js]:

PivotTable.js:43 ["advertiser"]

PivotTable.js:44 []

PivotTable.js:45 Temporary:

PivotTable.js:46 ["advertiser"]

My state looks like this:

    state = {
            header: {
                ActiveHeaderIndex: this.props.ActiveIndex,
                isHeaderAscending: true,
                groupByHeader: []
            }
}

Can anyone please help me in debugging where am I going wrong? The way I followed to setState isn't that correct? temporary is updated but setState isn't updated for some reason.

score 2 · Accepted Answer · answered Oct 09 '20 at 10:07

2

Can you try like this

 this.setState(
      Object.assign(this.state.header, { groupByHeader: temporary })
    );

answered Oct 09 '20 at 10:07

Bensu Rachel

184
1
5

Hmm this worked as well. I just wanted to know why previous one was causing delay and how did you improve it with this new edit? – Shivam Sahil Oct 09 '20 at 10:12

Nezih · Answer 2 · 2020-10-09T10:06:56.673

1

setState is working async if you want to get updated state right after setState worked then you need to use a callback like below. Try it.

this.setState(
{
  header: {
    ...this.state.header,
    groupByHeader: temporary
  }
},
() => console.log(this.state.header.groupByHeader)
);

A simple example below;

https://stackblitz.com/edit/react-gwy45b?file=src/App.js

edited Oct 09 '20 at 10:06

answered Oct 09 '20 at 10:02

Nezih

381
6
19

Oh wow! I got your point... thank you very much. So if i just add `()=>{}` will that make the entire function work asyncly? Or is there some other best practice for doing so? And thank you so much for answering! – Shivam Sahil Oct 09 '20 at 10:05
I am not sure if there is any best practices about this. That is what react docs suggest. But you can check out this page for more information; https://stackoverflow.com/questions/43370176/using-async-setstate And you might be want to check out react-hooks as well. – Nezih Oct 09 '20 at 10:07

React delaying my state update by 1 iteration

2 Answers2