2stash
commented
3 years ago @hollymiller525 Hello! So I know that this is discussed in the egghead.io training course on react-beautiful-dnd. On any drag, all child components are rerendered by react by default.
There is a short course for this library by Alex Reardon on egghead.io, I implemented the rerendering fix suggested and it seems to work on stopping unnecessary rerenders. I have this on my computer, and when I use chrome dev tools and highlight render it works. But on codesandbox I'm not sure if it works and I get a console warning of
Here is the codesandbox with the fix: https://codesandbox.io/s/vertical-list-forked-25wyv
lesson 13 talks about how to stop the rerendering. https://egghead.io/courses/beautiful-and-accessible-drag-and-drop-with-react-beautiful-dnd
danieldelcore
Expected behavior Currently I am using the WhyDidYouRenderMe tool to detect avoidable re-renders. I was finding in my code that I couldn't fix some of the console errors from this tool. I decided to use one of the react-beautiful-dnd examples on sandbox to verify that it wasn't just my code. It seems like this example is also showing the same errors.
https://codesandbox.io/s/vjqmp7k49y?file=/index.js
The expected behavior of this is to have zero console messages from WhyDidYouRenderMe. Possibly a component in the code base is missing a useMemo.
Actual behavior
I will post a screenshot of the above examples console messages when using the WhyDidYouRenderMe tool.
Suggested solution? My suggested solution is possibly there is a missing useMemo that is missing which could possibly detect unnecessary rendering and prevent it from happening. In my code example which is not linked via here, I did add multiple useCallBacks and useMemos but nothing seem to remove these errors.
What version of React are you using? v16.13.0
What version of react-beautiful-dnd are you running? Master
What browser are you using? Chrome