In react Resizing an element with mouse, what is the best way to implement with render function or directly change div width and height?

Question

When we resize a div element using mouse move event should we re-render the element using render function or directly modify div's height and width.

The proper way to modify an element is go through render function but for each mouse move pixel the render function is called which might cause some load on browser.

While directly modifying the width and height will have no load is what i feel.

Which is a better way?

Answer 1

If you use React then it's better to do it React way. Changing components state on all kinds of events ( mousemove , resize , etc) is a common practice. I don't think you'll notice any lags in a browser (I believe it may get laggy if you have 1000+ such components which change their state at the same time).

So you better set event listener on your component and change its state when event triggers. Then in your render function use updated state.