BREAKING CHANGE: This change drops support for React 15.

package.json

@@ -91,7 +91,7 @@
     "xo": "0.24.0"
   },
   "peerDependencies": {
-    "react": "16.x.x || 17.x.x"
+    "react": "17.x.x || 18.x.x"
   },
   "keywords": [
     "babel-plugin-macros",

src/style.js

@@ -1,50 +1,30 @@
-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)
-    // Empty state to get style registered on first render
-    this.state = {}
-  }
-
-  static dynamic(info) {
-    return info
-      .map(tagInfo => {
-        const baseId = tagInfo[0]
-        const props = tagInfo[1]
-        return styleSheetRegistry.computeId(baseId, props)
-      })
-      .join(' ')
-  }
-
-  static getDerivedStateFromProps(props, state) {
-    if (
-      props.id !== state.id ||
-      // We do this check because `dynamic` is an array of strings or undefined.
-      // These are the computed values for dynamic styles.
-      String(props.dynamic) !== String(state.dynamic)
-    ) {
-      if (state.id) {
-        styleSheetRegistry.remove(state)
-      }
-      styleSheetRegistry.add(props)
-      return props
-    }
+export default function JSXStyle(props) {
+  if (typeof window === 'undefined') {
+    styleSheetRegistry.add(props)
     return null
   }
-
-  componentWillUnmount() {
-    if (this.state.id) {
-      styleSheetRegistry.remove(this.state)
+  useLayoutEffect(() => {
+    styleSheetRegistry.add(props)
+    return () => {
+      styleSheetRegistry.remove(props)
     }
-  }
+  }, [props.id, String(props.dynamic)])
+  return null
+}
 
-  render() {
-    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() {