Task: Adding react-fast-compare to optimise renders

bbc · Sep 18, 2019 · b6f29c3 · b6f29c3
1 parent 8723a0b
commit b6f29c3
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 8 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -54,6 +54,7 @@
     "mousetrap": "1.5.2",
     "number-to-words": "^1.2.4",
     "prop-types": "^15.6.2",
+    "react-fast-compare": "^2.0.4",
     "react-keyboard-shortcuts": "^1.1.3",
     "react-simple-tooltip": "^2.3.3",
     "sbd": "^1.0.15",

diff --git a/packages/components/media-player/src/PlaybackRate.js b/packages/components/media-player/src/PlaybackRate.js
@@ -1,13 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import isEqual from 'react-fast-compare';
+
 import Select from './Select';
 
 import style from './PlayerControls/index.module.scss';
 
 class PlaybackRate extends React.Component {
 
   shouldComponentUpdate = (nextProps) => {
-    return nextProps.playbackRate !== this.props.playbackRate;
+    return !isEqual(this.props, nextProps);
   }
 
   render() {

diff --git a/packages/components/media-player/src/PlayerControls/TimeBox.js b/packages/components/media-player/src/PlayerControls/TimeBox.js
@@ -1,11 +1,11 @@
 import React from 'react';
+import isEqual from 'react-fast-compare';
 
 import style from './index.module.scss';
 
 class TimeBox extends React.Component {
-
   shouldComponentUpdate = (nextProps) => {
-    return nextProps !== this.props;
+    return !isEqual(this.props, nextProps);
   }
 
   handleClick = (e) => {

diff --git a/packages/components/media-player/src/PlayerControls/index.js b/packages/components/media-player/src/PlayerControls/index.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import isEqual from 'react-fast-compare';
 
 import {
   faSave,
@@ -22,7 +23,7 @@ import style from './index.module.scss';
 class PlayerControls extends React.Component {
 
   shouldComponentUpdate = (nextProps) => {
-    return nextProps !== this.props;
+    return !isEqual(this.props, nextProps);
   }
 
   setIntervalHelperBackward = () => {

diff --git a/packages/components/media-player/src/ProgressBar.js b/packages/components/media-player/src/ProgressBar.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import isEqual from 'react-fast-compare';
 
 import style from './ProgressBar.module.scss';
 
 class ProgressBar extends React.Component {
-
   shouldComponentUpdate = (nextProps) => {
-    return nextProps !== this.props;
+    return !isEqual(this.props, nextProps);
   }
 
   handleOnChange = (e) => {