Merge pull request #209 from seanyesmunt/should-component-update

Use React.PureComponent and add whyDidYouUpdate for dev env

package.json

@@ -58,6 +58,7 @@
   "devDependencies": {
     "electron": "^1.4.15",
     "electron-builder": "^11.7.0",
-    "electron-debug": "^1.1.0"
+    "electron-debug": "^1.1.0",
+    "why-did-you-update": "0.0.8"
   }
 }

ui/js/component/app/view.jsx

@@ -7,7 +7,7 @@ import UpgradeModal from "component/upgradeModal";
 import lbry from "lbry";
 import { Line } from "rc-progress";
 
-class App extends React.Component {
+class App extends React.PureComponent {
   componentWillMount() {
     document.addEventListener("unhandledError", event => {
       this.props.alertError(event.detail);

ui/js/component/auth.js

@@ -10,7 +10,7 @@ import { CreditAmount, Address } from "../component/common.js";
 import { getLocal, setLocal } from "../utils.js";
 import rewards from "../rewards";
 
-class SubmitEmailStage extends React.Component {
+class SubmitEmailStage extends React.PureComponent {
   constructor(props) {
     super(props);
 
@@ -94,7 +94,7 @@ class SubmitEmailStage extends React.Component {
   }
 }
 
-class ConfirmEmailStage extends React.Component {
+class ConfirmEmailStage extends React.PureComponent {
   constructor(props) {
     super(props);
 
@@ -191,7 +191,7 @@ class ConfirmEmailStage extends React.Component {
   }
 }
 
-class WelcomeStage extends React.Component {
+class WelcomeStage extends React.PureComponent {
   static propTypes = {
     endAuth: React.PropTypes.func,
   };
@@ -323,7 +323,7 @@ const PendingStage = props => {
   );
 };
 
-class CodeRequiredStage extends React.Component {
+class CodeRequiredStage extends React.PureComponent {
   constructor(props) {
     super(props);
 
@@ -417,7 +417,7 @@ class CodeRequiredStage extends React.Component {
   }
 }
 
-export class AuthOverlay extends React.Component {
+export class AuthOverlay extends React.PureComponent {
   constructor(props) {
     super(props);
 

ui/js/component/common.js

@@ -2,7 +2,7 @@ import React from "react";
 import lbry from "../lbry.js";
 
 //component/icon.js
-export class Icon extends React.Component {
+export class Icon extends React.PureComponent {
   static propTypes = {
     icon: React.PropTypes.string.isRequired,
     className: React.PropTypes.string,
@@ -21,7 +21,7 @@ export class Icon extends React.Component {
   }
 }
 
-export class TruncatedText extends React.Component {
+export class TruncatedText extends React.PureComponent {
   static propTypes = {
     lines: React.PropTypes.number,
   };
@@ -42,7 +42,7 @@ export class TruncatedText extends React.Component {
   }
 }
 
-export class BusyMessage extends React.Component {
+export class BusyMessage extends React.PureComponent {
   static propTypes = {
     message: React.PropTypes.string,
   };
@@ -54,13 +54,13 @@ export class BusyMessage extends React.Component {
   }
 }
 
-export class CurrencySymbol extends React.Component {
+export class CurrencySymbol extends React.PureComponent {
   render() {
     return <span>LBC</span>;
   }
 }
 
-export class CreditAmount extends React.Component {
+export class CreditAmount extends React.PureComponent {
   static propTypes = {
     amount: React.PropTypes.number.isRequired,
     precision: React.PropTypes.number,
@@ -116,7 +116,7 @@ let addressStyle = {
   fontFamily:
     '"Consolas", "Lucida Console", "Adobe Source Code Pro", monospace',
 };
-export class Address extends React.Component {
+export class Address extends React.PureComponent {
   static propTypes = {
     address: React.PropTypes.string,
   };
@@ -146,7 +146,7 @@ export class Address extends React.Component {
   }
 }
 
-export class Thumbnail extends React.Component {
+export class Thumbnail extends React.PureComponent {
   static propTypes = {
     src: React.PropTypes.string,
   };

ui/js/component/downloadingModal/view.jsx

@@ -3,7 +3,7 @@ import { Modal } from "component/modal";
 import { Line } from "rc-progress";
 import Link from "component/link";
 
-class DownloadingModal extends React.Component {
+class DownloadingModal extends React.PureComponent {
   render() {
     const {
       downloadProgress,

ui/js/component/errorModal/view.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import lbry from "lbry";
 import { ExpandableModal } from "component/modal";
 
-class ErrorModal extends React.Component {
+class ErrorModal extends React.PureComponent {
   render() {
     const { modal, closeModal, error } = this.props;
 

ui/js/component/file-selector.js

@@ -1,7 +1,7 @@
 import React from "react";
 
 const { remote } = require("electron");
-class FileSelector extends React.Component {
+class FileSelector extends React.PureComponent {
   static propTypes = {
     type: React.PropTypes.oneOf(["file", "directory"]),
     initPath: React.PropTypes.string,

ui/js/component/fileActions/view.jsx

@@ -7,7 +7,7 @@ import Link from "component/link";
 import { ToolTip } from "component/tooltip";
 import { DropDownMenu, DropDownMenuItem } from "component/menu";
 
-class FileActions extends React.Component {
+class FileActions extends React.PureComponent {
   constructor(props) {
     super(props);
     this.state = {

ui/js/component/fileCard/view.jsx

@@ -6,7 +6,7 @@ import { Thumbnail, TruncatedText, Icon } from "component/common";
 import FilePrice from "component/filePrice";
 import UriIndicator from "component/uriIndicator";
 
-class FileCard extends React.Component {
+class FileCard extends React.PureComponent {
   componentWillMount() {
     this.resolve(this.props);
   }

ui/js/component/fileList/view.jsx

@@ -8,7 +8,7 @@ import rewards from "rewards.js";
 import lbryio from "lbryio.js";
 import { BusyMessage, Thumbnail } from "component/common.js";
 
-class FileList extends React.Component {
+class FileList extends React.PureComponent {
   constructor(props) {
     super(props);
 

ui/js/component/fileListSearch/view.jsx

@@ -47,7 +47,7 @@ const FileListSearchResults = props => {
   return <div>{rows}</div>;
 };
 
-class FileListSearch extends React.Component {
+class FileListSearch extends React.PureComponent {
   componentWillMount() {
     this.props.search(this.props.query);
   }

ui/js/component/filePrice/view.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { CreditAmount } from "component/common";
 
-class FilePrice extends React.Component {
+class FilePrice extends React.PureComponent {
   componentWillMount() {
     this.fetchCost(this.props);
   }
@@ -11,13 +11,7 @@ class FilePrice extends React.Component {
   }
 
   fetchCost(props) {
-    const {
-      costInfo,
-      fetchCostInfo,
-      uri,
-      fetching,
-      claim,
-    } = props;
+    const { costInfo, fetchCostInfo, uri, fetching, claim } = props;
 
     if (costInfo === undefined && !fetching && claim) {
       fetchCostInfo(uri);

ui/js/component/fileTile/view.jsx

@@ -7,7 +7,7 @@ import { Thumbnail, TruncatedText } from "component/common.js";
 import FilePrice from "component/filePrice";
 import UriIndicator from "component/uriIndicator";
 
-class FileTile extends React.Component {
+class FileTile extends React.PureComponent {
   static SHOW_EMPTY_PUBLISH = "publish";
   static SHOW_EMPTY_PENDING = "pending";
 

ui/js/component/form.js

@@ -10,7 +10,7 @@ function formFieldId() {
   return "form-field-" + ++formFieldCounter;
 }
 
-export class FormField extends React.Component {
+export class FormField extends React.PureComponent {
   static propTypes = {
     type: React.PropTypes.string.isRequired,
     prefix: React.PropTypes.string,
@@ -164,7 +164,7 @@ export class FormField extends React.Component {
   }
 }
 
-export class FormRow extends React.Component {
+export class FormRow extends React.PureComponent {
   static propTypes = {
     label: React.PropTypes.oneOfType([
       React.PropTypes.string,

ui/js/component/load_screen.js

@@ -3,7 +3,7 @@ import lbry from "../lbry.js";
 import { BusyMessage, Icon } from "./common.js";
 import Link from "component/link";
 
-class LoadScreen extends React.Component {
+class LoadScreen extends React.PureComponent {
   static propTypes = {
     message: React.PropTypes.string.isRequired,
     details: React.PropTypes.string,

ui/js/component/menu.js

@@ -2,7 +2,7 @@ import React from "react";
 import { Icon } from "./common.js";
 import Link from "component/link";
 
-export class DropDownMenuItem extends React.Component {
+export class DropDownMenuItem extends React.PureComponent {
   static propTypes = {
     href: React.PropTypes.string,
     label: React.PropTypes.string,
@@ -32,7 +32,7 @@ export class DropDownMenuItem extends React.Component {
   }
 }
 
-export class DropDownMenu extends React.Component {
+export class DropDownMenu extends React.PureComponent {
   constructor(props) {
     super(props);
 

ui/js/component/modal-page.js

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactModal from "react-modal";
 
-export class ModalPage extends React.Component {
+export class ModalPage extends React.PureComponent {
   render() {
     return (
       <ReactModal

ui/js/component/modal.js

@@ -3,7 +3,7 @@ import ReactModal from "react-modal";
 import Link from "component/link";
 import app from "../app.js";
 
-export class Modal extends React.Component {
+export class Modal extends React.PureComponent {
   static propTypes = {
     type: React.PropTypes.oneOf(["alert", "confirm", "custom"]),
     overlay: React.PropTypes.bool,
@@ -64,7 +64,7 @@ export class Modal extends React.Component {
   }
 }
 
-export class ExpandableModal extends React.Component {
+export class ExpandableModal extends React.PureComponent {
   static propTypes = {
     expandButtonLabel: React.PropTypes.string,
     extraContent: React.PropTypes.element,

ui/js/component/notice.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-export class Notice extends React.Component {
+export class Notice extends React.PureComponent {
   static propTypes = {
     isError: React.PropTypes.bool,
   };

ui/js/component/reward-link.js

@@ -5,7 +5,7 @@ import Modal from "component/modal";
 import rewards from "rewards";
 import Link from "component/link";
 
-export class RewardLink extends React.Component {
+export class RewardLink extends React.PureComponent {
   static propTypes = {
     type: React.PropTypes.string.isRequired,
     claimed: React.PropTypes.bool,

ui/js/component/snackBar/view.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Link from "component/link";
 
-class SnackBar extends React.Component {
+class SnackBar extends React.PureComponent {
   constructor(props) {
     super(props);
 

ui/js/component/splash.js

@@ -2,7 +2,7 @@ import React from "react";
 import lbry from "../lbry.js";
 import LoadScreen from "./load_screen.js";
 
-export class SplashScreen extends React.Component {
+export class SplashScreen extends React.PureComponent {
   static propTypes = {
     message: React.PropTypes.string,
     onLoadDone: React.PropTypes.func,

ui/js/component/tooltip.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-export class ToolTip extends React.Component {
+export class ToolTip extends React.PureComponent {
   static propTypes = {
     body: React.PropTypes.string.isRequired,
     label: React.PropTypes.string.isRequired,

ui/js/component/transactionList/view.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Address, BusyMessage, CreditAmount } from "component/common";
 
-class TransactionList extends React.Component {
+class TransactionList extends React.PureComponent {
   componentWillMount() {
     this.props.fetchTransactions();
   }

ui/js/component/upgradeModal/view.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Modal } from "component/modal";
 import { downloadUpgrade, skipUpgrade } from "actions/app";
 
-class UpgradeModal extends React.Component {
+class UpgradeModal extends React.PureComponent {
   render() {
     const { downloadUpgrade, skipUpgrade } = this.props;
 

ui/js/component/uriIndicator/view.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Icon } from "component/common";
 
-class UriIndicator extends React.Component {
+class UriIndicator extends React.PureComponent {
   componentWillMount() {
     this.resolve(this.props);
   }

ui/js/component/video/view.jsx

@@ -4,7 +4,7 @@ import VideoPlayer from "./internal/player";
 import VideoPlayButton from "./internal/play-button";
 import LoadingScreen from "./internal/loading-screen";
 
-class Video extends React.Component {
+class Video extends React.PureComponent {
   constructor(props) {
     super(props);
     this.state = { isPlaying: false };

ui/js/component/walletAddress/view.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import Link from "component/link";
 import { Address } from "component/common";
 
-class WalletAddress extends React.Component {
+class WalletAddress extends React.PureComponent {
   componentWillMount() {
     this.props.checkAddressIsMine(this.props.receiveAddress);
   }

ui/js/main.js

@@ -1,94 +1,108 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import lbry from './lbry.js';
-import lbryio from './lbryio.js';
-import lighthouse from './lighthouse.js';
-import App from 'component/app/index.js';
-import SnackBar from 'component/snackBar';
-import { Provider } from 'react-redux';
-import store from 'store.js';
-import SplashScreen from 'component/splash.js';
-import { AuthOverlay } from 'component/auth.js';
-import { doChangePath, doNavigate, doDaemonReady } from 'actions/app';
-import { doFetchDaemonSettings } from 'actions/settings';
-import { doFileList } from 'actions/file_info';
-import { toQueryString } from 'util/query_params';
+import React from "react";
+import ReactDOM from "react-dom";
+import whyDidYouUpdate from "why-did-you-update";
+import lbry from "./lbry.js";
+import lbryio from "./lbryio.js";
+import lighthouse from "./lighthouse.js";
+import App from "component/app/index.js";
+import SnackBar from "component/snackBar";
+import { Provider } from "react-redux";
+import store from "store.js";
+import SplashScreen from "component/splash.js";
+import { AuthOverlay } from "component/auth.js";
+import { doChangePath, doNavigate, doDaemonReady } from "actions/app";
+import { doFetchDaemonSettings } from "actions/settings";
+import { doFileList } from "actions/file_info";
+import { toQueryString } from "util/query_params";
 
-const { remote, ipcRenderer, shell } = require('electron');
-const contextMenu = remote.require('./menu/context-menu');
-const app = require('./app');
+const env = ENV;
+const { remote, ipcRenderer, shell } = require("electron");
+const contextMenu = remote.require("./menu/context-menu");
+const app = require("./app");
 
 lbry.showMenuIfNeeded();
 
-window.addEventListener('contextmenu', event => {
-	contextMenu.showContextMenu(
-		remote.getCurrentWindow(),
-		event.x,
-		event.y,
-		lbry.getClientSetting('showDeveloperMenu')
-	);
-	event.preventDefault();
+window.addEventListener("contextmenu", event => {
+  contextMenu.showContextMenu(
+    remote.getCurrentWindow(),
+    event.x,
+    event.y,
+    lbry.getClientSetting("showDeveloperMenu")
+  );
+  event.preventDefault();
 });
 
-window.addEventListener('popstate', (event, param) => {
-	const params = event.state;
-	const pathParts = document.location.pathname.split('/');
-	const route = '/' + pathParts[pathParts.length - 1];
-	const queryString = toQueryString(params);
+window.addEventListener("popstate", (event, param) => {
+  const params = event.state;
+  const pathParts = document.location.pathname.split("/");
+  const route = "/" + pathParts[pathParts.length - 1];
+  const queryString = toQueryString(params);
 
-	let action;
-	if (route.match(/html$/)) {
-		action = doChangePath('/discover');
-	} else {
-		action = doChangePath(`${route}?${queryString}`);
-	}
+  let action;
+  if (route.match(/html$/)) {
+    action = doChangePath("/discover");
+  } else {
+    action = doChangePath(`${route}?${queryString}`);
+  }
 
-	app.store.dispatch(action);
+  app.store.dispatch(action);
 });
 
-ipcRenderer.on('open-uri-requested', (event, uri) => {
-	if (uri && uri.startsWith('lbry://')) {
-		app.store.dispatch(doNavigate('/show', { uri }));
-	}
+ipcRenderer.on("open-uri-requested", (event, uri) => {
+  if (uri && uri.startsWith("lbry://")) {
+    app.store.dispatch(doNavigate("/show", { uri }));
+  }
 });
 
-document.addEventListener('click', event => {
-	var target = event.target;
-	while (target && target !== document) {
-		if (target.matches('a[href^="http"]')) {
-			event.preventDefault();
-			shell.openExternal(target.href);
-			return;
-		}
-		target = target.parentNode;
-	}
+document.addEventListener("click", event => {
+  var target = event.target;
+  while (target && target !== document) {
+    if (target.matches('a[href^="http"]')) {
+      event.preventDefault();
+      shell.openExternal(target.href);
+      return;
+    }
+    target = target.parentNode;
+  }
 });
 
 const initialState = app.store.getState();
 
+if (env === "development") {
+  /*
+		https://github.com/garbles/why-did-you-update
+		"A function that monkey patches React and notifies you in the console when
+		potentially unnecessary re-renders occur."
+
+		Just checks if props change between updates. Can be fixed by manually
+		adding a check in shouldComponentUpdate or using React.PureComponent
+	*/
+  whyDidYouUpdate(React);
+}
+
 var init = function() {
-	function onDaemonReady() {
-		window.sessionStorage.setItem('loaded', 'y'); //once we've made it here once per session, we don't need to show splash again
-		const actions = [];
+  function onDaemonReady() {
+    window.sessionStorage.setItem("loaded", "y"); //once we've made it here once per session, we don't need to show splash again
+    const actions = [];
 
-		app.store.dispatch(doDaemonReady());
-		app.store.dispatch(doChangePath('/discover'));
-		app.store.dispatch(doFetchDaemonSettings());
-		app.store.dispatch(doFileList());
+    app.store.dispatch(doDaemonReady());
+    app.store.dispatch(doChangePath("/discover"));
+    app.store.dispatch(doFetchDaemonSettings());
+    app.store.dispatch(doFileList());
 
-		ReactDOM.render(
-			<Provider store={store}>
-				<div>{lbryio.enabled ? <AuthOverlay /> : ''}<App /><SnackBar /></div>
-			</Provider>,
-			canvas
-		);
-	}
+    ReactDOM.render(
+      <Provider store={store}>
+        <div>{lbryio.enabled ? <AuthOverlay /> : ""}<App /><SnackBar /></div>
+      </Provider>,
+      canvas
+    );
+  }
 
-	if (window.sessionStorage.getItem('loaded') == 'y') {
-		onDaemonReady();
-	} else {
-		ReactDOM.render(<SplashScreen onLoadDone={onDaemonReady} />, canvas);
-	}
+  if (window.sessionStorage.getItem("loaded") == "y") {
+    onDaemonReady();
+  } else {
+    ReactDOM.render(<SplashScreen onLoadDone={onDaemonReady} />, canvas);
+  }
 };
 
 init();

ui/js/page/channel/view.jsx

@@ -3,7 +3,7 @@ import lbryuri from "lbryuri";
 import { BusyMessage } from "component/common";
 import FileTile from "component/fileTile";
 
-class ChannelPage extends React.Component {
+class ChannelPage extends React.PureComponent {
   componentDidMount() {
     this.fetchClaims(this.props);
   }

ui/js/page/developer.js

@@ -6,7 +6,7 @@ import Link from "../component/link";
 const fs = require("fs");
 const { ipcRenderer } = require("electron");
 
-class DeveloperPage extends React.Component {
+class DeveloperPage extends React.PureComponent {
   constructor(props) {
     super(props);
 

ui/js/page/discover/view.jsx

@@ -37,7 +37,7 @@ const FeaturedCategory = props => {
   );
 };
 
-class DiscoverPage extends React.Component {
+class DiscoverPage extends React.PureComponent {
   componentWillMount() {
     this.props.fetchFeaturedUris();
   }

ui/js/page/fileListDownloaded/view.jsx

@@ -10,7 +10,7 @@ import { BusyMessage, Thumbnail } from "component/common.js";
 import FileList from "component/fileList";
 import SubHeader from "component/subHeader";
 
-class FileListDownloaded extends React.Component {
+class FileListDownloaded extends React.PureComponent {
   componentWillMount() {
     this.props.fetchFileInfosDownloaded();
   }

ui/js/page/fileListPublished/view.jsx

@@ -10,7 +10,7 @@ import { BusyMessage, Thumbnail } from "component/common.js";
 import FileList from "component/fileList";
 import SubHeader from "component/subHeader";
 
-class FileListPublished extends React.Component {
+class FileListPublished extends React.PureComponent {
   componentWillMount() {
     this.props.fetchFileListPublished();
   }

ui/js/page/filePage/view.jsx

@@ -33,7 +33,7 @@ const FormatItem = props => {
   );
 };
 
-class FilePage extends React.Component {
+class FilePage extends React.PureComponent {
   componentDidMount() {
     this.fetchFileInfo(this.props);
     this.fetchCostInfo(this.props);

ui/js/page/help/view.jsx

@@ -5,7 +5,7 @@ import Link from "component/link";
 import SubHeader from "component/subHeader";
 import { BusyMessage } from "component/common";
 
-class HelpPage extends React.Component {
+class HelpPage extends React.PureComponent {
   constructor(props) {
     super(props);
 

ui/js/page/publish/view.jsx

@@ -6,7 +6,7 @@ import Link from "component/link";
 import rewards from "rewards";
 import Modal from "component/modal";
 
-class PublishPage extends React.Component {
+class PublishPage extends React.PureComponent {
   constructor(props) {
     super(props);
 

ui/js/page/report.js

@@ -4,7 +4,7 @@ import { FormRow } from "component/form";
 import Modal from "../component/modal.js";
 import lbry from "../lbry.js";
 
-class ReportPage extends React.Component {
+class ReportPage extends React.PureComponent {
   constructor(props) {
     super(props);
 

ui/js/page/rewards.js

@@ -4,7 +4,7 @@ import { CreditAmount, Icon } from "component/common.js";
 import SubHeader from "component/subHeader";
 import { RewardLink } from "component/reward-link";
 
-export class RewardTile extends React.Component {
+export class RewardTile extends React.PureComponent {
   static propTypes = {
     type: React.PropTypes.string.isRequired,
     title: React.PropTypes.string.isRequired,
@@ -34,7 +34,7 @@ export class RewardTile extends React.Component {
   }
 }
 
-export class RewardsPage extends React.Component {
+export class RewardsPage extends React.PureComponent {
   constructor(props) {
     super(props);
 

ui/js/page/search/view.jsx

@@ -5,7 +5,7 @@ import FileListSearch from "component/fileListSearch";
 import { ToolTip } from "component/tooltip.js";
 import { BusyMessage } from "component/common.js";
 
-class SearchPage extends React.Component {
+class SearchPage extends React.PureComponent {
   render() {
     const { query } = this.props;
 

ui/js/page/settings/view.jsx

@@ -3,7 +3,7 @@ import { FormField, FormRow } from "component/form.js";
 import SubHeader from "component/subHeader";
 import lbry from "lbry.js";
 
-class SettingsPage extends React.Component {
+class SettingsPage extends React.PureComponent {
   constructor(props) {
     super(props);
 

ui/js/page/showPage/view.jsx

@@ -4,7 +4,7 @@ import { BusyMessage } from "component/common";
 import ChannelPage from "page/channel";
 import FilePage from "page/filePage";
 
-class ShowPage extends React.Component {
+class ShowPage extends React.PureComponent {
   componentWillMount() {
     this.resolve(this.props);
   }

ui/js/page/start.js

@@ -1,7 +1,7 @@
 import React from "react";
 import lbry from "../lbry.js";
 
-class StartPage extends React.Component {
+class StartPage extends React.PureComponent {
   componentWillMount() {
     lbry.stop();
   }