React DOM updating every instant on Drag

I am rendering multiple <Draggable> nodes in my app, using an array stored in the state. With the help of React’s Chrome extension’s “Highlight Updates” I could see that all of the different nodes being rendered using a map function were being re-rendered/updated every instant when I would drag any single node.

This seems like something that shouldn’t be happening, especially considering that I used key prop as suggested by React while rendering a list of objects.

return (
        <React.Fragment>
            {nodes.map(
                node => (
                    <Draggable
                        key={node}        // node is a unique string
                        onStop={this.handleStop}
                        onDrag={this.handleMovement}
                    >
                        <div>
                               // content
                        </div>
                    </Draggable>
               ))}
        </React.Fragment>
    );

[sreetamdas]

Here’s a screencapture to explain the issue; the components get highlighted with the colored boxes whenever they are re-rendered, and red denotes that the component is being rendered very frequently (can be reproduced using the React Devtools).

[STRML]

Is your parent re rendering?

On Mon, Mar 25, 2019, 10:32 PM Sreetam Das [e-mail] wrote:

@STRML https://github.com/STRML of course, the item being dragged is re-rendered, but in this example, every Draggable component (all of the items built using react-draggable, each having a unique key as recommended) gets updated on every instance of Drag of a singular item.

Sorry for pestering you but just wanted to know if this was expected behaviour. And thanks a lot for your time!

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/mzabriskie/react-draggable/issues/371#issuecomment-476461879, or mute the thread https://github.com/notifications/unsubscribe-auth/ABJFPzjPS13PyJNHso1ZJwOrBqgHO7oQks5vaZTkgaJpZM4YoFZ5 .