add third parameter for useRefValues

Author: MatiasWorker

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atomico/hooks",
   "description": "Series of utilities in hooks format to extend the operation of Atomico",
-  "version": "3.41.0",
+  "version": "3.42.0",
   "type": "module",
   "workspaces": [
     "src/**/*"

src/use-intersection-observer/use-intersection-observer.js

@@ -7,11 +7,15 @@ import { useRefValues } from "../use-ref-values/use-ref-values.js";
  * @param {IntersectionObserverInit} [options]
  */
 export function useRefIntersectionObserver(ref, callback, options) {
-  useRefValues(() => {
-    const intersection = new IntersectionObserver(callback, options);
-    intersection.observe(ref.current);
-    return () => intersection.disconnect();
-  }, [ref]);
+  useRefValues(
+    () => {
+      const intersection = new IntersectionObserver(callback, options);
+      intersection.observe(ref.current);
+      return () => intersection.disconnect();
+    },
+    [ref],
+    true
+  );
 }
 
 /**

src/use-ref-values/use-ref-values.js

@@ -4,40 +4,40 @@ import { useHook } from "atomico";
  * @template {import("atomico").Ref[]} T
  * @param {(args: Args<T>)=>(void | ()=>any)} callback
  * @param {T} args
+ * @param {boolean} [mode] - by default it is executed in the cycle of useLayoutEffect, if true it will be executed in the cycle of useEffect
  */
-export function useRefValues(callback, args) {
-  useHook(
-    (state = []) => state,
-    (state, unmounted) => {
-      const { length } = args;
-      let [prevArgs = [], collector] = state;
-      let withCurrent = 0;
-      let withDiff = 0;
-      let nextArgs = [];
+export function useRefValues(callback, args, mode) {
+  const effect = (state, unmounted) => {
+    const { length } = args;
+    let [prevArgs = [], collector] = state;
+    let withCurrent = 0;
+    let withDiff = 0;
+    let nextArgs = [];
 
-      for (let i = 0; i < length; i++) {
-        const { current } = args[i];
-        if (current != null) {
-          withCurrent++;
-        }
-        if (current != prevArgs[i]) {
-          withDiff++;
-        }
-        nextArgs.push(current);
+    for (let i = 0; i < length; i++) {
+      const { current } = args[i];
+      if (current != null) {
+        withCurrent++;
       }
-
-      if ((withDiff || unmounted) && collector) {
-        collector();
-        collector = null;
+      if (current != prevArgs[i]) {
+        withDiff++;
       }
+      nextArgs.push(current);
+    }
 
-      if (withDiff && !unmounted && withCurrent === length) {
-        collector = callback(nextArgs);
-      }
+    if ((withDiff || unmounted) && collector) {
+      collector();
+      collector = null;
+    }
 
-      return [nextArgs, collector];
+    if (withDiff && !unmounted && withCurrent === length) {
+      collector = callback(nextArgs);
     }
-  );
+
+    return [nextArgs, collector];
+  };
+
+  useHook((state = []) => state, !mode && effect, mode && effect);
 }
 
 /**