react-zoom-pan-pinch icon indicating copy to clipboard operation
react-zoom-pan-pinch copied to clipboard

transform-context causes unnecessary reflow

Open linsword13 opened this issue 4 years ago • 1 comments

Thank you for the great library!

While doing some perf work on our app, we came across some forced reflow that's due to the library. Specifically, the TransformContext's componentDidUpdate hook calls handleCalculateBounds which ultimately invokes getComponentsSizes that queries for the offset dimensions. These queries force the browser to synchronously re-layout and may become a perf bottleneck (src).

Suggestion: While it might not be easy to address the forced reflow (likely converting to hooks like useEffect can help), it seems the conditional used in componentDidUpdate can be improved. The oldProps !== this.props will never be true when the component is re-rendered. It'd save some unnecessary reflows if we change the conditional to do a deeper equality check, or maybe allow the caller to supply a custom equality check callback here.

Happy to create pull request for this, if the suggestion seems reasonable to you, thanks!

linsword13 avatar Dec 03 '21 20:12 linsword13

bump

wongrichardalex avatar Dec 17 '21 21:12 wongrichardalex

Done!

prc5 avatar Feb 27 '23 17:02 prc5