Unnecessary recalculation of state
See original GitHub issueI use react-sticky
along with ReactCSSTransitionGroup
for some animations (these animations not inside a sticky element). I noticed the following issue: when I use ReactCSSTransitionGroup
on the same page with react-sticky
transitions act weird and skip entering animation for elements. I checked the code and found that for every change of properties there is a recalculation for the whole state:
componentWillReceiveProps() {
this.recomputeState();
}
I tried to remove these function and all transitions work fine. Probably, because of page reflow (recalculation triggers reflow because it reads properties directly from DOM node).
Is it possible to get rid of these recalculations for each property? Or at least check particular properties? What do you think?
Issue Analytics
- State:
- Created 7 years ago
- Reactions:3
- Comments:10 (1 by maintainers)
Top Results From Across the Web
POMS: RS 00605.580 - Recalculation of Benefits - 08/02/1999
When a prior computation is incorrect, any necessary recalculation is made under the rules applicable to the computation being corrected.
Read more >Change formula recalculation, iteration, or precision in Excel
Calculation is the process of computing formulas and then displaying the results as values in the cells that contain the formulas. To avoid...
Read more >Department of Education Announces Actions to Fix ...
Today, the Department of Education announced steps that will bring borrowers closer to public service loan and income-driven repayment (IDR) ...
Read more >Why you should avoid using state for computed properties
The answer is yes, it depends. It could be if it's some computationally expensive calculation and variable that the calculation relies on don't ......
Read more >States Can Preserve Revenue by Decoupling From CARES ...
Background on State Income Tax “Conformity”. In most states, the calculation of state taxable income starts with the federal “adjusted gross ...
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
With
react-sticky
, redraws everywhere (the stutters in the gif are due to poor performance, not GIF recording):With same code, except not using react-sticky but instead a custom implementation that only calls
setState
on sticky state change:@199911 https://developer.chrome.com/devtools/docs/rendering-settings