Develop branch - should component update refactor (#182)

* Refactor should component updatre for transcript editor

* Refactor should component updatre for PlayerControls

* Refactor should component updatre for TimeBox

* Refactor should component update for ProgressBar

* Refactor should component update for TimedTextEditor

* Refactor should component update for Header

Author: Pietro

packages/components/media-player/src/PlayerControls/TimeBox.js

@@ -1,19 +1,16 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import style from './index.module.css';
 
 class TimeBox extends React.Component {
 
   shouldComponentUpdate(nextProps) {
-    if (nextProps.currentTime !== this.props.currentTime) {
-      return true;
-    }
-    if (nextProps.duration !== this.props.duration) {
+    if (nextProps !== this.props) {
       return true;
     }
 
     return false;
   }
+
   // as separate function above render for performance
   handleClick = (e) => {
     this.props.promptSetCurrentTime(e);

packages/components/media-player/src/PlayerControls/index.js

@@ -21,25 +21,8 @@ import TimeBox from './TimeBox.js';
 
 class PlayerControls extends React.Component {
 
-  shouldComponentUpdate(nextProps) {
-    if (nextProps.currentTime !== this.props.currentTime) {
-      return true;
-    }
-    if (nextProps.duration !== this.props.duration) {
-      return true;
-    }
-
-    if (nextProps.playbackRate !== this.props.playbackRate) {
-      return true;
-    }
-
-    if (nextProps.isPlaying !== this.props.isPlaying) {
-      return true;
-    }
-
-    if (nextProps.isMute !== this.props.isMute) {
-      return true;
-    }
+  shouldComponentUpdate = (nextProps) => {
+    if (nextProps !== this.props) return true;
 
     return false;
   }

packages/components/media-player/src/ProgressBar.js

@@ -7,15 +7,7 @@ class ProgressBar extends React.Component {
 
   // performance optimization
   shouldComponentUpdate = (nextProps) => {
-    if (nextProps.buttonClick !== this.props.buttonClick) {
-      return true;
-    }
-
-    if (nextProps.value !== this.props.value) {
-      return true;
-    }
-
-    if (nextProps.max !== this.props.max) {
+    if (nextProps !== this.props) {
       return true;
     }
 

packages/components/timed-text-editor/index.js

@@ -37,46 +37,9 @@ class TimedTextEditor extends React.Component {
   }
 
   shouldComponentUpdate = (nextProps, nextState) => {
-    if (nextProps.transcriptData !== this.props.transcriptData) {
-      return true;
-    }
-
-    if (nextProps.isEditable !== this.props.isEditable) {
-      return true;
-    }
-
-    if (nextProps.timecodeOffset !== this.props.timecodeOffset) {
-      return true;
-    }
-
-    if (nextProps.showSpeakers !== this.props.showSpeakers) {
-      return true;
-    }
-
-    if (nextProps.showTimecodes !== this.props.showTimecodes) {
-      return true;
-    }
+    if (nextProps !== this.props) return true;
 
-    if (nextProps.fileName !== this.props.fileName) {
-      return true;
-    }
-
-    // updating TimedTextEditor on every currentTime causes re-renders
-    if (nextProps.currentTime !== this.props.currentTime ) {
-      return true;
-    }
-
-    if (nextState.editorState !== this.state.editorState ) {
-      return true;
-    }
-
-    if (nextProps.spellCheck !== this.props.spellCheck) {
-      return true;
-    }
-
-    if (nextProps.isPauseWhileTypingOn !== this.props.isPauseWhileTypingOn) {
-      return true;
-    }
+    if (nextState !== this.state ) return true;
 
     return false;
   }

packages/components/transcript-editor/index.js

@@ -65,63 +65,9 @@ class TranscriptEditor extends React.Component {
 
   // performance optimization
   shouldComponentUpdate = (nextProps, nextState) => {
+    if (nextProps.mediaUrl !== this.props.mediaUrl) return true;
 
-    if (nextState.transcriptData !== this.state.transcriptData) {
-      return true;
-    }
-
-    if (nextProps.mediaUrl !== this.props.mediaUrl) {
-      return true;
-    }
-
-    if (nextState.currentTime !== this.state.currentTime) {
-      return true;
-    }
-
-    if (nextState.isScrollIntoViewOn !== this.state.isScrollIntoViewOn) {
-      return true;
-    }
-
-    if (nextState.showSettings !== this.state.showSettings) {
-      return true;
-    }
-
-    if (nextState.showShortcuts !== this.state.showShortcuts) {
-      return true;
-    }
-    if (nextState.showExportOptions !== this.state.showExportOptions) {
-      return true;
-    }
-
-    if (nextState.isPauseWhileTypingOn !== this.state.isPauseWhileTypingOn) {
-      return true;
-    }
-
-    if (nextState.rollBackValueInSeconds !== this.state.rollBackValueInSeconds) {
-      return true;
-    }
-
-    if (nextState.timecodeOffset !== this.state.timecodeOffset) {
-      return true;
-    }
-
-    if (nextState.showTimecodes !== this.state.showTimecodes) {
-      return true;
-    }
-
-    if (nextState.showSpeakers !== this.state.showSpeakers) {
-      return true;
-    }
-
-    if (nextState.previewIsDisplayed !== this.state.previewIsDisplayed) {
-      return true;
-    }
-
-    if (nextState.mediaDuration !== this.state.mediaDuration) {
-      return true;
-    }
-
-    return false;
+    return nextState !== this.state;
   }
 
   componentDidUpdate(prevProps, prevState) {

packages/components/transcript-editor/src/Header.js

@@ -12,16 +12,7 @@ class Header extends React.Component {
 
   // to avoid unnecessary re-renders
   shouldComponentUpdate(nextProps) {
-    if (nextProps.showSettings !== this.props.showSettings) {
-      return true;
-    }
-    if (nextProps.showShortcuts !== this.props.showShortcuts) {
-      return true;
-    }
-
-    if (nextProps.mediaControls !== this.props.mediaControls) {
-      return true;
-    }
+    if (nextProps !== this.props) return true;
 
     return false;
   }