feat: opt in insertion effect hook when available (#753)

src/style.js

@@ -1,6 +1,10 @@
-import { useLayoutEffect } from 'react'
+import React from 'react'
 import { useStyleRegistry } from './stylesheet-registry'
 import { computeId } from './lib/hash'
+
+// 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()
 
@@ -14,7 +18,7 @@ export default function JSXStyle(props) {
     return null
   }
 
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     registry.add(props)
     return () => {
       registry.remove(props)