React setstate does not work in IE unless timeout is used - reactjs

Question

I have below method where am making a service call using whatwg-fetch. setstate does not work with IE browser. It works fine with other browsers.
After i enclosed setstate within settimeout it works good in IE.
Not sure this timeout will affect once its deployed in prod servers and time delay for response gets increased. Please suggest me with an ideal solution for this issue. Thanks!
fetch("/local/addThings").then(res => res.json())
.then(
(result) => {
setTimeout(() => {
this.setState({
value: "edit",
items: result
});
}, 1000);
}
)
.catch(error => console.error('Error:', error));
}```

Answer 1

This may be because of the time delay in getting the result. You could put in a conditional statement before setting the state to check that a result has been received.
fetch("/local/addThings").then(res => res.json())
.then(
(result) => {
if (result) {
this.setState({
value: "edit",
items: result
});
}
} else {
setTimeout(() => {
this.setState({
value: "edit",
items: result
});
}, 1000);
}
)
.catch(error => console.error('Error:', error));
}
I also noticed you have two .then statements. What if you set the state with the first one like this?
fetch("/local/addThings")
.then(res =>
this.setState({
value: "edit",
items: res
})
)
.catch(error => console.error('Error:', error));
}

Answer 2

It may have to do with setState being asynchronous:
You can try to remove the setTimeout and give setState a function instead of an object, like this:
this.setState(() => ({
value: "edit",
items: result
}));

Answer 3

That's because calling setState() in React is asynchronous and it doesn't always immediately update the component. Please check the official documentation about setState().
You could use componentDidUpdate or a setState callback (setState(updater, callback)), either of which are guaranteed to fire after the update has been applied. We just need to get the updated state in the callback:
this.setState({ value: "edit", items: result },()=>{
console.log(this.state.value); //any function u want to call after state changed
});