feat(theme): memoize createStyleProp

Apparently StyleConsumerService's createStyleProp is quite slow. Memoize it is not a silver bullet, but give you a chance to not generate those styles on each rerender by providing props to your styled component with a stable identity.

Author: Federkun

src/components/package.json

@@ -23,9 +23,11 @@
   "dependencies": {
     "@eva-design/dss": "^2.0.0",
     "@eva-design/processor": "^2.0.0",
+    "fecha": "3.0.3",
     "hoist-non-react-statics": "^3.2.1",
     "lodash.merge": "^4.6.1",
-    "fecha": "3.0.3"
+    "memoize-one": "^5.1.1",
+    "react-fast-compare": "^3.2.0"
   },
   "peerDependencies": {
     "react-native-svg": "^9.13.6"

src/components/theme/style/styled.tsx

@@ -5,6 +5,8 @@
  */
 
 import React from 'react';
+import isEqual from 'react-fast-compare';
+import memoizeOne from 'memoize-one';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import { ThemeStyleType } from '@eva-design/dss';
 import { StyleConsumerService } from './styleConsumer.service';
@@ -110,13 +112,14 @@ const styleInjector = (Component: WrappedComponent, name: string): StyledCompone
     private init: boolean = false;
     private defaultProps: WrappedComponentProps;
     private service: StyleConsumerService;
+    private createStyleProp: StyleConsumerService['createStyleProp']
 
     private onInit = (style: ThemeStyleType, theme: ThemeType): void => {
       this.service = new StyleConsumerService(name, style);
       this.defaultProps = this.service.createDefaultProps();
+      this.createStyleProp = memoizeOne(this.service.createStyleProp.bind(this.service), isEqual)
       this.init = true;
     };
-
     private onDispatch = (interaction: Interaction[]): void => {
       this.setState({ interaction });
     };
@@ -126,7 +129,7 @@ const styleInjector = (Component: WrappedComponent, name: string): StyledCompone
                            theme: ThemeType): StyledComponentProps => {
 
       const props: WrappedComponentProps = { ...this.defaultProps, ...sourceProps };
-      const style: StyleType = this.service.createStyleProp(props, sourceStyle, theme, this.state.interaction);
+      const style: StyleType = this.createStyleProp(props, sourceStyle, theme, this.state.interaction);
 
       return {
         ...props,

yarn.lock

@@ -10105,6 +10105,11 @@ mem@^4.0.0:
     mimic-fn "^2.0.0"
     p-is-promise "^2.0.0"
 
+memoize-one@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0"
+  integrity sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA==
+
 memory-fs@^0.4.0, memory-fs@^0.4.1, memory-fs@~0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
@@ -12741,6 +12746,11 @@ react-error-overlay@^6.0.1:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108"
   integrity sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA==
 
+react-fast-compare@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
+  integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
+
 react-is@^16.12.0, react-is@^16.13.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.9.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"