setState very slow
See original GitHub issue public addShowInfo(showInfo: ShowInfo) {
console.log("start set showinfo state")
this.setState({ showInfo: showInfo }, ShowInfoStoreActions.AddShowInfo);
console.log("finish set showinfo state")
}
I have this simple setState which takes about 3-4 seconds to run. Any idea why?
Issue Analytics
- State:
- Created 4 years ago
- Comments:7 (4 by maintainers)
Top Results From Across the Web
javascript - React setState slow
I see your problem. It's not actually the setState that is slow but actually the rendering and the way you search things in...
Read more >Why React doesn't update state immediately
When developing React applications, you may have noticed that state updates don't immediately reflect new values after being changed.
Read more >3 Reasons why I stopped using React.setState - CloudBoost
1. setState is asynchronous · 2. setState causes unnecessary renders · 3. setState is not sufficient to capture all component state.
Read more >Why React setState/useState does not update immediately
The answer: They're just queues. React this. setState , and useState does not make changes directly to the state object. React this.
Read more >Fix the slow render before you fix the re-render
What is a re-render? · Given that it's slow to update the DOM (like when calling element. · And that performance issue is...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
As a heads-up, due to some edge cases that came up I ended up having to do deep cloning when setting and getting state even in production. So, if you’re still using it to store large amounts of data you may see an impact with v2.2.8. However,
setState()
andgetState()
now have a deepClone boolean property that can be passed (https://github.com/danwahlin/observable-store#store-api). So, when adding all of the records you mentioned above you could do something like the following potentially:this.setState(yourState, 'Your Action', true, false);
this.getState(false)
The last
false
value would tell it to NOT do a deep clone on the state being added. That’s good for performance, but any changes to the data outside of the store could affect the store data since it’d be stored by reference without any cloning in that case.Awesome! Good to hear. Heard about that trick (deep cloning in dev to prevent mutations and shallow cloning in prod) from one of the NgRx guys.