Optimize Performance in react-beautiful-dnd with shouldComponentUpdate and PureComponent

Share this video with your friends

Send Tweet

We will look at allowing style updates to Draggable and Droppable components without re-rendering their children. We will do this by creating a new component <InnerList /> which conditionally block renders with React's shouldComponentUpdate lifecycle hook.

After this, you'll see how using React's PureComponent can be used to achieve the same optimization.