search

bsidelinger912 / shiitake

React Line clamp that won't get you fired
MIT License
100 stars 22 forks source link

ResizeListener rerenders despite same props #24

Closed brian-lim-42 closed 4 years ago

brian-lim-42 commented 6 years ago

Hi! Great component!

We may be having a problem where this ResizeListener fires when CSS Media breakpoints are fired off... essentially, any resize event will fire an event, which your component processes

Is is possible for you to check with shouldComponentUpdate or use a PureComponent to see if a rerender is actually required? It is rerendering even though all the props are the same coming in

I can create a minimal example if you want, we discovered this with why-did-you-update

Thanks! ~ B

bsidelinger912 commented 6 years ago

Hi @bhldev, Shiitake actually needs to re-render on any window size change, that's how it works. It needs to render to test the text and see how much it needs to trim. The space available to the text changes of course when window size changes, so it needs to recalculate. The way it recalculates is by rendering into a hidden div and measuring the height.

brian-lim-42 commented 6 years ago

Thank you @bsidelinger912

Would you be willing to add a prop to disable rerendering for either only width or only height or both? There are use cases where this is the case ex., resize events fired by such and such components, or imperceptible resizes (can you create some kind of threshold?)

I can create the PR for you to review if you wish

Thanks!

bsidelinger912 commented 6 years ago

Hi @bhldev actually it only changes state if the available width changes, you can see the check here: https://github.com/bsidelinger912/shiitake/blob/master/src/index.jsx#L153. The setState right above that: https://github.com/bsidelinger912/shiitake/blob/master/src/index.jsx#L150 will not change state (and thus not trigger a render) as long as the number of lines doesn't change. So as far as I know it only renders when it needs to. Keep in mind available width can take into account responsive layouts and breakpoint changes. If you think you see a line of code that changes state (which is the only way react will render if the props didn't change) when it shouldn't feel free to point it out, but I'm pretty sure every time it renders it needs to.

bsidelinger912 commented 4 years ago

I think this is addressed with: https://github.com/bsidelinger912/shiitake/releases/tag/v3.0.0