@unsetsoft/ryunixjs 0.2.14 → 0.2.15-nightly.0

package/lib/dom.js

@@ -136,40 +136,7 @@ function commitRoot() {
   commitWork(wipRoot.child);
   currentRoot = wipRoot;
   wipRoot = null;
-}
-
-/**
- * The function cancels all effect hooks in a given fiber.
- * @param fiber - The "fiber" parameter is likely referring to a data structure used in React.js to
- * represent a component and its state. It contains information about the component's props, state, and
- * children, as well as metadata used by React to manage updates and rendering. The function
- * "cancelEffects" is likely intended
- */
-function cancelEffects(fiber) {
-  if (fiber.hooks) {
-    fiber.hooks
-      .filter((hook) => hook.tag === "effect" && hook.cancel)
-      .forEach((effectHook) => {
-        effectHook.cancel();
-      });
-  }
-}
-
-/**
- * The function runs all effect hooks in a given fiber.
- * @param fiber - The "fiber" parameter is likely referring to a data structure used in the
- * implementation of a fiber-based reconciliation algorithm, such as the one used in React. A fiber
- * represents a unit of work that needs to be performed by the reconciliation algorithm, and it
- * contains information about a component and its children, as
- */
-function runEffects(fiber) {
-  if (fiber.hooks) {
-    fiber.hooks
-      .filter((hook) => hook.tag === "effect" && hook.effect)
-      .forEach((effectHook) => {
-        effectHook.cancel = effectHook.effect();
-      });
-  }
+  pendingEffects.forEach((it) => it()); // call pending effects after render
 }
 
 /**
@@ -194,15 +161,11 @@ function commitWork(fiber) {
     if (fiber.dom != null) {
       domParent.appendChild(fiber.dom);
     }
-    runEffects(fiber);
   } else if (fiber.effectTag === "UPDATE") {
-    cancelEffects(fiber);
     if (fiber.dom != null) {
       updateDom(fiber.dom, fiber.alternate.props, fiber.props);
     }
-    runEffects(fiber);
   } else if (fiber.effectTag === "DELETION") {
-    cancelEffects(fiber);
     commitDeletion(fiber, domParent);
     return;
   }
@@ -313,10 +276,35 @@ requestIdleCallback(workLoop);
  * fiber. If there are no more siblings, it goes up the tree to the parent and looks for the next
  * sibling of the parent. The function returns `null` if there are no more fibers to process.
  */
+
+let pendingEffects = [];
 function performUnitOfWork(fiber) {
   const isFunctionComponent = fiber.type instanceof Function;
   if (isFunctionComponent) {
     updateFunctionComponent(fiber);
+
+    Object.keys(fiber.hooks)
+      .filter((hookIndex) => fiber.hooks[hookIndex].tag === "effect")
+      .forEach((hookIndex) => {
+        const oldHook =
+          fiber.alternate &&
+          fiber.alternate.hooks &&
+          fiber.alternate.hooks[hookIndex];
+
+        const hook = fiber.hooks[hookIndex];
+        const depsChanged = (prev, next) => (_, index) =>
+          prev[index] !== next[index];
+        if (
+          (hook.deps.length === 0 && !oldHook) ||
+          (oldHook &&
+            (oldHook.deps.length !== hook.deps.length ||
+              (oldHook &&
+                hook.deps.filter(depsChanged(oldHook.deps, hook.deps))
+                  .length !== 0)))
+        ) {
+          pendingEffects.push(hook.fn);
+        }
+      });
   } else {
     updateHostComponent(fiber);
   }
@@ -493,17 +481,9 @@ const hasDepsChanged = (prevDeps, nextDeps) =>
  * mount and never again.
  */
 function useEffect(effect, deps) {
-  const oldHook =
-    wipFiber.alternate &&
-    wipFiber.alternate.hooks &&
-    wipFiber.alternate.hooks[hookIndex];
-
-  const hasChanged = hasDepsChanged(oldHook ? oldHook.deps : undefined, deps);
-
   const hook = {
     tag: "effect",
-    effect: hasChanged ? effect : null,
-    cancel: hasChanged && oldHook && oldHook.cancel,
+    effect,
     deps,
   };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unsetsoft/ryunixjs",
-  "version": "0.2.14",
+  "version": "0.2.15-nightly.0",
   "license": "MIT",
   "main": "./dist/Ryunix.js",
   "private": false,