search

ZeeCoder / use-resize-observer

A React hook that allows you to use a ResizeObserver to measure an element's size.
MIT License
644 stars 42 forks source link

Only rerender if dimensions changed #22

Closed nxz91 closed 4 years ago

ZeeCoder commented 4 years ago

Good start, I think I'll also add a precision option to this, so that you can further decrease improve rendering. The native resize observer responds with subpixel values, which means a render is triggered pretty much all the time. Related: #19

nxz91 commented 4 years ago

Good point :) added a commit.

ZeeCoder commented 4 years ago

I don't think .toPrecision works the way you think it does:

123.456.toPrecision(2); // => '1.2e+2'
123.456.toPrecision(3); // => 123
123.456.toPrecision(4); // => 123.5
123.456.toPrecision(5); // => 123.46

☝ Not too useful

I think it's better to just Math.floor the values for consistency. I doubt anyone needs subpixel values anyway, and if so, we can always add real precision support later as a new feature. 🤷‍♂️

ZeeCoder commented 4 years ago

Also, since you don't have width, and height in your effect deps, it won't have a fresh value to compare the new one to.

ZeeCoder commented 4 years ago

I've implemented the changes I had in mind in the next channel if you want to give it a go. Demo: https://codesandbox.io/s/vigilant-wave-buftd

nxz91 commented 4 years ago

Oops! Awesome, thanks!