fix(r18): useTransition hook

Author: joshuaellis

demo/src/index.tsx

@@ -8,3 +8,5 @@ ReactDOM.createRoot(document.getElementById('root')).render(
     <App />
   </React.StrictMode>
 )
+
+// ReactDOM.createRoot(document.getElementById('root')).render(<App />)

packages/core/src/hooks/useTransition.tsx

@@ -103,14 +103,24 @@ export function useTransition(
   })
 
   // Destroy all transitions on dismount.
-  useOnce(() => () => {
+  useOnce(() => {
     each(usedTransitions.current!, t => {
-      if (t.expired) {
-        clearTimeout(t.expirationId!)
+      t.ctrl.ref?.add(t.ctrl)
+      const change = changes.get(t)
+      if (change) {
+        t.ctrl.start(change.payload)
       }
-      detachRefs(t.ctrl, ref)
-      t.ctrl.stop(true)
     })
+
+    return () => {
+      each(usedTransitions.current!, t => {
+        if (t.expired) {
+          clearTimeout(t.expirationId!)
+        }
+        detachRefs(t.ctrl, ref)
+        t.ctrl.stop(true)
+      })
+    }
   })
 
   // Keys help with reusing transitions between renders.

packages/shared/src/hooks/useForceUpdate.ts

@@ -1,24 +1,13 @@
 import { useState } from 'react'
-import { useOnce } from './useOnce'
+import { useIsMounted } from './useIsMounted'
 
 /** Return a function that re-renders this component, if still mounted */
 export function useForceUpdate() {
   const update = useState<any>()[1]
-  const mounted = useState(makeMountedRef)[0]
-  useOnce(mounted.unmount)
+  const isMounted = useIsMounted()
   return () => {
-    if (mounted.current) {
-      update({})
+    if (isMounted.current) {
+      update(Math.random())
     }
   }
 }
-
-function makeMountedRef() {
-  const mounted = {
-    current: true,
-    unmount: () => () => {
-      mounted.current = false
-    },
-  }
-  return mounted
-}

packages/shared/src/hooks/useIsMounted.ts

@@ -0,0 +1,15 @@
+import { useRef } from 'react'
+import { useLayoutEffect } from './useLayoutEffect'
+
+export const useIsMounted = () => {
+  const isMounted = useRef(false)
+  useLayoutEffect(() => {
+    isMounted.current = true
+
+    return () => {
+      isMounted.current = false
+    }
+  }, [])
+
+  return isMounted
+}