Refactor UNSAFE_componentWillMount into either constructor or compone…

…ntDidMount, leave notes for how decision was made.

app/panel/components/Blocking.jsx

@@ -26,23 +26,31 @@ import { updateSummaryBlockingCount } from '../utils/blocking';
 class Blocking extends React.Component {
 	static contextType = DynamicUIPortContext;
 
+	/**
+	 *	Refactoring UNSAFE_componentWillMount into Constructor
+	 *	Stats:
+	 *		Constructor runtime before refactor: 0.038ms
+	 *		Constructor + UNSAFE_componentWillMount runtime before refactor: 0.333ms
+	 *		Constructor runtime after refactor: 0.129ms
+	 *
+	 *	Notes:
+	 *		calling buildBlockingClasses and computeSiteNotScanned in the constructor takes 0.018ms.
+	 *
+	 *	Conclusion: Refactor using constructor as the added computation is minimal
+	 */
 	constructor(props) {
 		super(props);
 
-		this.state = {
-			blockingClasses: '',
-			disableBlocking: false,
-		};
-
+		// event bindings
 		this.handlePortMessage = this.handlePortMessage.bind(this);
-	}
 
-	/**
-	 * Lifecycle event
-	 */
-	UNSAFE_componentWillMount() {
-		this.updateBlockingClasses(this.props);
-		this.updateSiteNotScanned(this.props);
+		const classes = Blocking.buildBlockingClasses(this.props);
+		const disableBlocking = Blocking.computeSiteNotScanned(this.props);
+
+		this.state = {
+			blockingClasses: classes.join(' '),
+			disableBlocking
+		};
 	}
 
 	/**
@@ -223,31 +231,55 @@ class Blocking extends React.Component {
 	}
 
 	/**
-	* Set dynamic classes on .blocking-trackers. Set state.
+	* Build dynamic classes on .blocking-trackers. Return classes
 	* @param  {Object} props
 	*/
-	updateBlockingClasses(props) {
+	static buildBlockingClasses(props) {
 		const classes = [];
 
 		classes.push((props.toggle_individual_trackers) ? 'show-individual' : '');
 		classes.push((props.paused_blocking) ? 'paused' : '');
 		classes.push((props.sitePolicy) ? (props.sitePolicy === 2) ? 'trusted' : 'restricted' : '');
 
-		this.setState({ blockingClasses: classes.join(' ') });
+		return classes;
 	}
 
 	/**
-	* Disable controls for a site that cannot be scanned by Ghostery. Set state.
+	* Set dynamic classes on .blocking-trackers. Set state.
+	* @param  {Object} props
+	*/
+	updateBlockingClasses(props) {
+		const classes = Blocking.buildBlockingClasses(props);
+		const blockingClasses = classes.join(' ');
+
+		if (this.state.blockingClasses !== blockingClasses) {
+			this.setState({ blockingClasses });
+		}
+	}
+
+	/**
+	* Compute whether a site cannot be scanned by Ghostery.
 	* @param {Object}	props	nextProps
 	*/
-	updateSiteNotScanned(props) {
+	static computeSiteNotScanned(props) {
 		const { siteNotScanned, categories } = props;
 		const pageUrl = props.pageUrl || '';
 
 		if (siteNotScanned || !categories || pageUrl.search('http') === -1) {
-			this.setState({ disableBlocking: true });
-		} else {
-			this.setState({ disableBlocking: false });
+			return true;
+		}
+		return false;
+	}
+
+	/**
+	* Disable controls for a site that cannot be scanned by Ghostery. Set state.
+	* @param {Object}	props	nextProps
+	*/
+	updateSiteNotScanned(props) {
+		const disableBlocking = Blocking.computeSiteNotScanned(props);
+
+		if (this.state.disableBlocking !== disableBlocking) {
+			this.setState({ disableBlocking });
 		}
 	}
 

app/panel/components/Blocking/Tracker.jsx

@@ -29,6 +29,20 @@ import { renderKnownTrackerButtons, renderUnknownTrackerButtons } from './tracke
 class Tracker extends React.Component {
 	static contextType = ThemeContext;
 
+	/**
+	 *	Refactoring UNSAFE_componentWillMount into Constructor
+	 *	Stats:
+	 *		Constructor runtime before refactor: 0.037ms
+	 *		Constructor + UNSAFE_componentWillMount runtime before refactor: 0.415ms
+	 *		Constructor runtime after refactor: 0.215ms
+	 *
+	 *	Refactoring UNSAFE_componentWillMount into componentDidMount
+	 *	Stats:
+	 *		Constructor runtime after refactor: 0.020ms
+	 *		Constructor + componentDidMount runtime after refactor: 14.205ms
+	 *
+	 *	Conclusion: Refactor using componentDidMount
+	 */
 	constructor(props) {
 		super(props);
 		this.state = {
@@ -50,7 +64,7 @@ class Tracker extends React.Component {
 	/**
 	 * Lifecycle event.
 	 */
-	UNSAFE_componentWillMount() {
+	componentDidMount() {
 		this.updateTrackerClasses(this.props.tracker);
 	}
 

app/panel/components/Detail.jsx

@@ -22,22 +22,34 @@ import Rewards from '../containers/RewardsContainer';
  * @memberOf PanelClasses
  */
 class Detail extends React.Component {
+	/**
+	 *	Refactoring UNSAFE_componentWillMount into Constructor
+	 *	Stats:
+	 *		Constructor runtime before refactor: 0.085ms
+	 *		Constructor + UNSAFE_componentWillMount runtime before refactor: 0.345ms
+	 *		Constructor runtime after refactor: 0.163ms
+	 *
+	 *	Refactoring UNSAFE_componentWillMount into componentDidMount
+	 *	Stats:
+	 *		Constructor runtime with no componentDidMount: 0.163ms
+	 *		Constructor runtime with componentDidMount: 0.078ms
+	 *		Constructor + componentDidMount runtime: 8.313ms
+	 *	Notes:
+	 *		Noticably slower when refactoring using componentDidMount
+	 *
+	 *	Conclusion: Refactor using constructor
+	 */
 	constructor(props) {
 		super(props);
 
 		// event bindings
 		this.toggleExpanded = this.toggleExpanded.bind(this);
-	}
 
-	/**
-	 * Lifecycle event
-	 */
-	UNSAFE_componentWillMount() {
 		// set default tab / route based on how we got to this view:
 		// did the user click the Rewards icon? Or the donut number / Detailed View tab in the header?
-		const location = this.props.history.location.pathname;
+		const location = props.history.location.pathname;
 		if (!location.includes('rewards')) {
-			this.props.history.push('/detail/blocking');
+			props.history.push('/detail/blocking');
 		}
 	}
 

app/panel/components/Settings.jsx

@@ -32,6 +32,22 @@ import DynamicUIPortContext from '../contexts/DynamicUIPortContext';
 class Settings extends React.Component {
 	static contextType = DynamicUIPortContext;
 
+	/**
+	 *	Refactoring UNSAFE_componentWillMount into Constructor
+	 *	Stats:
+	 *		Constructor runtime before refactor: 0.145ms
+	 *		Constructor + UNSAFE_componentWillMount runtime before refactor: 0.330ms
+	 *		Constructor runtime after refactor: 0.144ms
+	 *
+	 *	Refactoring UNSAFE_componentWillMount into componentDidMount
+	 *	Stats:
+	 *		Constructor runtime with no componentDidMount: 0.123ms
+	 *		Constructor runtime with componentDidMount: 0.147ms
+	 *
+	 *	Notes: Negligible difference using componentDidMount.
+	 *
+	 *	Conclusion: Refactor using constructor to avoid re-render
+	 */
 	constructor(props) {
 		super(props);
 		this.state = {
@@ -45,15 +61,10 @@ class Settings extends React.Component {
 		this.showToast = this.showToast.bind(this);
 		this.hideToast = this.hideToast.bind(this);
 		this.handlePortMessage = this.handlePortMessage.bind(this);
-	}
 
-	/**
-	 * Lifecycle event. Default sub view is set here.
-	 */
-	UNSAFE_componentWillMount() {
 		// Do not redirect to the default if we are trying to access a specific other subview
-		if (this.props.history[this.props.history.length - 1] === '/settings') {
-			this.props.history.push('/settings/globalblocking');
+		if (props.history[props.history.length - 1] === '/settings') {
+			props.history.push('/settings/globalblocking');
 		}
 	}
 

app/panel/components/Settings/GeneralSettings.jsx

@@ -19,6 +19,23 @@ import moment from 'moment/min/moment-with-locales.min';
  * @memberOf SettingsComponents
  */
 class GeneralSettings extends React.Component {
+	/**
+	 *	Refactoring UNSAFE_componentWillMount into Constructor
+	 *	Stats:
+	 *		Constructor runtime before refactor: 0.026ms
+	 *		Constructor + UNSAFE_componentWillMount runtime before refactor: 2.410ms
+	 *		Constructor runtime after refactor: 1.631ms
+	 *
+	 *	Refactoring UNSAFE_componentWillMount into componentDidMount
+	 *	Stats:
+	 *		Constructor runtime with no componentDidMount: 0.208ms
+	 *		Constructor runtime with componentDidMount: 0.074ms
+	 *
+	 *	Notes:
+	 *		updateDbLastUpdated takes ~2ms to run the firt time and then 0.139ms subsequent times.
+	 *
+	 *	Conclusion: Refactor using componentDidMount as to not do computations in the constructor
+	 */
 	constructor(props) {
 		super(props);
 		this.state = {
@@ -32,7 +49,7 @@ class GeneralSettings extends React.Component {
 	/**
 	 * Lifecycle event.
 	 */
-	UNSAFE_componentWillMount() {
+	componentDidMount() {
 		this.updateDbLastUpdated(this.props);
 	}
 
@@ -56,7 +73,10 @@ class GeneralSettings extends React.Component {
 	 */
 	updateDbLastUpdated(props) {
 		moment.locale(props.language).toLowerCase().replace('_', '-');
-		this.setState({ dbLastUpdated: moment(props.bugs_last_updated).format('LLL') });
+		const dbLastUpdated = moment(props.bugs_last_updated).format('LLL');
+		if (this.state.dbLastUpdated !== dbLastUpdated) {
+			this.setState({ dbLastUpdated });
+		}
 	}
 
 	/**