Unnecessary re-render of other elements when using controlled RND

[TheGameNewWorldOrder]

Is it a bug/feature/question or do you need help? question, improvement

Overview of the problem

I'm using react-rnd version [10.3.1]

My browser is: Chrome

I am sure this issue is not a duplicate? Not sure

Reproduced project

https://codesandbox.io/s/react-end-controlled-re-render-in2f7

Description

Steps to Reproduce

1. Create controlled Rnd with position and size
2. Create a sibling normal div without any specified props
3. Add console log in normal div

Expected behavior

there is only one console log output as the div is initially mounted

Actual behavior

There is a console log output every time when you click/drag/resize the Rnd element.

With uncontrolled Rnd(default prop only), there is no extra re-rendering of the other element regardless your actions on the Rnd.

Why would controlled Rnd trigger the re-rendering but the uncontrolled won't?

[challet]

Is it really a problem with Rnd ? As I see it, it renders eveytime the App state changes, nothing unusual.

[fridaythx]

The parent component's re-rendering causes the child component's re-rendering.

You can just wrap Rnd with a new wrapper component. That way, the parent component will no longer be re-rendered after you dragging or resizing it.

Check this out https://codesandbox.io/s/react-end-controlled-re-render-forked-zgumn?file=/src/index.js