From e7b8fd34e08f141aa6241a4cfa243a4668c62ed0 Mon Sep 17 00:00:00 2001
From: Giuseppe Gurgone <giuseppeg@users.noreply.github.com>
Date: Fri, 31 Aug 2018 13:02:24 +0200
Subject: [PATCH] Fix JSXStyle renders styles too late

---
 src/style.js | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/style.js b/src/style.js
index b8679118..acbc2bbd 100644
--- a/src/style.js
+++ b/src/style.js
@@ -4,15 +4,6 @@ import StyleSheetRegistry from './stylesheet-registry'
 const styleSheetRegistry = new StyleSheetRegistry()
 
 export default class JSXStyle extends Component {
-  constructor(props) {
-    super(props)
-
-    // SeverSideRendering only
-    if (typeof window === 'undefined') {
-      styleSheetRegistry.add(this.props)
-    }
-  }
-
   static dynamic(info) {
     return info
       .map(tagInfo => {
@@ -23,23 +14,32 @@ export default class JSXStyle extends Component {
       .join(' ')
   }
 
-  componentDidMount() {
-    styleSheetRegistry.add(this.props)
-  }
-
+  // probably faster than PureComponent (shallowEqual)
   shouldComponentUpdate(nextProps) {
-    return this.props.css !== nextProps.css
+    return (
+      this.props.styleId !== nextProps.styleId ||
+      // We do this check because `dynamic` is an array of strings or undefined.
+      // These are the computed values for dynamic styles.
+      String(this.props.dynamic) !== String(nextProps.dynamic)
+    )
   }
 
-  componentDidUpdate(prevProps) {
-    styleSheetRegistry.update(prevProps, this.props)
+  // Remove styles in advance.
+  getSnapshotBeforeUpdate(prevProps) {
+    styleSheetRegistry.remove(prevProps)
+    return null
   }
 
+  // Including this otherwise React complains that getSnapshotBeforeUpdate
+  // is used without componentDidMount.
+  componentDidUpdate() {}
+
   componentWillUnmount() {
     styleSheetRegistry.remove(this.props)
   }
 
   render() {
+    styleSheetRegistry.add(this.props)
     return null
   }
 }