feat: use react hooks to manage styles injection (#720)

* fix: safely remove style

* remove props.children dep

* BREAKING CHANGE: This change drops support for React version < 16.8.0

src/style.js

@@ -1,53 +1,31 @@
-import { Component } from 'react'
+import { useLayoutEffect } from 'react'
 import StyleSheetRegistry from './stylesheet-registry'
 
 const styleSheetRegistry = new StyleSheetRegistry()
 
-export default class JSXStyle extends Component {
-  constructor(props) {
-    super(props)
-    this.prevProps = {}
-  }
-
-  static dynamic(info) {
-    return info
-      .map(tagInfo => {
-        const baseId = tagInfo[0]
-        const props = tagInfo[1]
-        return styleSheetRegistry.computeId(baseId, props)
-      })
-      .join(' ')
-  }
-
-  // probably faster than PureComponent (shallowEqual)
-  shouldComponentUpdate(otherProps) {
-    return (
-      this.props.id !== otherProps.id ||
-      // 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(otherProps.dynamic)
-    )
-  }
-
-  componentWillUnmount() {
-    styleSheetRegistry.remove(this.props)
+export default function JSXStyle(props) {
+  if (typeof window === 'undefined') {
+    styleSheetRegistry.add(props)
+    return null
   }
-
-  render() {
-    // This is a workaround to make the side effect async safe in the "render" phase.
-    // See https://github.com/zeit/styled-jsx/pull/484
-    if (this.shouldComponentUpdate(this.prevProps)) {
-      // Updates
-      if (this.prevProps.id) {
-        styleSheetRegistry.remove(this.prevProps)
-      }
-
-      styleSheetRegistry.add(this.props)
-      this.prevProps = this.props
+  useLayoutEffect(() => {
+    styleSheetRegistry.add(props)
+    return () => {
+      styleSheetRegistry.remove(props)
     }
+    // props.children can be string[], will be striped since id is identical
+  }, [props.id, String(props.dynamic)])
+  return null
+}
 
-    return null
-  }
+JSXStyle.dynamic = info => {
+  return info
+    .map(tagInfo => {
+      const baseId = tagInfo[0]
+      const props = tagInfo[1]
+      return styleSheetRegistry.computeId(baseId, props)
+    })
+    .join(' ')
 }
 
 export function flush() {