2

I am using react-beautiful-dnd to drag and drop different parts of my application.

Some parts however use an iframe with a third party application widget in.

When I drag these they re-render the entire iframe which I don't want to happen, is there a way to stop this?

See example of this happening.

https://codesandbox.io/s/cool-ganguly-n11sc?file=/src/App.js

user3284707
  • 3,033
  • 3
  • 35
  • 69
  • I don't have a solution but I was trying your code. Some properties of dropped component changes causing a re-render of the dropped component which reload the iframe. I was trying to wrap your component with iframe in `React.memo()` so it won't re-render if the props are the same. You may try it yourself. https://codesandbox.io/s/brave-jennings-uiuiv?file=/src/Iframe.js It's stopped dropping with my code move. – Sanish Joseph Sep 11 '21 at 06:37
  • Thanks for your comment, I tried doing the same, and tried using shouldComponentUpdate with class based component, I got it to stop re-rendering within the same column, but as soon as it moves column it re-renders. I guess because it's now part of a different list. I am unsure of if there will be a way around this... – user3284707 Sep 11 '21 at 07:11

0 Answers0