fix: prevent effect recursion on first run

close #90

Author: johnsoncodehk

src/index.ts

@@ -147,7 +147,7 @@ export function effect(fn: () => void): () => void {
 		subsTail: undefined,
 		deps: undefined,
 		depsTail: undefined,
-		flags: ReactiveFlags.Watching,
+		flags: ReactiveFlags.Watching | ReactiveFlags.RecursedCheck,
 	};
 	const prevSub = setActiveSub(e);
 	if (prevSub !== undefined) {
@@ -157,6 +157,7 @@ export function effect(fn: () => void): () => void {
 		e.fn();
 	} finally {
 		activeSub = prevSub;
+		e.flags &= ~ReactiveFlags.RecursedCheck;
 	}
 	return effectOper.bind(e);
 }
@@ -255,12 +256,13 @@ function computedOper<T>(this: Computed<T>): T {
 			}
 		}
 	} else if (!flags) {
-		this.flags = ReactiveFlags.Mutable;
+		this.flags = ReactiveFlags.Mutable | ReactiveFlags.RecursedCheck;
 		const prevSub = setActiveSub(this);
 		try {
 			this.value = this.getter();
 		} finally {
 			activeSub = prevSub;
+			this.flags &= ~ReactiveFlags.RecursedCheck;
 		}
 	}
 	const sub = activeSub;

src/system.ts

@@ -250,7 +250,7 @@ export function createReactiveSystem({
 			const flags = sub.flags;
 			if ((flags & (ReactiveFlags.Pending | ReactiveFlags.Dirty)) === ReactiveFlags.Pending) {
 				sub.flags = flags | ReactiveFlags.Dirty;
-				if (flags & ReactiveFlags.Watching) {
+				if ((flags & (ReactiveFlags.Watching | ReactiveFlags.RecursedCheck)) === ReactiveFlags.Watching) {
 					notify(sub);
 				}
 			}

tests/effect.spec.ts

@@ -250,3 +250,24 @@ test('should handle flags are indirectly updated during checkDirty', () => {
 	a(true);
 	expect(triggers).toBe(2);
 });
+
+test('should handle effect recursion for the first execution', () => {
+	const src1 = signal(0);
+	const src2 = signal(0);
+
+	let triggers1 = 0;
+	let triggers2 = 0;
+
+	effect(() => {
+		triggers1++;
+		src1(Math.min(src1() + 1, 5));
+	});
+	effect(() => {
+		triggers2++;
+		src2(Math.min(src2() + 1, 5));
+		src2();
+	});
+
+	expect(triggers1).toBe(1);
+	expect(triggers2).toBe(1);
+});