From 04b1678c7f07d39c58685a14907a724eaad5714d Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Wed, 14 Mar 2018 15:06:13 +0000 Subject: [PATCH 1/2] Implement a simple shouldComponentUpdate for DNDRoomTile because otherwise beautiful dnd spends a lot of time requesting animation frames pointlessly. --- src/components/views/rooms/DNDRoomTile.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/components/views/rooms/DNDRoomTile.js b/src/components/views/rooms/DNDRoomTile.js index b8f8b402..ce867ef3 100644 --- a/src/components/views/rooms/DNDRoomTile.js +++ b/src/components/views/rooms/DNDRoomTile.js @@ -33,6 +33,17 @@ export default class DNDRoomTile extends React.Component { }); } + shouldComponentUpdate(nextProps, nextState) { + // Do a shallow comparison of the props that we pass through (there is no + // state to check). + // NB: We might want to ignore changes to index in future if reordering + // occurs (all indices of all tiles in the sublist will change). + if (Object.keys(nextProps).some((k) => nextProps[k] !== this.props[k])) { + return true; + } + return false; + } + render() { const props = this.props; From fd8b36eb1cc9c9c24a10c1a21781d02cbade3480 Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Thu, 15 Mar 2018 13:09:29 +0000 Subject: [PATCH 2/2] Use React.PureComponent instead of reimplementing it --- src/components/views/rooms/DNDRoomTile.js | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) diff --git a/src/components/views/rooms/DNDRoomTile.js b/src/components/views/rooms/DNDRoomTile.js index ce867ef3..d32ecbbb 100644 --- a/src/components/views/rooms/DNDRoomTile.js +++ b/src/components/views/rooms/DNDRoomTile.js @@ -20,7 +20,7 @@ import RoomTile from 'matrix-react-sdk/lib/components/views/rooms/RoomTile'; import classNames from 'classnames'; -export default class DNDRoomTile extends React.Component { +export default class DNDRoomTile extends React.PureComponent { constructor() { super(); this.getClassName = this.getClassName.bind(this); @@ -33,17 +33,6 @@ export default class DNDRoomTile extends React.Component { }); } - shouldComponentUpdate(nextProps, nextState) { - // Do a shallow comparison of the props that we pass through (there is no - // state to check). - // NB: We might want to ignore changes to index in future if reordering - // occurs (all indices of all tiles in the sublist will change). - if (Object.keys(nextProps).some((k) => nextProps[k] !== this.props[k])) { - return true; - } - return false; - } - render() { const props = this.props;