fix hook

MrWangJustToDo · Dec 4, 2024 · 9ca7784 · 9ca7784
1 parent 0b0b3c4
commit 9ca7784
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 7 deletions.
diff --git a/packages/myreact-reconciler/src/runtimeHook/effect.ts b/packages/myreact-reconciler/src/runtimeHook/effect.ts
@@ -54,11 +54,16 @@ export const effectHookNode = (fiber: MyReactFiberNode, hookNode: MyReactHookNod
 
     if (hookNode.type === HOOK_TYPE.useImperativeHandle) {
       renderDispatch.pendingLayoutEffect(fiber, function invokeLayoutEffectOnHook() {
+        hookNode.cancel && hookNode.cancel();
+
         // ref obj
         if (hookNode.value && typeof hookNode.value === "object") hookNode.value.current = hookNode.reducer.call(null);
         // ref function
         if (hookNode.value && typeof hookNode.value === "function") hookNode.value(hookNode.reducer.call(null));
 
+        // TODO
+        // hookNode.cancel = 
+
         hookNode.hasEffect = false;
 
         setEffectForInstance(hookNode, Effect_TYPE.__initial__);

diff --git a/packages/myreact-reconciler/src/runtimeHook/update.ts b/packages/myreact-reconciler/src/runtimeHook/update.ts
@@ -1,5 +1,5 @@
 import { __my_react_internal__, __my_react_shared__ } from "@my-react/react";
-import { HOOK_TYPE, STATE_TYPE, include, isArrayEquals } from "@my-react/react-shared";
+import { HOOK_TYPE, STATE_TYPE, include, isArrayEquals, isNormalEquals } from "@my-react/react-shared";
 
 import { getInstanceContextFiber, setContextForInstance, setOwnerForInstance } from "../runtimeGenerate";
 import { currentRenderDispatch, safeCallWithCurrentFiber } from "../share";
@@ -53,12 +53,7 @@ export const updateHookNode = ({ type, value, reducer, deps }: RenderHookParams,
     }
   }
 
-  if (
-    currentHook.type === HOOK_TYPE.useEffect ||
-    currentHook.type === HOOK_TYPE.useLayoutEffect ||
-    currentHook.type === HOOK_TYPE.useInsertionEffect ||
-    currentHook.type === HOOK_TYPE.useImperativeHandle
-  ) {
+  if (currentHook.type === HOOK_TYPE.useEffect || currentHook.type === HOOK_TYPE.useLayoutEffect || currentHook.type === HOOK_TYPE.useInsertionEffect) {
     if (isHMR || !deps || !isArrayEquals(currentHook.deps, deps)) {
       currentHook.value = value;
 
@@ -73,6 +68,23 @@ export const updateHookNode = ({ type, value, reducer, deps }: RenderHookParams,
     return currentHook;
   }
 
+  if (currentHook.type === HOOK_TYPE.useImperativeHandle) {
+    let depsChanged = false;
+    // ref changed also need to trigger effect
+    if (isHMR || !deps || !isNormalEquals(currentHook.value, value) || (depsChanged = !isArrayEquals(currentHook.deps, deps), depsChanged)) {
+      currentHook.value = value;
+
+      currentHook.result = value;
+
+      currentHook.reducer = depsChanged ? reducer || currentHook.reducer : currentHook.reducer;
+
+      currentHook.deps = deps;
+
+      currentHook.hasEffect = true;
+    }
+    return currentHook;
+  }
+
   if (currentHook.type === HOOK_TYPE.useSyncExternalStore) {
     const storeApi = currentHook.value;
 

diff --git a/ui/vite-example/vite.config.ts b/ui/vite-example/vite.config.ts
@@ -1,6 +1,7 @@
 import { defineConfig } from "vite";
 import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
 import react from "@my-react/react-vite";
+// import react from "@vitejs/plugin-react";
 
 // https://vitejs.dev/config/
 export default defineConfig({