fix(packages/vue): add mutex for useRenderCount to avoid infinite rerender

packages/vue/src/composables/useRenderCount/index.test.ts

@@ -32,7 +32,7 @@ describe('useRenderCount', () => {
         await nextTick();
 
         // Will trigger a render
-        expect(component.vm.count).toBe(2);
+        expect(component.vm.count).toBe(1);
         expect(component.text()).toBe('1');
 
         component.vm.visibleCount++;
@@ -40,7 +40,7 @@ describe('useRenderCount', () => {
         await nextTick();
 
         // Will trigger a single render for both updates
-        expect(component.vm.count).toBe(3);
+        expect(component.vm.count).toBe(2);
         expect(component.text()).toBe('3');
     });
 
@@ -70,6 +70,6 @@ describe('useRenderCount', () => {
         await nextTick();
 
         // Will trigger a single render for both updates
-        expect(count.value).toBe(2);
+        expect(count.value).toBe(1);
     });
 });

packages/vue/src/composables/useRenderCount/index.ts

@@ -1,6 +1,7 @@
 import { onMounted, onUpdated, readonly, type ComponentInternalInstance } from 'vue';
 import { useCounter } from '../useCounter';
 import { getLifeCycleTarger } from '../..';
+import { SyncMutex } from '@robonen/stdlib';
 
 /**
  * @name useRenderCount
@@ -19,11 +20,22 @@ import { getLifeCycleTarger } from '../..';
  * @since 0.0.1
  */
 export function useRenderCount(instance?: ComponentInternalInstance) {
+    const mutex = new SyncMutex();
     const { count, increment } = useCounter(0);
     const target = getLifeCycleTarger(instance);
 
-    onMounted(increment, target);
+    const incrementEffect = () => {
-    onUpdated(increment, target);
+        if (mutex.isLocked) {
+            mutex.unlock();
+            return;
+        }
+
+        mutex.lock();
+        increment();
+    };
+
+    onMounted(incrementEffect, target);
+    onUpdated(incrementEffect, target);
 
     return readonly(count);
 }