@unsetsoft/ryunixjs 0.2.15-nightly.0 → 0.2.15-nightly.1

package/lib/dom.js

@@ -136,7 +136,40 @@ function commitRoot() {
   commitWork(wipRoot.child);
   currentRoot = wipRoot;
   wipRoot = null;
-  pendingEffects.forEach((it) => it()); // call pending effects after render
+}
+
+/**
+ * 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();
+      });
+  }
 }
 
 /**
@@ -161,11 +194,15 @@ function commitWork(fiber) {
     if (fiber.dom != null) {
       domParent.appendChild(fiber.dom);
     }
+    runEffects(wipFiber);
   } else if (fiber.effectTag === "UPDATE") {
+    cancelEffects(wipFiber);
     if (fiber.dom != null) {
       updateDom(fiber.dom, fiber.alternate.props, fiber.props);
     }
+    runEffects(wipFiber);
   } else if (fiber.effectTag === "DELETION") {
+    cancelEffects(wipFiber);
     commitDeletion(fiber, domParent);
     return;
   }
@@ -276,35 +313,10 @@ 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);
   }
@@ -481,9 +493,17 @@ 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,
+    effect: hasChanged ? effect : null,
+    cancel: hasChanged && oldHook && oldHook.cancel,
     deps,
   };
 

package/package.json

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