✨using shouldComponentUpdate from React 16.3.x (#147)

* ✨using shouldComponentUpdate from React 16.3.x

* 🐞 Fix shouldComponentUpdatePrototype returns

* Improve comments

* 🐞 Use appropriate lifecycle method for PureComponents

* 🐞 Fix ReactNCShouldComponentUpdate Typo

* Cleanup shouldComponentUpdate for Decorator

Co-authored-by: Umberto Ghio <ughio@siapcn.it>

Author: 2 people

src/decorator.ts

@@ -21,6 +21,9 @@ const isComponentDidMount = false;
 const isComponentDidUpdate = false;
 const isSetGlobalCallback = false;
 
+const [ rVerMaj, rVerMin ] = version.split('.').map((v): number => parseInt(v));
+const isUsingOldReact = rVerMaj < 16 || (rVerMaj === 16 && rVerMin < 3);
+
 // Get the name of a Component.
 const componentName = <
   P extends {} = {},
@@ -44,7 +47,7 @@ export default function ReactN<
   class DecoratedReactNComponent extends DecoratedComponent {
 
     public static displayName: string =
-      `${componentName(DecoratedComponent)}-ReactN`;
+    `${componentName(DecoratedComponent)}-ReactN`;
 
     public constructor(props: Readonly<P>, context?: any) {
       super(props, context);
@@ -58,23 +61,21 @@ export default function ReactN<
       }
     }
 
-    public UNSAFE_componentWillUpdate(...args: [ P, S, any ]): void {
-      const [ rVerMaj, rVerMin ] = version.split('.').map((v): number => parseInt(v));
-      if (rVerMaj > 16 || (rVerMaj === 16 && rVerMin >= 3)) {
+    public componentWillUpdate(...args: [ P, S, any ]): void {
+      if (isUsingOldReact) {
         ReactNComponentWillUpdate(this);
       }
-      if (super.UNSAFE_componentWillUpdate) {
-        super.UNSAFE_componentWillUpdate(...args);
+      if (super.componentWillUpdate) {
+        super.componentWillUpdate(...args);
       }
     }
 
-    public componentWillUpdate(...args: [ P, S, any ]): void {
-      const [ rVerMaj, rVerMin ] = version.split('.').map((v): number => parseInt(v));
-      if (rVerMaj < 16 || (rVerMaj === 16 && rVerMin < 3)) {
+    public UNSAFE_componentWillUpdate(...args: [ P, S, any ]): void {
+      if (!isUsingOldReact) {
         ReactNComponentWillUpdate(this);
       }
-      if (super.componentWillUpdate) {
-        super.componentWillUpdate(...args);
+      if (super.UNSAFE_componentWillUpdate) {
+        super.UNSAFE_componentWillUpdate(...args);
       }
     }
 

src/methods.ts

@@ -54,7 +54,7 @@ export function ReactNComponentWillUnmount<G extends {} = State>(
 
 
 
-// this.componentWillUnmount
+// this.componentWillUpdate
 export function ReactNComponentWillUpdate<G extends {} = State>(
   that: ReactNComponent<any, any, G> | ReactNPureComponent<any, any, G>,
 ): void {
@@ -63,6 +63,14 @@ export function ReactNComponentWillUpdate<G extends {} = State>(
   getGlobalStateManager<G>().removePropertyListener(that._globalCallback);
 }
 
+// this.shouldComponentUpdate
+export function ReactNShouldComponentUpdate<G extends {} = State>(
+  that: ReactNComponent<any, any, G> | ReactNPureComponent<any, any, G>,
+): void {
+
+  // No longer re-render this component on global state change.
+  getGlobalStateManager<G>().removePropertyListener(that._globalCallback);
+}
 
 
 // this.dispatch

src/utils/bind-lifecycle-methods.ts

@@ -4,6 +4,7 @@ import React = require('react');
 import {
   ReactNComponentWillUnmount,
   ReactNComponentWillUpdate,
+  ReactNShouldComponentUpdate,
 } from '../methods';
 import {
   // componentWillUnmountInstance,
@@ -13,6 +14,10 @@ import {
   // componentWillUpdateInstance,
   componentWillUpdatePrototype,
 } from './component-will-update';
+import {
+  // shouldComponentUpdateInstance,
+  shouldComponentUpdatePrototype,
+} from './should-component-update';
 
 
 
@@ -38,21 +43,45 @@ export default function bindLifecycleMethods<
     };
   }
 
+  const [ rVerMaj, rVerMin ] = React.version.split('.').map((v): number => parseInt(v));
+  const isPureComponent = React.PureComponent && (that instanceof React.PureComponent);
+  const isUsingOldReact = rVerMaj < 16 || (rVerMaj === 16 && rVerMin < 3);
+
   if (
     // !componentWillUpdateInstance(that) &&
-    !componentWillUpdatePrototype(that)
+    isUsingOldReact && !componentWillUpdatePrototype(that)
   ) {
-    const [ rVerMaj, rVerMin ] = React.version.split('.').map((v): number => parseInt(v));
-    if (rVerMaj > 16 || (rVerMaj === 16 && rVerMin >= 3)) {
-      that.UNSAFE_componentWillUpdate = (): void => {
-        ReactNComponentWillUpdate(that);
-      };
-    } else {
-      that.componentWillUpdate = (): void => {
-        ReactNComponentWillUpdate(that);
-      };
-    }
+    // This will fire if using an Old React Version
     // Warning: If componentWillUpdate is defined in the constructor (or as an
     //   arrow function), this will be overridden.
+    that.componentWillUpdate = (): void => {
+      ReactNComponentWillUpdate(that);
+    };
+  }
+
+  if (
+    // !componentWillUpdateInstance(that) &&
+    !isUsingOldReact && isPureComponent && !componentWillUpdatePrototype(that)
+  ) {
+    // This will fire if using New React Versions and component is Pure.
+    // TODO: Firgure out a way to move out UNSAFE methods as can't use shouldComponentUpdate on Pure Components.
+    // Warning: If UNSAFE_componentWillUpdate is defined in the constructor (or as an
+    //   arrow function), this will be overridden.
+    that.UNSAFE_componentWillUpdate = (): void => {
+      ReactNComponentWillUpdate(that);
+    };
+  }
+
+  if (
+    // !shouldComponentUpdateInstance(that) &&
+    !isUsingOldReact && !isPureComponent && !shouldComponentUpdatePrototype(that)
+  ) {
+    // This will fire if using New React Versions and regular components
+    // Warning: If shouldComponentUpdate is defined in the constructor (or as an
+    //   arrow function), this will be overridden.
+    that.shouldComponentUpdate = (): boolean => {
+      ReactNShouldComponentUpdate(that);
+      return true; // If shouldComponentUpdate is not defined it defaults to true
+    };
   }
 };

src/utils/component-will-update.ts

@@ -1,7 +1,7 @@
 import { Reducers, State } from '../../default';
 import { ReactNComponent, ReactNPureComponent } from '../../types/component';
 import { ReactNComponentWillUpdate } from '../methods';
-
+import React = require('react');
 
 
 /*
@@ -46,14 +46,9 @@ export const componentWillUpdatePrototype = <
 ): boolean => {
   const proto: ReactNComponent | ReactNPureComponent =
     Object.getPrototypeOf(that);
-  if (Object.prototype.hasOwnProperty.call(proto, 'UNSAFE_componentWillUpdate')) {
-    that.UNSAFE_componentWillUpdate = (...args: [ P, S, any ]): void => {
-      ReactNComponentWillUpdate(that);
-      proto.UNSAFE_componentWillUpdate.bind(that)(...args);
-    };
-    return true;
-  }
-  if (Object.prototype.hasOwnProperty.call(proto, 'componentWillUpdate')) {
+  const [ rVerMaj, rVerMin ] = React.version.split('.').map((v): number => parseInt(v));
+  if (Object.prototype.hasOwnProperty.call(proto, 'componentWillUpdate')
+    && ((rVerMaj < 16 || (rVerMaj === 16 && rVerMin < 3)))) { // Using old react version
     that.componentWillUpdate = (...args: [ P, S, any ]): void => {
       ReactNComponentWillUpdate(that);
       proto.componentWillUpdate.bind(that)(...args);

src/utils/should-component-update.ts

@@ -0,0 +1,60 @@
+import { Reducers, State } from '../../default';
+import { ReactNComponent, ReactNPureComponent } from '../../types/component';
+import { ReactNShouldComponentUpdate } from '../methods';
+import React = require('react');
+
+
+/*
+type ShouldComponentUpdate<P extends {} = {}, S extends {} = {}> =
+  (nextProps: P, nextState: S, context: any) => void;
+*/
+
+
+
+// this.shouldComponentUpdate on instance
+/*
+export const shouldComponentUpdateInstance = <
+  P extends {} = {},
+  S extends {} = {},
+  G extends {} = State,
+  R extends {} = Reducers,
+  SS = any,
+>(
+  that: ReactNComponent<P, S, G, R, SS> | ReactNPureComponent<P, S, G, R, SS>,
+): boolean => {
+  if (Object.prototype.hasOwnProperty.call(that, 'shouldComponentUpdate')) {
+    const instanceCwu: ShouldComponentUpdate<P, S> = that.shouldComponentUpdate;
+    that.shouldComponentUpdate = (...args: [ P, S, any ]): void => {
+      ReactNShouldComponentUpdate(that);
+      instanceCwu(...args);
+    };
+    return true;
+  }
+  return false;
+};
+*/
+
+// this.shouldComponentUpdate on prototype
+export const shouldComponentUpdatePrototype = <
+  P extends {} = {},
+  S extends {} = {},
+  G extends {} = State,
+  R extends {} = Reducers,
+  SS = any,
+>(
+  that: ReactNComponent<P, S, G, R, SS> | ReactNPureComponent<P, S, G, R, SS>,
+): boolean => {
+
+  const proto: ReactNComponent | ReactNPureComponent =
+    Object.getPrototypeOf(that);
+  const [ rVerMaj, rVerMin ] = React.version.split('.').map((v): number => parseInt(v));
+  if (Object.prototype.hasOwnProperty.call(proto, 'shouldComponentUpdate')
+    && ((rVerMaj > 16 || (rVerMaj === 16 && rVerMin >= 3)))) {
+    that.shouldComponentUpdate = (...args: [ P, S, any ]): boolean => {
+      ReactNShouldComponentUpdate(that);
+      return proto.shouldComponentUpdate.bind(that)(...args); // Returns outcome of shouldComponentUpdate method
+    };
+    return true;
+  }
+  return false;
+};