From eaf661352758b5a3c5141a9dda7e62c0202b99a4 Mon Sep 17 00:00:00 2001
From: shoma-mano <ms2geki@gmail.com>
Date: Tue, 16 Jan 2024 12:51:59 +0900
Subject: [PATCH] fix: trigger componentUpdateFn twice when props updated

---
 .../packages/reactivity/effect.ts                      |  4 ++++
 .../packages/runtime-core/renderer.ts                  | 10 ++++++++++
 2 files changed, 14 insertions(+)

diff --git a/book/impls/10_minimum_example/050_component_system2/packages/reactivity/effect.ts b/book/impls/10_minimum_example/050_component_system2/packages/reactivity/effect.ts
index 59e6d5d6..68616f60 100644
--- a/book/impls/10_minimum_example/050_component_system2/packages/reactivity/effect.ts
+++ b/book/impls/10_minimum_example/050_component_system2/packages/reactivity/effect.ts
@@ -7,6 +7,7 @@ export let activeEffect: ReactiveEffect | undefined
 
 export class ReactiveEffect<T = any> {
   constructor(public fn: () => T) {}
+  allowRecurse?: boolean
 
   run() {
     let parent: ReactiveEffect | undefined = activeEffect
@@ -42,6 +43,9 @@ export function trigger(target: object, key?: unknown) {
   if (dep) {
     const effects = [...dep]
     for (const effect of effects) {
+      if (!effect.allowRecurse) {
+        continue
+      }
       effect.run()
     }
   }
diff --git a/book/impls/10_minimum_example/050_component_system2/packages/runtime-core/renderer.ts b/book/impls/10_minimum_example/050_component_system2/packages/runtime-core/renderer.ts
index 37ac786b..49ed4d1a 100644
--- a/book/impls/10_minimum_example/050_component_system2/packages/runtime-core/renderer.ts
+++ b/book/impls/10_minimum_example/050_component_system2/packages/runtime-core/renderer.ts
@@ -184,7 +184,9 @@ export function createRenderer(options: RendererOptions) {
           next.component = instance
           instance.vnode = next
           instance.next = null
+          toggleRecurse(instance, false)
           updateProps(instance, next.props)
+          toggleRecurse(instance, true)
         } else {
           next = vnode
         }
@@ -200,6 +202,7 @@ export function createRenderer(options: RendererOptions) {
 
     const effect = (instance.effect = new ReactiveEffect(componentUpdateFn))
     const update = (instance.update = () => effect.run())
+    toggleRecurse(instance, true)
     update()
   }
 
@@ -216,3 +219,10 @@ export function createRenderer(options: RendererOptions) {
 
   return { render }
 }
+
+function toggleRecurse(
+  { effect }: ComponentInternalInstance,
+  allowed: boolean,
+) {
+  effect.allowRecurse = allowed
+}