From 512c0a02c0ecbc67690a3ad17b92ae20f6cc36c4 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Tue, 19 Oct 2021 22:20:48 +0200
Subject: [PATCH 1/4] feat: opt in insertion effect hook when available

---
 src/style.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/style.js b/src/style.js
index 5896f79a..d22425ef 100644
--- a/src/style.js
+++ b/src/style.js
@@ -1,6 +1,7 @@
-import { useLayoutEffect } from 'react'
+import React from 'react'
 import { useStyleRegistry } from './stylesheet-registry'
 import { computeId } from './lib/hash'
+
 export default function JSXStyle(props) {
   const registry = useStyleRegistry()
 
@@ -14,7 +15,9 @@ export default function JSXStyle(props) {
     return null
   }
 
-  useLayoutEffect(() => {
+  const useDOMEffects =
+    React.unstable_useInsertionEffect || React.useLayoutEffect
+  useDOMEffects(() => {
     registry.add(props)
     return () => {
       registry.remove(props)

From 5e64fe316d856df3f01e1c44c62976c230ce9101 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Tue, 19 Oct 2021 23:04:19 +0200
Subject: [PATCH 2/4] remove unstable prefix

---
 src/style.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/style.js b/src/style.js
index d22425ef..7b9c3e6e 100644
--- a/src/style.js
+++ b/src/style.js
@@ -15,8 +15,7 @@ export default function JSXStyle(props) {
     return null
   }
 
-  const useDOMEffects =
-    React.unstable_useInsertionEffect || React.useLayoutEffect
+  const useDOMEffects = React.useInsertionEffect || React.useLayoutEffect
   useDOMEffects(() => {
     registry.add(props)
     return () => {

From 3020d9e244674325907c89e84728bb9404fecbc5 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Wed, 20 Oct 2021 15:08:41 +0200
Subject: [PATCH 3/4] def top

---
 src/style.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/style.js b/src/style.js
index 7b9c3e6e..038d2bde 100644
--- a/src/style.js
+++ b/src/style.js
@@ -2,6 +2,7 @@ import React from 'react'
 import { useStyleRegistry } from './stylesheet-registry'
 import { computeId } from './lib/hash'
 
+const useDOMEffects = React.useInsertionEffect || React.useLayoutEffect
 export default function JSXStyle(props) {
   const registry = useStyleRegistry()
 
@@ -15,7 +16,6 @@ export default function JSXStyle(props) {
     return null
   }
 
-  const useDOMEffects = React.useInsertionEffect || React.useLayoutEffect
   useDOMEffects(() => {
     registry.add(props)
     return () => {

From 5487217a696e30a3dbc66c0042ab611e9ef8c903 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Wed, 20 Oct 2021 16:13:46 +0200
Subject: [PATCH 4/4] use desired insertion hook name

---
 src/style.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/style.js b/src/style.js
index 038d2bde..db78742f 100644
--- a/src/style.js
+++ b/src/style.js
@@ -2,7 +2,9 @@ import React from 'react'
 import { useStyleRegistry } from './stylesheet-registry'
 import { computeId } from './lib/hash'
 
-const useDOMEffects = React.useInsertionEffect || React.useLayoutEffect
+// Opt-into the new `useInsertionEffect` API in React 18, fallback to `useLayoutEffect`.
+// https://github.com/reactwg/react-18/discussions/110
+const useInsertionEffect = React.useInsertionEffect || React.useLayoutEffect
 export default function JSXStyle(props) {
   const registry = useStyleRegistry()
 
@@ -16,7 +18,7 @@ export default function JSXStyle(props) {
     return null
   }
 
-  useDOMEffects(() => {
+  useInsertionEffect(() => {
     registry.add(props)
     return () => {
       registry.remove(props)