From 353581c81e579a09952a827344fe841b6071bae9 Mon Sep 17 00:00:00 2001
From: youxingzhi <xingzhi.you@shopee.com>
Date: Sat, 11 May 2024 18:43:09 +0800
Subject: [PATCH 1/6] blog-14: add mount_effect and update_effect

---
 examples/hello-world/src/App.tsx              |  4 +-
 packages/react-reconciler/src/fiber.rs        |  5 +-
 packages/react-reconciler/src/fiber_hooks.rs  | 92 +++++++++++++++++--
 .../react-reconciler/src/hook_effect_tags.rs  |  9 ++
 packages/react-reconciler/src/lib.rs          |  1 +
 packages/react-reconciler/src/update_queue.rs |  3 +
 packages/react/src/current_dispatcher.rs      | 10 +-
 packages/react/src/lib.rs                     |  6 ++
 8 files changed, 116 insertions(+), 14 deletions(-)
 create mode 100644 packages/react-reconciler/src/hook_effect_tags.rs

diff --git a/examples/hello-world/src/App.tsx b/examples/hello-world/src/App.tsx
index f70ebe1..bc52e41 100644
--- a/examples/hello-world/src/App.tsx
+++ b/examples/hello-world/src/App.tsx
@@ -1,8 +1,10 @@
-import {useState} from 'react'
+import {useEffect, useState} from 'react'
 
 function App() {
     const [num, updateNum] = useState(0);
+    useEffect(() => {
 
+    }, []);
     return (
         <ul
             onClick={(e) => {
diff --git a/packages/react-reconciler/src/fiber.rs b/packages/react-reconciler/src/fiber.rs
index ef0120b..244f8cd 100644
--- a/packages/react-reconciler/src/fiber.rs
+++ b/packages/react-reconciler/src/fiber.rs
@@ -11,7 +11,7 @@ use web_sys::js_sys::Reflect;
 use shared::{derive_from_js_value, log, type_of};
 
 use crate::fiber_flags::Flags;
-use crate::fiber_hooks::Hook;
+use crate::fiber_hooks::{Effect, Hook};
 use crate::fiber_lanes::{Lane, merge_lanes};
 use crate::update_queue::{Update, UpdateQueue};
 use crate::work_tags::WorkTag;
@@ -26,13 +26,14 @@ pub enum StateNode {
 pub enum MemoizedState {
     MemoizedJsValue(JsValue),
     Hook(Rc<RefCell<Hook>>),
+    Effect(Rc<RefCell<Effect>>),
 }
 
 impl MemoizedState {
     pub fn js_value(&self) -> Option<JsValue> {
         match self {
             MemoizedState::MemoizedJsValue(js_value) => Some(js_value.clone()),
-            MemoizedState::Hook(_) => None,
+            _ => None
         }
     }
 }
diff --git a/packages/react-reconciler/src/fiber_hooks.rs b/packages/react-reconciler/src/fiber_hooks.rs
index 3a59cea..f640f9e 100644
--- a/packages/react-reconciler/src/fiber_hooks.rs
+++ b/packages/react-reconciler/src/fiber_hooks.rs
@@ -3,12 +3,13 @@ use std::rc::Rc;
 
 use wasm_bindgen::{JsCast, JsValue};
 use wasm_bindgen::prelude::{Closure, wasm_bindgen};
-use web_sys::js_sys::{Function, Object, Reflect};
+use web_sys::js_sys::{Array, Function, Object, Reflect};
 
 use shared::log;
 
 use crate::fiber::{FiberNode, MemoizedState};
 use crate::fiber_lanes::{Lane, request_update_lane};
+use crate::hook_effect_tags::HookEffectTags;
 use crate::update_queue::{
     create_update, create_update_queue, enqueue_update, process_update_queue, UpdateQueue,
 };
@@ -24,6 +25,34 @@ static mut WORK_IN_PROGRESS_HOOK: Option<Rc<RefCell<Hook>>> = None;
 static mut CURRENT_HOOK: Option<Rc<RefCell<Hook>>> = None;
 static mut RENDER_LANE: Lane = Lane::NoLane;
 
+#[derive(Debug)]
+pub struct Effect {
+    tag: HookEffectTags,
+    create: Function,
+    destroy: Function,
+    deps: Array,
+    next: Option<Rc<RefCell<Effect>>>,
+}
+
+impl Effect {
+    fn new(
+        tag: HookEffectTags,
+        create: Function,
+        destroy: Function,
+        deps: Array,
+        next: Option<Rc<RefCell<Effect>>>,
+    ) -> Self {
+        Self {
+            tag,
+            create,
+            deps,
+            destroy,
+            next,
+        }
+    }
+}
+
+
 #[derive(Debug, Clone)]
 pub struct Hook {
     memoized_state: Option<MemoizedState>,
@@ -48,16 +77,38 @@ impl Hook {
 fn update_hooks_to_dispatcher(is_update: bool) {
     let object = Object::new();
 
-    let closure = Closure::wrap(Box::new(if is_update { update_state } else { mount_state })
-        as Box<dyn Fn(&JsValue) -> Result<Vec<JsValue>, JsValue>>);
-    let function = closure.as_ref().unchecked_ref::<Function>().clone();
-    closure.forget();
-    Reflect::set(&object, &"use_state".into(), &function).expect("TODO: panic set use_state");
+    // use_state
+    let use_state_closure =
+        Closure::wrap(Box::new(if is_update { update_state } else { mount_state })
+            as Box<dyn Fn(&JsValue) -> Result<Vec<JsValue>, JsValue>>);
+    let use_state = use_state_closure
+        .as_ref()
+        .unchecked_ref::<Function>()
+        .clone();
+    use_state_closure.forget();
+
+    // use_effect
+    let use_effect_closure = Closure::wrap(Box::new(if is_update {
+        update_effect
+    } else {
+        mount_effect
+    }) as Box<dyn Fn(JsValue, JsValue)>);
+    let use_effect = use_effect_closure
+        .as_ref()
+        .unchecked_ref::<Function>()
+        .clone();
+    use_effect_closure.forget();
+
+    Reflect::set(&object, &"use_state".into(), &use_state).expect("TODO: panic set use_state");
+    Reflect::set(&object, &"use_effect".into(), &use_effect).expect("TODO: panic set use_effect");
 
     updateDispatcher(&object.into());
 }
 
-pub fn render_with_hooks(work_in_progress: Rc<RefCell<FiberNode>>, lane: Lane) -> Result<JsValue, JsValue> {
+pub fn render_with_hooks(
+    work_in_progress: Rc<RefCell<FiberNode>>,
+    lane: Lane,
+) -> Result<JsValue, JsValue> {
     unsafe {
         CURRENTLY_RENDERING_FIBER = Some(work_in_progress.clone());
         RENDER_LANE = lane;
@@ -292,3 +343,30 @@ fn dispatch_set_state(
         schedule_update_on_fiber(fiber.clone(), lane);
     }
 }
+
+fn create_fc_update_queue() -> Rc<RefCell<UpdateQueue>> {
+    let update_queue = create_update_queue();
+    update_queue.borrow_mut().last_effect = None;
+    update_queue
+}
+
+fn push_effect(hook_flags: HookEffectTags, create: Function, destroy: Function, deps: Array) -> Effect {
+    let mut effect = Rc::new(RefCell::new(Effect::new(hook_flags, create, destroy, deps, None)));
+    let fiber = unsafe { CURRENTLY_RENDERING_FIBER.clone().unwrap() };
+    let update_queue = { fiber.borrow().update_queue.as_ref() };
+    if update_queue.is_none() {
+        let update_queue = create_fc_update_queue();
+        fiber.borrow_mut().update_queue = Some(update_queue.clone());
+        effect.borrow_mut().next = Option::from(effect.clone());
+        update_queue.borrow_mut().last_effect = Option::from(effect.clone());
+    } else {}
+    return effect;
+}
+
+fn mount_effect(create: JsValue, deps: JsValue) {
+    let hook = mount_work_in_progress_hook();
+    // let next_deps = deps.is_undefined() ?
+    log!("create {:?}", create);
+}
+
+fn update_effect(create: JsValue, deps: JsValue) {}
diff --git a/packages/react-reconciler/src/hook_effect_tags.rs b/packages/react-reconciler/src/hook_effect_tags.rs
new file mode 100644
index 0000000..bd0923c
--- /dev/null
+++ b/packages/react-reconciler/src/hook_effect_tags.rs
@@ -0,0 +1,9 @@
+use bitflags::bitflags;
+
+bitflags! {
+    #[derive(Debug)]
+    pub struct HookEffectTags: u8 {
+        const HookHasEffect = 0b0001;
+        const Passive = 0b0010; // useEffect
+    }
+}
diff --git a/packages/react-reconciler/src/lib.rs b/packages/react-reconciler/src/lib.rs
index 51e159b..f4517da 100644
--- a/packages/react-reconciler/src/lib.rs
+++ b/packages/react-reconciler/src/lib.rs
@@ -24,6 +24,7 @@ mod work_loop;
 mod work_tags;
 mod fiber_lanes;
 mod sync_task_queue;
+mod hook_effect_tags;
 
 pub static mut HOST_CONFIG: Option<Rc<dyn HostConfig>> = None;
 static mut COMPLETE_WORK: Option<CompleteWork> = None;
diff --git a/packages/react-reconciler/src/update_queue.rs b/packages/react-reconciler/src/update_queue.rs
index 9b03528..ca161fc 100644
--- a/packages/react-reconciler/src/update_queue.rs
+++ b/packages/react-reconciler/src/update_queue.rs
@@ -7,6 +7,7 @@ use web_sys::js_sys::Function;
 use shared::log;
 
 use crate::fiber::{FiberNode, MemoizedState};
+use crate::fiber_hooks::Effect;
 use crate::fiber_lanes::Lane;
 
 #[derive(Clone, Debug)]
@@ -28,6 +29,7 @@ pub struct UpdateType {
 pub struct UpdateQueue {
     pub shared: UpdateType,
     pub dispatch: Option<Function>,
+    pub last_effect: Option<Rc<RefCell<Effect>>>,
 }
 
 pub fn create_update(action: JsValue, lane: Lane) -> Update {
@@ -56,6 +58,7 @@ pub fn create_update_queue() -> Rc<RefCell<UpdateQueue>> {
     Rc::new(RefCell::new(UpdateQueue {
         shared: UpdateType { pending: None },
         dispatch: None,
+        last_effect: None,
     }))
 }
 
diff --git a/packages/react/src/current_dispatcher.rs b/packages/react/src/current_dispatcher.rs
index 8a2a006..d7a79fd 100644
--- a/packages/react/src/current_dispatcher.rs
+++ b/packages/react/src/current_dispatcher.rs
@@ -1,20 +1,21 @@
 use js_sys::{Function, Reflect};
-use wasm_bindgen::prelude::*;
 use wasm_bindgen::JsValue;
+use wasm_bindgen::prelude::*;
 
 #[derive(Debug)]
 pub struct Dispatcher {
     pub use_state: Function,
+    pub use_effect: Function,
     // pub use_callback: *const dyn Fn(),
 }
 
 unsafe impl Send for Dispatcher {}
 
 impl Dispatcher {
-    pub fn new(use_state: Function /*, use_callback: *const dyn Fn()*/) -> Self {
+    pub fn new(use_state: Function, use_effect: Function) -> Self {
         Dispatcher {
             use_state,
-            // use_callback,
+            use_effect,
         }
     }
 }
@@ -35,5 +36,6 @@ fn derive_function_from_js_value(js_value: &JsValue, name: &str) -> Function {
 #[wasm_bindgen(js_name = updateDispatcher)]
 pub unsafe fn update_dispatcher(args: &JsValue) {
     let use_state = derive_function_from_js_value(args, "use_state");
-    CURRENT_DISPATCHER.current = Some(Box::new(Dispatcher::new(use_state)))
+    let use_effect = derive_function_from_js_value(args, "use_effect");
+    CURRENT_DISPATCHER.current = Some(Box::new(Dispatcher::new(use_state, use_effect)))
 }
diff --git a/packages/react/src/lib.rs b/packages/react/src/lib.rs
index a79185b..6d0f80a 100644
--- a/packages/react/src/lib.rs
+++ b/packages/react/src/lib.rs
@@ -115,3 +115,9 @@ pub unsafe fn use_state(initial_state: &JsValue) -> Result<JsValue, JsValue> {
     let use_state = &CURRENT_DISPATCHER.current.as_ref().unwrap().use_state;
     use_state.call1(&JsValue::null(), initial_state)
 }
+
+#[wasm_bindgen(js_name = useEffect)]
+pub unsafe fn use_effect(create: &JsValue, deps: &JsValue) {
+    let use_effect = &CURRENT_DISPATCHER.current.as_ref().unwrap().use_effect;
+    use_effect.call2(&JsValue::null(), create, deps);
+}

From 672fc0f89f8b3c75780d0c6695222f6c912e70ec Mon Sep 17 00:00:00 2001
From: youxingzhi <xingzhi.you@shopee.com>
Date: Wed, 22 May 2024 12:23:44 +0800
Subject: [PATCH 2/6] blog-15: useEffect

---
 Cargo.lock                                    |   1 +
 packages/react-dom/src/lib.rs                 |  12 +-
 packages/react-reconciler/Cargo.toml          |   1 +
 packages/react-reconciler/src/child_fiber.rs  |  34 +++--
 packages/react-reconciler/src/commit_work.rs  | 131 ++++++++++++++++--
 packages/react-reconciler/src/fiber.rs        |  48 ++++---
 packages/react-reconciler/src/fiber_flags.rs  |  12 ++
 packages/react-reconciler/src/fiber_hooks.rs  |  20 +--
 .../react-reconciler/src/hook_effect_tags.rs  |   2 +-
 packages/react-reconciler/src/lib.rs          |   3 +
 packages/react-reconciler/src/work_loop.rs    | 116 ++++++++++++++--
 11 files changed, 312 insertions(+), 68 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index e86c6c8..f5d8fa5 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -521,6 +521,7 @@ dependencies = [
  "bitflags",
  "console_error_panic_hook",
  "react",
+ "scheduler",
  "shared",
  "wasm-bindgen",
  "wasm-bindgen-test",
diff --git a/packages/react-dom/src/lib.rs b/packages/react-dom/src/lib.rs
index 835efde..474cfcb 100644
--- a/packages/react-dom/src/lib.rs
+++ b/packages/react-dom/src/lib.rs
@@ -5,7 +5,10 @@ use wasm_bindgen::prelude::*;
 use web_sys::Node;
 
 use react_reconciler::Reconciler;
-use scheduler::{Priority, unstable_cancel_callback, unstable_schedule_callback as origin_unstable_schedule_callback, unstable_should_yield_to_host};
+use scheduler::{
+    Priority, unstable_cancel_callback,
+    unstable_schedule_callback as origin_unstable_schedule_callback, unstable_should_yield_to_host,
+};
 
 use crate::host_config::ReactDomHostConfig;
 use crate::renderer::Renderer;
@@ -32,7 +35,11 @@ pub fn create_root(container: &JsValue) -> Renderer {
 }
 
 #[wasm_bindgen(js_name = scheduleCallback, variadic)]
-pub fn unstable_schedule_callback(priority_level: Priority, callback: Function, delay: &JsValue) -> u32 {
+pub fn unstable_schedule_callback(
+    priority_level: Priority,
+    callback: Function,
+    delay: &JsValue,
+) -> u32 {
     let delay = delay.dyn_ref::<Array>().unwrap();
     let d = delay.get(0).as_f64().unwrap_or_else(|| 0.0);
     origin_unstable_schedule_callback(priority_level, callback, d)
@@ -47,4 +54,3 @@ pub fn cancel_callback(id: u32) {
 pub fn should_yield_to_host() -> bool {
     unstable_should_yield_to_host()
 }
-
diff --git a/packages/react-reconciler/Cargo.toml b/packages/react-reconciler/Cargo.toml
index 183aaf8..ed11d79 100644
--- a/packages/react-reconciler/Cargo.toml
+++ b/packages/react-reconciler/Cargo.toml
@@ -15,6 +15,7 @@ wasm-bindgen = "0.2.84"
 web-sys = { version = "0.3.69", features = ["console", "Text", "Window", "Document", "HtmlElement"] }
 react = { path = "../react" }
 shared = { path = "../shared" }
+scheduler = { path = "../scheduler" }
 # The `console_error_panic_hook` crate provides better debugging of panics by
 # logging them with `console.error`. This is great for development, but requires
 # all the `std::fmt` and `std::panicking` infrastructure, so isn't great for
diff --git a/packages/react-reconciler/src/child_fiber.rs b/packages/react-reconciler/src/child_fiber.rs
index 740f4e0..5bb4585 100644
--- a/packages/react-reconciler/src/child_fiber.rs
+++ b/packages/react-reconciler/src/child_fiber.rs
@@ -203,9 +203,9 @@ fn update_from_map(
     index: u32,
     element: &JsValue,
     should_track_effects: bool,
-) -> Rc<RefCell<FiberNode>> {
+) -> Option<Rc<RefCell<FiberNode>>> {
     let key_to_use;
-    if type_of(element, "string") {
+    if type_of(element, "string") || type_of(element, "null") {
         key_to_use = JsValue::from(index);
     } else {
         let key = derive_from_js_value(element, "key");
@@ -215,22 +215,24 @@ fn update_from_map(
         }
     }
     let before = existing_children.get(&Key(key_to_use.clone())).clone();
-    if type_of(element, "string") || type_of(element, "number") {
+    if type_of(element, "null") || type_of(element, "string") || type_of(element, "number") {
         let props = create_props_with_content(element.clone());
         if before.is_some() {
             let before = (*before.clone().unwrap()).clone();
             existing_children.remove(&Key(key_to_use.clone()));
             if before.borrow().tag == HostText {
-                return use_fiber(before.clone(), props.clone());
+                return Some(use_fiber(before.clone(), props.clone()));
             } else {
                 delete_child(return_fiber, before, should_track_effects);
             }
         }
-        return Rc::new(RefCell::new(FiberNode::new(
-            WorkTag::HostText,
-            props.clone(),
-            JsValue::null(),
-        )));
+        return if type_of(element, "null") { None } else {
+            Some(Rc::new(RefCell::new(FiberNode::new(
+                WorkTag::HostText,
+                props.clone(),
+                JsValue::null(),
+            ))))
+        };
     } else if type_of(element, "object") && !element.is_null() {
         if derive_from_js_value(&(*element).clone(), "$$typeof") != REACT_ELEMENT_TYPE {
             panic!("Undefined $$typeof");
@@ -243,15 +245,16 @@ fn update_from_map(
                 &before.borrow()._type,
                 &derive_from_js_value(&(*element).clone(), "type"),
             ) {
-                return use_fiber(before.clone(), derive_from_js_value(element, "props"));
+                return Some(use_fiber(before.clone(), derive_from_js_value(element, "props")));
             } else {
                 delete_child(return_fiber, before, should_track_effects);
             }
         }
 
-        return Rc::new(RefCell::new(FiberNode::create_fiber_from_element(element)));
+        return Some(Rc::new(RefCell::new(FiberNode::create_fiber_from_element(element))));
     }
-    panic!("update_from_map unsupported");
+    // panic!("update_from_map unsupported");
+    None
 }
 
 fn reconcile_children_array(
@@ -289,6 +292,13 @@ fn reconcile_children_array(
             &after,
             should_track_effects,
         );
+
+        if new_fiber.is_none() {
+            continue;
+        }
+
+        let new_fiber = new_fiber.unwrap();
+
         {
             new_fiber.borrow_mut().index = i;
             new_fiber.borrow_mut()._return = Some(return_fiber.clone());
diff --git a/packages/react-reconciler/src/commit_work.rs b/packages/react-reconciler/src/commit_work.rs
index 53909dc..3905e9f 100644
--- a/packages/react-reconciler/src/commit_work.rs
+++ b/packages/react-reconciler/src/commit_work.rs
@@ -2,10 +2,14 @@ use std::any::Any;
 use std::cell::RefCell;
 use std::rc::Rc;
 
+use wasm_bindgen::JsValue;
+use web_sys::js_sys::Function;
+
 use shared::{derive_from_js_value, log};
 
-use crate::fiber::{FiberNode, StateNode};
-use crate::fiber_flags::{Flags, get_mutation_mask};
+use crate::fiber::{FiberNode, FiberRootNode, StateNode};
+use crate::fiber_flags::{Flags, get_mutation_mask, get_passive_mask};
+use crate::fiber_hooks::Effect;
 use crate::HostConfig;
 use crate::work_tags::WorkTag;
 use crate::work_tags::WorkTag::{HostComponent, HostRoot, HostText};
@@ -22,18 +26,112 @@ impl CommitWork {
             host_config,
         }
     }
-    pub fn commit_mutation_effects(&mut self, finished_work: Rc<RefCell<FiberNode>>) {
+
+    fn commit_passive_effect(
+        finished_work: Rc<RefCell<FiberNode>>,
+        root: Rc<RefCell<FiberRootNode>>,
+        _type: &str,
+    ) {
+        let finished_work_b = finished_work.borrow();
+        if finished_work_b.tag != WorkTag::FunctionComponent
+            || (_type == "update"
+            && (finished_work_b.flags.clone() & Flags::PassiveEffect == Flags::NoFlags))
+        {
+            return;
+        }
+
+        let update_queue = &finished_work_b.update_queue;
+        if update_queue.is_some() {
+            let update_queue = update_queue.clone().unwrap();
+            if (update_queue.borrow().last_effect.is_none()) {
+                log!("When FC has PassiveEffect, the effect should exist.")
+            }
+            if _type == "unmount" {
+                root.borrow()
+                    .pending_passive_effects
+                    .borrow_mut()
+                    .unmount
+                    .push(update_queue.borrow().last_effect.clone().unwrap());
+            } else {
+                root.borrow()
+                    .pending_passive_effects
+                    .borrow_mut()
+                    .update
+                    .push(update_queue.borrow().last_effect.clone().unwrap());
+            }
+        }
+    }
+
+    pub fn commit_hook_effect_list(
+        flags: Flags,
+        last_effect: Rc<RefCell<Effect>>,
+        callback: fn(effect: Rc<RefCell<Effect>>),
+    ) {
+        let mut effect = last_effect.borrow().next.clone();
+        loop {
+            let mut effect_rc = effect.clone().unwrap();
+            if effect_rc.borrow().tag.clone() & flags.clone() == flags.clone() {
+                callback(effect_rc.clone())
+            }
+            effect = effect_rc.borrow().next.clone();
+            if Rc::ptr_eq(
+                &effect.clone().unwrap(),
+                last_effect.borrow().next.as_ref().unwrap(),
+            ) {
+                break;
+            }
+        }
+    }
+    pub fn commit_hook_effect_list_destroy(flags: Flags, last_effect: Rc<RefCell<Effect>>) {
+        CommitWork::commit_hook_effect_list(flags, last_effect, |effect: Rc<RefCell<Effect>>| {
+            let destroy = &effect.borrow().destroy;
+            if destroy.is_function() {
+                destroy.call0(&JsValue::null());
+            }
+            effect.borrow_mut().tag &= !Flags::HookHasEffect;
+        });
+    }
+
+    pub fn commit_hook_effect_list_unmount(flags: Flags, last_effect: Rc<RefCell<Effect>>) {
+        CommitWork::commit_hook_effect_list(flags, last_effect, |effect: Rc<RefCell<Effect>>| {
+            let destroy = &effect.borrow().destroy;
+            if destroy.is_function() {
+                destroy.call0(&JsValue::null());
+            }
+        });
+    }
+
+    pub fn commit_hook_effect_list_mount(flags: Flags, last_effect: Rc<RefCell<Effect>>) {
+        CommitWork::commit_hook_effect_list(flags, last_effect, |effect: Rc<RefCell<Effect>>| {
+            let create = &effect.borrow().create;
+            if create.is_function() {
+                let destroy = create.call0(&JsValue::null()).unwrap();
+                effect.borrow_mut().destroy = Function::from(destroy.clone());
+            }
+        });
+    }
+
+    pub fn commit_mutation_effects(
+        &mut self,
+        finished_work: Rc<RefCell<FiberNode>>,
+        root: Rc<RefCell<FiberRootNode>>,
+    ) {
         self.next_effect = Some(finished_work);
         while self.next_effect.is_some() {
             let next_effect = self.next_effect.clone().unwrap().clone();
             let child = next_effect.borrow().child.clone();
             if child.is_some()
-                && get_mutation_mask().contains(next_effect.borrow().subtree_flags.clone())
+                && next_effect.borrow().subtree_flags.clone()
+                & (get_mutation_mask() | get_passive_mask())
+                != Flags::NoFlags
             {
                 self.next_effect = child;
             } else {
                 while self.next_effect.is_some() {
-                    self.commit_mutation_effects_on_fiber(self.next_effect.clone().unwrap());
+                    self.commit_mutation_effects_on_fiber(
+                        self.next_effect.clone().unwrap(),
+                        root.clone(),
+                    );
                     let sibling = self
                         .next_effect
                         .clone()
@@ -66,7 +164,11 @@ impl CommitWork {
         }
     }
 
-    fn commit_mutation_effects_on_fiber(&self, finished_work: Rc<RefCell<FiberNode>>) {
+    fn commit_mutation_effects_on_fiber(
+        &self,
+        finished_work: Rc<RefCell<FiberNode>>,
+        root: Rc<RefCell<FiberRootNode>>,
+    ) {
         let flags = finished_work.borrow().flags.clone();
         if flags.contains(Flags::Placement) {
             self.commit_placement(finished_work.clone());
@@ -78,7 +180,7 @@ impl CommitWork {
                 let deletions = &finished_work.borrow().deletions;
                 if !deletions.is_empty() {
                     for child_to_delete in deletions {
-                        self.commit_deletion(child_to_delete.clone());
+                        self.commit_deletion(child_to_delete.clone(), root.clone());
                     }
                 }
             }
@@ -90,6 +192,11 @@ impl CommitWork {
             self.commit_update(finished_work.clone());
             finished_work.borrow_mut().flags -= Flags::Update;
         }
+
+        if flags & Flags::PassiveEffect != Flags::NoFlags {
+            CommitWork::commit_passive_effect(finished_work.clone(), root, "update");
+            finished_work.borrow_mut().flags -= Flags::PassiveEffect;
+        }
     }
 
     fn commit_update(&self, finished_work: Rc<RefCell<FiberNode>>) {
@@ -107,13 +214,19 @@ impl CommitWork {
         };
     }
 
-    fn commit_deletion(&self, child_to_delete: Rc<RefCell<FiberNode>>) {
+    fn commit_deletion(
+        &self,
+        child_to_delete: Rc<RefCell<FiberNode>>,
+        root: Rc<RefCell<FiberRootNode>>,
+    ) {
         let first_host_fiber: Rc<RefCell<Option<Rc<RefCell<FiberNode>>>>> =
             Rc::new(RefCell::new(None));
         self.commit_nested_unmounts(child_to_delete.clone(), |unmount_fiber| {
             let cloned = first_host_fiber.clone();
             match unmount_fiber.borrow().tag {
-                WorkTag::FunctionComponent => {}
+                WorkTag::FunctionComponent => {
+                    CommitWork::commit_passive_effect(unmount_fiber.clone(), root.clone(), "unmount");
+                }
                 WorkTag::HostRoot => {}
                 WorkTag::HostComponent => {
                     if cloned.borrow().is_none() {
diff --git a/packages/react-reconciler/src/fiber.rs b/packages/react-reconciler/src/fiber.rs
index 244f8cd..60c3f75 100644
--- a/packages/react-reconciler/src/fiber.rs
+++ b/packages/react-reconciler/src/fiber.rs
@@ -29,11 +29,17 @@ pub enum MemoizedState {
     Effect(Rc<RefCell<Effect>>),
 }
 
+#[derive(Debug, Clone)]
+pub struct PendingPassiveEffects {
+    pub unmount: Vec<Rc<RefCell<Effect>>>,
+    pub update: Vec<Rc<RefCell<Effect>>>,
+}
+
 impl MemoizedState {
     pub fn js_value(&self) -> Option<JsValue> {
         match self {
             MemoizedState::MemoizedJsValue(js_value) => Some(js_value.clone()),
-            _ => None
+            _ => None,
         }
     }
 }
@@ -84,10 +90,7 @@ impl Debug for FiberNode {
                 write!(
                     f,
                     "{:?}(key:{:?}, flags:{:?}, subtreeFlags:{:?})",
-                    self._type,
-                    self.key,
-                    self.flags,
-                    self.subtree_flags
+                    self._type, self.key, self.flags, self.subtree_flags
                 )
                     .expect("print error");
             }
@@ -96,10 +99,7 @@ impl Debug for FiberNode {
                     f,
                     "{:?}(state_node:{:?}, flags:{:?})",
                     self.tag,
-                    Reflect::get(
-                        self.pending_props.as_ref(),
-                        &JsValue::from_str("content"),
-                    )
+                    Reflect::get(self.pending_props.as_ref(), &JsValue::from_str("content"))
                         .unwrap(),
                     self.flags
                 )
@@ -233,6 +233,7 @@ pub struct FiberRootNode {
     pub finished_work: Option<Rc<RefCell<FiberNode>>>,
     pub pending_lanes: Lane,
     pub finished_lane: Lane,
+    pub pending_passive_effects: Rc<RefCell<PendingPassiveEffects>>,
 }
 
 impl FiberRootNode {
@@ -243,6 +244,10 @@ impl FiberRootNode {
             finished_work: None,
             pending_lanes: Lane::NoLane,
             finished_lane: Lane::NoLane,
+            pending_passive_effects: Rc::new(RefCell::new(PendingPassiveEffects {
+                unmount: vec![],
+                update: vec![],
+            })),
         }
     }
 
@@ -262,10 +267,7 @@ struct QueueItem {
 
 impl QueueItem {
     fn new(node: Rc<RefCell<FiberNode>>, depth: u32) -> Self {
-        Self {
-            node,
-            depth,
-        }
+        Self { node, depth }
     }
 }
 
@@ -276,7 +278,11 @@ impl Debug for FiberRootNode {
             let mut queue = VecDeque::new();
             queue.push_back(QueueItem::new(Rc::clone(&node), 0));
 
-            while let Some(QueueItem { node: current, depth }) = queue.pop_front() {
+            while let Some(QueueItem {
+                               node: current,
+                               depth,
+                           }) = queue.pop_front()
+            {
                 let current_ref = current.borrow();
 
                 write!(f, "{:?}", current_ref).expect("TODO: panic print FiberNode");
@@ -285,16 +291,22 @@ impl Debug for FiberRootNode {
                     queue.push_back(QueueItem::new(Rc::clone(child), depth + 1));
                     let mut sibling = child.clone().borrow().sibling.clone();
                     while sibling.is_some() {
-                        queue.push_back(QueueItem::new(Rc::clone(sibling.as_ref().unwrap()), depth + 1));
+                        queue.push_back(QueueItem::new(
+                            Rc::clone(sibling.as_ref().unwrap()),
+                            depth + 1,
+                        ));
                         sibling = sibling.as_ref().unwrap().clone().borrow().sibling.clone();
                     }
                 }
 
-                if let Some(QueueItem { node: next, depth: next_depth }) = queue.front() {
+                if let Some(QueueItem {
+                                node: next,
+                                depth: next_depth,
+                            }) = queue.front()
+                {
                     if *next_depth != depth {
                         writeln!(f, "").expect("print error");
-                        writeln!(f, "------------------------------------")
-                            .expect("print error");
+                        writeln!(f, "------------------------------------").expect("print error");
                         continue;
                     }
 
diff --git a/packages/react-reconciler/src/fiber_flags.rs b/packages/react-reconciler/src/fiber_flags.rs
index a7a31ad..ac3d87b 100644
--- a/packages/react-reconciler/src/fiber_flags.rs
+++ b/packages/react-reconciler/src/fiber_flags.rs
@@ -7,9 +7,21 @@ bitflags! {
         const Placement = 0b00000010;
         const Update = 0b00000100;
         const ChildDeletion = 0b00010000;
+        const PassiveEffect = 0b00100000;
+        // effect hook
+        const HookHasEffect = 0b00100001;
+        const Passive = 0b00000010;
+    }
+}
+
+impl PartialEq for Flags {
+    fn eq(&self, other: &Self) -> bool {
+        self.bits() == other.bits()
     }
 }
 
 pub fn get_mutation_mask() -> Flags {
     Flags::Placement | Flags::Update | Flags::ChildDeletion
 }
+
+pub fn get_passive_mask() -> Flags { Flags::PassiveEffect | Flags::ChildDeletion }
diff --git a/packages/react-reconciler/src/fiber_hooks.rs b/packages/react-reconciler/src/fiber_hooks.rs
index f640f9e..5133a44 100644
--- a/packages/react-reconciler/src/fiber_hooks.rs
+++ b/packages/react-reconciler/src/fiber_hooks.rs
@@ -8,8 +8,8 @@ use web_sys::js_sys::{Array, Function, Object, Reflect};
 use shared::log;
 
 use crate::fiber::{FiberNode, MemoizedState};
+use crate::fiber_flags::Flags;
 use crate::fiber_lanes::{Lane, request_update_lane};
-use crate::hook_effect_tags::HookEffectTags;
 use crate::update_queue::{
     create_update, create_update_queue, enqueue_update, process_update_queue, UpdateQueue,
 };
@@ -25,18 +25,18 @@ static mut WORK_IN_PROGRESS_HOOK: Option<Rc<RefCell<Hook>>> = None;
 static mut CURRENT_HOOK: Option<Rc<RefCell<Hook>>> = None;
 static mut RENDER_LANE: Lane = Lane::NoLane;
 
-#[derive(Debug)]
+#[derive(Debug, Clone)]
 pub struct Effect {
-    tag: HookEffectTags,
-    create: Function,
-    destroy: Function,
-    deps: Array,
-    next: Option<Rc<RefCell<Effect>>>,
+    pub tag: Flags,
+    pub create: Function,
+    pub destroy: Function,
+    pub deps: Array,
+    pub next: Option<Rc<RefCell<Effect>>>,
 }
 
 impl Effect {
     fn new(
-        tag: HookEffectTags,
+        tag: Flags,
         create: Function,
         destroy: Function,
         deps: Array,
@@ -350,10 +350,10 @@ fn create_fc_update_queue() -> Rc<RefCell<UpdateQueue>> {
     update_queue
 }
 
-fn push_effect(hook_flags: HookEffectTags, create: Function, destroy: Function, deps: Array) -> Effect {
+fn push_effect(hook_flags: Flags, create: Function, destroy: Function, deps: Array) -> Rc<RefCell<Effect>> {
     let mut effect = Rc::new(RefCell::new(Effect::new(hook_flags, create, destroy, deps, None)));
     let fiber = unsafe { CURRENTLY_RENDERING_FIBER.clone().unwrap() };
-    let update_queue = { fiber.borrow().update_queue.as_ref() };
+    let update_queue = { fiber.borrow().update_queue.clone() };
     if update_queue.is_none() {
         let update_queue = create_fc_update_queue();
         fiber.borrow_mut().update_queue = Some(update_queue.clone());
diff --git a/packages/react-reconciler/src/hook_effect_tags.rs b/packages/react-reconciler/src/hook_effect_tags.rs
index bd0923c..f6f5678 100644
--- a/packages/react-reconciler/src/hook_effect_tags.rs
+++ b/packages/react-reconciler/src/hook_effect_tags.rs
@@ -1,7 +1,7 @@
 use bitflags::bitflags;
 
 bitflags! {
-    #[derive(Debug)]
+    #[derive(Debug, Clone)]
     pub struct HookEffectTags: u8 {
         const HookHasEffect = 0b0001;
         const Passive = 0b0010; // useEffect
diff --git a/packages/react-reconciler/src/lib.rs b/packages/react-reconciler/src/lib.rs
index f4517da..3ce56d1 100644
--- a/packages/react-reconciler/src/lib.rs
+++ b/packages/react-reconciler/src/lib.rs
@@ -4,6 +4,7 @@ use std::rc::Rc;
 
 use wasm_bindgen::JsValue;
 
+use crate::commit_work::CommitWork;
 use crate::complete_work::CompleteWork;
 use crate::fiber::{FiberNode, FiberRootNode, StateNode};
 // use crate::fiber_hooks::{WORK_LOOP as Fiber_HOOKS};
@@ -28,6 +29,7 @@ mod hook_effect_tags;
 
 pub static mut HOST_CONFIG: Option<Rc<dyn HostConfig>> = None;
 static mut COMPLETE_WORK: Option<CompleteWork> = None;
+static mut COMMIT_WORK: Option<CommitWork> = None;
 
 pub trait HostConfig {
     fn create_text_instance(&self, content: &JsValue) -> Rc<dyn Any>;
@@ -80,6 +82,7 @@ impl Reconciler {
         unsafe {
             HOST_CONFIG = Some(self.host_config.clone());
             COMPLETE_WORK = Some(CompleteWork::new(self.host_config.clone()));
+            COMMIT_WORK = Some(CommitWork::new(self.host_config.clone()));
             schedule_update_on_fiber(host_root_fiber, root_render_priority);
         }
         element.clone()
diff --git a/packages/react-reconciler/src/work_loop.rs b/packages/react-reconciler/src/work_loop.rs
index abca79d..acfca53 100644
--- a/packages/react-reconciler/src/work_loop.rs
+++ b/packages/react-reconciler/src/work_loop.rs
@@ -1,21 +1,37 @@
 use std::cell::RefCell;
 use std::rc::Rc;
 
-use wasm_bindgen::JsValue;
+use bitflags::bitflags;
+use wasm_bindgen::{JsCast, JsValue};
+use wasm_bindgen::closure::Closure;
+use web_sys::js_sys::Function;
 
+use scheduler::{Priority, unstable_schedule_callback_no_delay};
 use shared::{is_dev, log};
 
-use crate::{COMPLETE_WORK, HOST_CONFIG, HostConfig};
+use crate::{COMMIT_WORK, COMPLETE_WORK, HOST_CONFIG, HostConfig};
 use crate::begin_work::begin_work;
 use crate::commit_work::CommitWork;
-use crate::fiber::{FiberNode, FiberRootNode, StateNode};
-use crate::fiber_flags::get_mutation_mask;
+use crate::fiber::{FiberNode, FiberRootNode, PendingPassiveEffects, StateNode};
+use crate::fiber_flags::{Flags, get_mutation_mask};
 use crate::fiber_lanes::{get_highest_priority, Lane, merge_lanes};
 use crate::sync_task_queue::{flush_sync_callbacks, schedule_sync_callback};
 use crate::work_tags::WorkTag;
 
+bitflags! {
+    #[derive(Debug, Clone)]
+    pub struct ExecutionContext: u8 {
+        const NoContext = 0b0000;
+        const RenderContext = 0b0010;
+        const CommitContext = 0b0100;
+        const ChildDeletion = 0b00010000;
+    }
+}
+
 static mut WORK_IN_PROGRESS: Option<Rc<RefCell<FiberNode>>> = None;
 static mut WORK_IN_PROGRESS_ROOT_RENDER_LANE: Lane = Lane::NoLane;
+static mut EXECUTION_CONTEXT: ExecutionContext = ExecutionContext::NoContext;
+static mut ROOT_DOES_HAVE_PASSIVE_EFFECTS: bool = false;
 
 pub fn schedule_update_on_fiber(fiber: Rc<RefCell<FiberNode>>, lane: Lane) {
     if is_dev() {
@@ -88,7 +104,9 @@ fn ensure_root_is_scheduled(root: Rc<RefCell<FiberRootNode>>) {
         perform_sync_work_on_root(root_cloned.clone(), update_lane.clone());
     }));
     unsafe {
-        HOST_CONFIG.as_ref().unwrap()
+        HOST_CONFIG
+            .as_ref()
+            .unwrap()
             .schedule_microtask(Box::new(|| flush_sync_callbacks()));
     }
 }
@@ -101,6 +119,12 @@ fn perform_sync_work_on_root(root: Rc<RefCell<FiberRootNode>>, lane: Lane) {
         return;
     }
 
+    let prev_execution_context: ExecutionContext;
+    unsafe {
+        prev_execution_context = EXECUTION_CONTEXT.clone();
+        EXECUTION_CONTEXT |= ExecutionContext::RenderContext;
+    }
+
     prepare_fresh_stack(root.clone(), lane.clone());
 
     loop {
@@ -117,7 +141,10 @@ fn perform_sync_work_on_root(root: Rc<RefCell<FiberRootNode>>, lane: Lane) {
 
     log!("{:?}", *root.clone().borrow());
 
-    unsafe { WORK_IN_PROGRESS_ROOT_RENDER_LANE = Lane::NoLane; }
+    unsafe {
+        EXECUTION_CONTEXT = prev_execution_context;
+        WORK_IN_PROGRESS_ROOT_RENDER_LANE = Lane::NoLane;
+    }
     let finished_work = {
         root.clone()
             .borrow()
@@ -133,6 +160,29 @@ fn perform_sync_work_on_root(root: Rc<RefCell<FiberRootNode>>, lane: Lane) {
     commit_root(root);
 }
 
+fn flush_passive_effects(pending_passive_effects: Rc<RefCell<PendingPassiveEffects>>) {
+    unsafe {
+        if EXECUTION_CONTEXT
+            .contains(ExecutionContext::RenderContext | ExecutionContext::CommitContext)
+        {
+            log!("Cannot execute useEffect callback in React work loop")
+        }
+
+        for effect in &pending_passive_effects.borrow().unmount {
+            CommitWork::commit_hook_effect_list_destroy(Flags::Passive, effect.clone());
+        }
+        pending_passive_effects.borrow_mut().unmount = vec![];
+
+        for effect in &pending_passive_effects.borrow().update {
+            CommitWork::commit_hook_effect_list_unmount(Flags::Passive | Flags::HookHasEffect, effect.clone());
+        }
+        for effect in &pending_passive_effects.borrow().update {
+            CommitWork::commit_hook_effect_list_mount(Flags::Passive | Flags::HookHasEffect, effect.clone());
+        }
+        pending_passive_effects.borrow_mut().update = vec![];
+    }
+}
+
 fn commit_root(root: Rc<RefCell<FiberRootNode>>) {
     let cloned = root.clone();
     if cloned.borrow().finished_work.is_none() {
@@ -150,18 +200,53 @@ fn commit_root(root: Rc<RefCell<FiberRootNode>>) {
         log!("Commit phase finished lane should not be NoLane")
     }
 
+    let subtree_flags = finished_work.borrow().subtree_flags.clone();
+    let flags = finished_work.borrow().flags.clone();
+    // useEffect
+    let root_cloned = root.clone();
+    if flags.contains(Flags::PassiveEffect) || subtree_flags.contains(Flags::PassiveEffect) {
+        if unsafe { !ROOT_DOES_HAVE_PASSIVE_EFFECTS } {
+            unsafe { ROOT_DOES_HAVE_PASSIVE_EFFECTS = true }
+            let closure =
+                Closure::wrap(Box::new(move || {
+                    flush_passive_effects(root_cloned.borrow().pending_passive_effects.clone())
+                })
+                    as Box<dyn Fn()>);
+            let function = closure
+                .as_ref()
+                .unchecked_ref::<Function>()
+                .clone();
+            closure.forget();
+            unstable_schedule_callback_no_delay(Priority::NormalPriority, function);
+        }
+    }
+
     let subtree_has_effect =
-        get_mutation_mask().contains(finished_work.clone().borrow().subtree_flags.clone());
+        get_mutation_mask().contains(subtree_flags);
     let root_has_effect =
-        get_mutation_mask().contains(finished_work.clone().borrow().flags.clone());
+        get_mutation_mask().contains(flags);
 
-    let commit_work = &mut CommitWork::new(unsafe { HOST_CONFIG.clone().unwrap() });
     if subtree_has_effect || root_has_effect {
-        commit_work.commit_mutation_effects(finished_work.clone());
+        let prev_execution_context: ExecutionContext;
+        unsafe {
+            prev_execution_context = EXECUTION_CONTEXT.clone();
+            EXECUTION_CONTEXT |= ExecutionContext::CommitContext;
+        }
+
+        unsafe { COMMIT_WORK.as_mut().unwrap().commit_mutation_effects(finished_work.clone(), root.clone()); }
+
         cloned.borrow_mut().current = finished_work.clone();
+
+        unsafe {
+            EXECUTION_CONTEXT |= prev_execution_context;
+        }
     } else {
         cloned.borrow_mut().current = finished_work.clone();
     }
+
+    unsafe {
+        ROOT_DOES_HAVE_PASSIVE_EFFECTS = false;
+    }
 }
 
 fn prepare_fresh_stack(root: Rc<RefCell<FiberRootNode>>, lane: Lane) {
@@ -176,9 +261,6 @@ fn prepare_fresh_stack(root: Rc<RefCell<FiberRootNode>>, lane: Lane) {
 }
 
 fn work_loop() -> Result<(), JsValue> {
-    // while self.work_in_progress.is_some() {
-    //     self.perform_unit_of_work(self.work_in_progress.clone().unwrap())?;
-    // }
     unsafe {
         while WORK_IN_PROGRESS.is_some() {
             perform_unit_of_work(WORK_IN_PROGRESS.clone().unwrap())?;
@@ -188,7 +270,9 @@ fn work_loop() -> Result<(), JsValue> {
 }
 
 fn perform_unit_of_work(fiber: Rc<RefCell<FiberNode>>) -> Result<(), JsValue> {
-    let next = begin_work(fiber.clone(), unsafe { WORK_IN_PROGRESS_ROOT_RENDER_LANE.clone() })?;
+    let next = begin_work(fiber.clone(), unsafe {
+        WORK_IN_PROGRESS_ROOT_RENDER_LANE.clone()
+    })?;
     let pending_props = { fiber.clone().borrow().pending_props.clone() };
     fiber.clone().borrow_mut().memoized_props = pending_props;
     if next.is_none() {
@@ -206,7 +290,9 @@ fn complete_unit_of_work(fiber: Rc<RefCell<FiberNode>>) {
     unsafe {
         loop {
             let next = COMPLETE_WORK
-                .as_ref().unwrap().complete_work(node.clone().unwrap().clone());
+                .as_ref()
+                .unwrap()
+                .complete_work(node.clone().unwrap().clone());
 
             if next.is_some() {
                 // self.work_in_progress = next.clone();

From 8457004ef43b22786ff0c36a4099ec52bfdabb74 Mon Sep 17 00:00:00 2001
From: youxingzhi <xingzhi.you@shopee.com>
Date: Wed, 22 May 2024 18:59:49 +0800
Subject: [PATCH 3/6] blog-15: useEffect fiber hooks, has bugs

---
 examples/hello-world/src/App.tsx             |  9 ++-
 examples/hello-world/src/main.tsx            | 41 ++-----------
 packages/react-reconciler/src/commit_work.rs | 12 ++--
 packages/react-reconciler/src/fiber_hooks.rs | 63 ++++++++++++++++----
 packages/react-reconciler/src/work_loop.rs   | 49 +++++++++------
 packages/scheduler/src/lib.rs                | 11 ++--
 6 files changed, 104 insertions(+), 81 deletions(-)

diff --git a/examples/hello-world/src/App.tsx b/examples/hello-world/src/App.tsx
index bc52e41..9df2698 100644
--- a/examples/hello-world/src/App.tsx
+++ b/examples/hello-world/src/App.tsx
@@ -2,9 +2,7 @@ import {useEffect, useState} from 'react'
 
 function App() {
     const [num, updateNum] = useState(0);
-    useEffect(() => {
 
-    }, []);
     return (
         <ul
             onClick={(e) => {
@@ -16,11 +14,18 @@ function App() {
             }}
         >
             num值为：{num}
+            {num === 0 && <Child num={1}/>}
         </ul>
     );
 }
 
 function Child({num}: { num: number }) {
+    useEffect(() => {
+        console.log('this is useEffect')
+        return () => {
+            console.log('this is destroy')
+        }
+    }, []);
     return <div>{num}</div>;
 }
 
diff --git a/examples/hello-world/src/main.tsx b/examples/hello-world/src/main.tsx
index f5c0c12..14cf094 100644
--- a/examples/hello-world/src/main.tsx
+++ b/examples/hello-world/src/main.tsx
@@ -1,41 +1,8 @@
-// import App from './App.tsx'
-//
-// const root = createRoot(document.getElementById("root"))
-// root.render(<App/>)
-import {Priority, scheduleCallback, shouldYieldToHost} from 'react-dom'
+import App from './App.tsx'
+import {createRoot} from 'react-dom'
 
+const root = createRoot(document.getElementById("root"))
+root.render(<App/>)
 
-// scheduleCallback(2, function func1() {
-//     console.log('1')
-// })
-//
-// const taskId = scheduleCallback(1, function func2() {
-//     console.log('2')
-// })
 
-// cancelCallback(taskId)
-
-
-function func2(didTimeout) {
-    console.log(didTimeout)
-    if (!didTimeout) console.log(2)
-}
-
-function func1() {
-    console.log(1)
-    return func2
-}
-
-scheduleCallback(Priority.NormalPriority, func1)
-
-function work() {
-    while (!shouldYieldToHost()) {
-        console.log('work')
-    }
-    console.log('yield to host')
-}
-
-scheduleCallback(1, function func2() {
-    work()
-})
 
diff --git a/packages/react-reconciler/src/commit_work.rs b/packages/react-reconciler/src/commit_work.rs
index 3905e9f..890a095 100644
--- a/packages/react-reconciler/src/commit_work.rs
+++ b/packages/react-reconciler/src/commit_work.rs
@@ -2,7 +2,7 @@ use std::any::Any;
 use std::cell::RefCell;
 use std::rc::Rc;
 
-use wasm_bindgen::JsValue;
+use wasm_bindgen::{JsCast, JsValue};
 use web_sys::js_sys::Function;
 
 use shared::{derive_from_js_value, log};
@@ -47,6 +47,7 @@ impl CommitWork {
                 log!("When FC has PassiveEffect, the effect should exist.")
             }
             if _type == "unmount" {
+                log!("commit_passive_effect {:?}", update_queue.borrow().last_effect.clone().unwrap().borrow().create);
                 root.borrow()
                     .pending_passive_effects
                     .borrow_mut()
@@ -85,8 +86,9 @@ impl CommitWork {
     pub fn commit_hook_effect_list_destroy(flags: Flags, last_effect: Rc<RefCell<Effect>>) {
         CommitWork::commit_hook_effect_list(flags, last_effect, |effect: Rc<RefCell<Effect>>| {
             let destroy = &effect.borrow().destroy;
+            log!("commit_hook_effect_list_destroy {:?}", destroy);
             if destroy.is_function() {
-                destroy.call0(&JsValue::null());
+                destroy.dyn_ref::<Function>().unwrap().call0(&JsValue::null());
             }
             effect.borrow_mut().tag &= !Flags::HookHasEffect;
         });
@@ -96,17 +98,17 @@ impl CommitWork {
         CommitWork::commit_hook_effect_list(flags, last_effect, |effect: Rc<RefCell<Effect>>| {
             let destroy = &effect.borrow().destroy;
             if destroy.is_function() {
-                destroy.call0(&JsValue::null());
+                destroy.dyn_ref::<Function>().unwrap().call0(&JsValue::null());
             }
         });
     }
 
     pub fn commit_hook_effect_list_mount(flags: Flags, last_effect: Rc<RefCell<Effect>>) {
         CommitWork::commit_hook_effect_list(flags, last_effect, |effect: Rc<RefCell<Effect>>| {
-            let create = &effect.borrow().create;
+            let create = { effect.borrow().create.clone() };
             if create.is_function() {
                 let destroy = create.call0(&JsValue::null()).unwrap();
-                effect.borrow_mut().destroy = Function::from(destroy.clone());
+                effect.borrow_mut().destroy = destroy;
             }
         });
     }
diff --git a/packages/react-reconciler/src/fiber_hooks.rs b/packages/react-reconciler/src/fiber_hooks.rs
index 5133a44..c5dc55f 100644
--- a/packages/react-reconciler/src/fiber_hooks.rs
+++ b/packages/react-reconciler/src/fiber_hooks.rs
@@ -3,7 +3,7 @@ use std::rc::Rc;
 
 use wasm_bindgen::{JsCast, JsValue};
 use wasm_bindgen::prelude::{Closure, wasm_bindgen};
-use web_sys::js_sys::{Array, Function, Object, Reflect};
+use web_sys::js_sys::{Function, Object, Reflect};
 
 use shared::log;
 
@@ -29,8 +29,8 @@ static mut RENDER_LANE: Lane = Lane::NoLane;
 pub struct Effect {
     pub tag: Flags,
     pub create: Function,
-    pub destroy: Function,
-    pub deps: Array,
+    pub destroy: JsValue,
+    pub deps: JsValue,
     pub next: Option<Rc<RefCell<Effect>>>,
 }
 
@@ -38,8 +38,8 @@ impl Effect {
     fn new(
         tag: Flags,
         create: Function,
-        destroy: Function,
-        deps: Array,
+        destroy: JsValue,
+        deps: JsValue,
         next: Option<Rc<RefCell<Effect>>>,
     ) -> Self {
         Self {
@@ -52,7 +52,6 @@ impl Effect {
     }
 }
 
-
 #[derive(Debug, Clone)]
 pub struct Hook {
     memoized_state: Option<MemoizedState>,
@@ -92,7 +91,7 @@ fn update_hooks_to_dispatcher(is_update: bool) {
         update_effect
     } else {
         mount_effect
-    }) as Box<dyn Fn(JsValue, JsValue)>);
+    }) as Box<dyn Fn(Function, JsValue)>);
     let use_effect = use_effect_closure
         .as_ref()
         .unchecked_ref::<Function>()
@@ -350,8 +349,15 @@ fn create_fc_update_queue() -> Rc<RefCell<UpdateQueue>> {
     update_queue
 }
 
-fn push_effect(hook_flags: Flags, create: Function, destroy: Function, deps: Array) -> Rc<RefCell<Effect>> {
-    let mut effect = Rc::new(RefCell::new(Effect::new(hook_flags, create, destroy, deps, None)));
+fn push_effect(
+    hook_flags: Flags,
+    create: Function,
+    destroy: JsValue,
+    deps: JsValue,
+) -> Rc<RefCell<Effect>> {
+    let mut effect = Rc::new(RefCell::new(Effect::new(
+        hook_flags, create, destroy, deps, None,
+    )));
     let fiber = unsafe { CURRENTLY_RENDERING_FIBER.clone().unwrap() };
     let update_queue = { fiber.borrow().update_queue.clone() };
     if update_queue.is_none() {
@@ -359,14 +365,45 @@ fn push_effect(hook_flags: Flags, create: Function, destroy: Function, deps: Arr
         fiber.borrow_mut().update_queue = Some(update_queue.clone());
         effect.borrow_mut().next = Option::from(effect.clone());
         update_queue.borrow_mut().last_effect = Option::from(effect.clone());
-    } else {}
+    } else {
+        let update_queue = update_queue.unwrap();
+        let last_effect = update_queue.borrow().last_effect.clone();
+        if last_effect.is_none() {
+            effect.borrow_mut().next = Some(effect.clone());
+            update_queue.borrow_mut().last_effect = Some(effect.clone());
+        } else {
+            let last_effect = last_effect.unwrap();
+            let first_effect = last_effect.borrow().next.clone();
+            last_effect.borrow_mut().next = Some(effect.clone());
+            effect.borrow_mut().next = first_effect;
+            update_queue.borrow_mut().last_effect = Some(effect.clone());
+        }
+    }
     return effect;
 }
 
-fn mount_effect(create: JsValue, deps: JsValue) {
+fn mount_effect(create: Function, deps: JsValue) {
     let hook = mount_work_in_progress_hook();
+    let next_deps = if deps.is_undefined() {
+        JsValue::null()
+    } else {
+        deps
+    };
+
+    // 注意区分PassiveEffect与Passive，PassiveEffect是针对fiber.flags
+    // Passive是effect类型，代表useEffect。类似的，Layout代表useLayoutEffect
+    let currently_rendering_fiber = unsafe { CURRENTLY_RENDERING_FIBER.clone().unwrap() };
+    currently_rendering_fiber.borrow_mut().flags |= Flags::PassiveEffect;
+    hook.as_ref().unwrap().clone().borrow_mut().memoized_state =
+        Some(MemoizedState::Effect(push_effect(
+            Flags::Passive | Flags::HookHasEffect,
+            create,
+            JsValue::null(),
+            next_deps,
+        )));
+
     // let next_deps = deps.is_undefined() ?
-    log!("create {:?}", create);
+    // log!("create {:?}", create);
 }
 
-fn update_effect(create: JsValue, deps: JsValue) {}
+fn update_effect(create: Function, deps: JsValue) {}
diff --git a/packages/react-reconciler/src/work_loop.rs b/packages/react-reconciler/src/work_loop.rs
index acfca53..38448ed 100644
--- a/packages/react-reconciler/src/work_loop.rs
+++ b/packages/react-reconciler/src/work_loop.rs
@@ -13,7 +13,7 @@ use crate::{COMMIT_WORK, COMPLETE_WORK, HOST_CONFIG, HostConfig};
 use crate::begin_work::begin_work;
 use crate::commit_work::CommitWork;
 use crate::fiber::{FiberNode, FiberRootNode, PendingPassiveEffects, StateNode};
-use crate::fiber_flags::{Flags, get_mutation_mask};
+use crate::fiber_flags::{Flags, get_mutation_mask, get_passive_mask};
 use crate::fiber_lanes::{get_highest_priority, Lane, merge_lanes};
 use crate::sync_task_queue::{flush_sync_callbacks, schedule_sync_callback};
 use crate::work_tags::WorkTag;
@@ -168,16 +168,27 @@ fn flush_passive_effects(pending_passive_effects: Rc<RefCell<PendingPassiveEffec
             log!("Cannot execute useEffect callback in React work loop")
         }
 
+        log!(
+            "flush_passive_effects {:?}",
+            pending_passive_effects.clone().borrow().unmount
+        );
+
         for effect in &pending_passive_effects.borrow().unmount {
             CommitWork::commit_hook_effect_list_destroy(Flags::Passive, effect.clone());
         }
         pending_passive_effects.borrow_mut().unmount = vec![];
 
         for effect in &pending_passive_effects.borrow().update {
-            CommitWork::commit_hook_effect_list_unmount(Flags::Passive | Flags::HookHasEffect, effect.clone());
+            CommitWork::commit_hook_effect_list_unmount(
+                Flags::Passive | Flags::HookHasEffect,
+                effect.clone(),
+            );
         }
         for effect in &pending_passive_effects.borrow().update {
-            CommitWork::commit_hook_effect_list_mount(Flags::Passive | Flags::HookHasEffect, effect.clone());
+            CommitWork::commit_hook_effect_list_mount(
+                Flags::Passive | Flags::HookHasEffect,
+                effect.clone(),
+            );
         }
         pending_passive_effects.borrow_mut().update = vec![];
     }
@@ -204,27 +215,24 @@ fn commit_root(root: Rc<RefCell<FiberRootNode>>) {
     let flags = finished_work.borrow().flags.clone();
     // useEffect
     let root_cloned = root.clone();
-    if flags.contains(Flags::PassiveEffect) || subtree_flags.contains(Flags::PassiveEffect) {
+    log!("flags {:?} {:?}", flags, subtree_flags);
+    let passive_mask = get_passive_mask();
+    if flags.clone() & passive_mask.clone() != Flags::NoFlags
+        || subtree_flags.clone() & passive_mask != Flags::NoFlags
+    {
         if unsafe { !ROOT_DOES_HAVE_PASSIVE_EFFECTS } {
             unsafe { ROOT_DOES_HAVE_PASSIVE_EFFECTS = true }
-            let closure =
-                Closure::wrap(Box::new(move || {
-                    flush_passive_effects(root_cloned.borrow().pending_passive_effects.clone())
-                })
-                    as Box<dyn Fn()>);
-            let function = closure
-                .as_ref()
-                .unchecked_ref::<Function>()
-                .clone();
+            let closure = Closure::wrap(Box::new(move || {
+                flush_passive_effects(root_cloned.borrow().pending_passive_effects.clone())
+            }) as Box<dyn Fn()>);
+            let function = closure.as_ref().unchecked_ref::<Function>().clone();
             closure.forget();
             unstable_schedule_callback_no_delay(Priority::NormalPriority, function);
         }
     }
 
-    let subtree_has_effect =
-        get_mutation_mask().contains(subtree_flags);
-    let root_has_effect =
-        get_mutation_mask().contains(flags);
+    let subtree_has_effect = get_mutation_mask().contains(subtree_flags);
+    let root_has_effect = get_mutation_mask().contains(flags);
 
     if subtree_has_effect || root_has_effect {
         let prev_execution_context: ExecutionContext;
@@ -233,7 +241,12 @@ fn commit_root(root: Rc<RefCell<FiberRootNode>>) {
             EXECUTION_CONTEXT |= ExecutionContext::CommitContext;
         }
 
-        unsafe { COMMIT_WORK.as_mut().unwrap().commit_mutation_effects(finished_work.clone(), root.clone()); }
+        unsafe {
+            COMMIT_WORK
+                .as_mut()
+                .unwrap()
+                .commit_mutation_effects(finished_work.clone(), root.clone());
+        }
 
         cloned.borrow_mut().current = finished_work.clone();
 
diff --git a/packages/scheduler/src/lib.rs b/packages/scheduler/src/lib.rs
index b428580..540febd 100644
--- a/packages/scheduler/src/lib.rs
+++ b/packages/scheduler/src/lib.rs
@@ -5,8 +5,6 @@ use wasm_bindgen::prelude::*;
 use web_sys::{MessageChannel, MessagePort};
 use web_sys::js_sys::{Function, global};
 
-use shared::log;
-
 use crate::heap::{peek, peek_mut, pop, push};
 
 mod heap;
@@ -273,10 +271,11 @@ fn flush_work(has_time_remaining: bool, initial_time: f64) -> bool {
         IS_PERFORMING_WORK = true;
         let previous_priority_level = CURRENT_PRIORITY_LEVEL.clone();
 
-        let has_more = work_loop(has_time_remaining, initial_time).unwrap_or_else(|_| {
-            log!("work_loop error");
-            false
-        });
+        let has_more = work_loop(has_time_remaining, initial_time).unwrap();
+        //     .unwrap_or_else(|_| {
+        //     log!("work_loop error");
+        //     false
+        // });
 
         CURRENT_TASK = None;
         CURRENT_PRIORITY_LEVEL = previous_priority_level.clone();

From 79812be748c96ef208e1ea7086cc08bbd9ef671e Mon Sep 17 00:00:00 2001
From: youxingzhi <xingzhi.you@shopee.com>
Date: Wed, 22 May 2024 19:42:51 +0800
Subject: [PATCH 4/6] blog-15: useEffect fiber hooks, mount Effect

---
 packages/react-reconciler/src/commit_work.rs |  4 +---
 packages/react-reconciler/src/work_loop.rs   | 11 +++--------
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/packages/react-reconciler/src/commit_work.rs b/packages/react-reconciler/src/commit_work.rs
index 890a095..85d3469 100644
--- a/packages/react-reconciler/src/commit_work.rs
+++ b/packages/react-reconciler/src/commit_work.rs
@@ -47,7 +47,6 @@ impl CommitWork {
                 log!("When FC has PassiveEffect, the effect should exist.")
             }
             if _type == "unmount" {
-                log!("commit_passive_effect {:?}", update_queue.borrow().last_effect.clone().unwrap().borrow().create);
                 root.borrow()
                     .pending_passive_effects
                     .borrow_mut()
@@ -85,8 +84,7 @@ impl CommitWork {
     }
     pub fn commit_hook_effect_list_destroy(flags: Flags, last_effect: Rc<RefCell<Effect>>) {
         CommitWork::commit_hook_effect_list(flags, last_effect, |effect: Rc<RefCell<Effect>>| {
-            let destroy = &effect.borrow().destroy;
-            log!("commit_hook_effect_list_destroy {:?}", destroy);
+            let destroy = { effect.borrow().destroy.clone() };
             if destroy.is_function() {
                 destroy.dyn_ref::<Function>().unwrap().call0(&JsValue::null());
             }
diff --git a/packages/react-reconciler/src/work_loop.rs b/packages/react-reconciler/src/work_loop.rs
index 38448ed..cbfbbe1 100644
--- a/packages/react-reconciler/src/work_loop.rs
+++ b/packages/react-reconciler/src/work_loop.rs
@@ -167,12 +167,7 @@ fn flush_passive_effects(pending_passive_effects: Rc<RefCell<PendingPassiveEffec
         {
             log!("Cannot execute useEffect callback in React work loop")
         }
-
-        log!(
-            "flush_passive_effects {:?}",
-            pending_passive_effects.clone().borrow().unmount
-        );
-
+        
         for effect in &pending_passive_effects.borrow().unmount {
             CommitWork::commit_hook_effect_list_destroy(Flags::Passive, effect.clone());
         }
@@ -223,8 +218,8 @@ fn commit_root(root: Rc<RefCell<FiberRootNode>>) {
         if unsafe { !ROOT_DOES_HAVE_PASSIVE_EFFECTS } {
             unsafe { ROOT_DOES_HAVE_PASSIVE_EFFECTS = true }
             let closure = Closure::wrap(Box::new(move || {
-                flush_passive_effects(root_cloned.borrow().pending_passive_effects.clone())
-            }) as Box<dyn Fn()>);
+                flush_passive_effects(root_cloned.borrow().pending_passive_effects.clone());
+            }) as Box<dyn Fn() -> bool>);
             let function = closure.as_ref().unchecked_ref::<Function>().clone();
             closure.forget();
             unstable_schedule_callback_no_delay(Priority::NormalPriority, function);

From c0b9b7b9614f2f7fd9ed6d038e4c2b913db652fc Mon Sep 17 00:00:00 2001
From: youxingzhi <xingzhi.you@shopee.com>
Date: Fri, 24 May 2024 11:07:06 +0800
Subject: [PATCH 5/6] blog-15: complete useEffect fiber hooks

---
 examples/hello-world/src/App.tsx              | 19 +++---
 packages/react-dom/src/host_config.rs         |  4 +-
 packages/react-reconciler/src/commit_work.rs  | 18 +++--
 .../react-reconciler/src/complete_work.rs     | 10 +--
 packages/react-reconciler/src/fiber_hooks.rs  | 66 +++++++++++++++++--
 packages/react-reconciler/src/lib.rs          |  2 +-
 packages/react-reconciler/src/work_loop.rs    |  4 +-
 7 files changed, 94 insertions(+), 29 deletions(-)

diff --git a/examples/hello-world/src/App.tsx b/examples/hello-world/src/App.tsx
index 9df2698..e04d2b6 100644
--- a/examples/hello-world/src/App.tsx
+++ b/examples/hello-world/src/App.tsx
@@ -2,7 +2,12 @@ import {useEffect, useState} from 'react'
 
 function App() {
     const [num, updateNum] = useState(0);
-
+    useEffect(() => {
+        console.log(num)
+        setTimeout(() => {
+            updateNum(num + 1)
+        }, 1000)
+    }, [num]);
     return (
         <ul
             onClick={(e) => {
@@ -13,19 +18,15 @@ function App() {
                 updateNum((num: number) => num + 4);
             }}
         >
-            num值为：{num}
-            {num === 0 && <Child num={1}/>}
+            <Child num={num}/>
+            hello
+            <Child num={num}/>
         </ul>
     );
 }
 
 function Child({num}: { num: number }) {
-    useEffect(() => {
-        console.log('this is useEffect')
-        return () => {
-            console.log('this is destroy')
-        }
-    }, []);
+
     return <div>{num}</div>;
 }
 
diff --git a/packages/react-dom/src/host_config.rs b/packages/react-dom/src/host_config.rs
index f7e898b..48bb999 100644
--- a/packages/react-dom/src/host_config.rs
+++ b/packages/react-dom/src/host_config.rs
@@ -112,9 +112,9 @@ impl HostConfig for ReactDomHostConfig {
         }
     }
 
-    fn commit_text_update(&self, text_instance: Rc<dyn Any>, content: String) {
+    fn commit_text_update(&self, text_instance: Rc<dyn Any>, content: &JsValue) {
         let text_instance = text_instance.clone().downcast::<Node>().unwrap();
-        text_instance.set_node_value(Some(content.as_str()));
+        text_instance.set_node_value(Some(to_string(content).as_str()));
     }
 
     fn insert_child_to_container(
diff --git a/packages/react-reconciler/src/commit_work.rs b/packages/react-reconciler/src/commit_work.rs
index 85d3469..278754f 100644
--- a/packages/react-reconciler/src/commit_work.rs
+++ b/packages/react-reconciler/src/commit_work.rs
@@ -86,7 +86,10 @@ impl CommitWork {
         CommitWork::commit_hook_effect_list(flags, last_effect, |effect: Rc<RefCell<Effect>>| {
             let destroy = { effect.borrow().destroy.clone() };
             if destroy.is_function() {
-                destroy.dyn_ref::<Function>().unwrap().call0(&JsValue::null());
+                destroy
+                    .dyn_ref::<Function>()
+                    .unwrap()
+                    .call0(&JsValue::null());
             }
             effect.borrow_mut().tag &= !Flags::HookHasEffect;
         });
@@ -96,7 +99,10 @@ impl CommitWork {
         CommitWork::commit_hook_effect_list(flags, last_effect, |effect: Rc<RefCell<Effect>>| {
             let destroy = &effect.borrow().destroy;
             if destroy.is_function() {
-                destroy.dyn_ref::<Function>().unwrap().call0(&JsValue::null());
+                destroy
+                    .dyn_ref::<Function>()
+                    .unwrap()
+                    .call0(&JsValue::null());
             }
         });
     }
@@ -207,7 +213,7 @@ impl CommitWork {
                 let state_node = FiberNode::derive_state_node(finished_work.clone());
                 if let Some(state_node) = state_node.clone() {
                     self.host_config
-                        .commit_text_update(state_node.clone(), new_content.as_string().unwrap())
+                        .commit_text_update(state_node.clone(), &new_content)
                 }
             }
             _ => log!("commit_update, unsupported type"),
@@ -225,7 +231,11 @@ impl CommitWork {
             let cloned = first_host_fiber.clone();
             match unmount_fiber.borrow().tag {
                 WorkTag::FunctionComponent => {
-                    CommitWork::commit_passive_effect(unmount_fiber.clone(), root.clone(), "unmount");
+                    CommitWork::commit_passive_effect(
+                        unmount_fiber.clone(),
+                        root.clone(),
+                        "unmount",
+                    );
                 }
                 WorkTag::HostRoot => {}
                 WorkTag::HostComponent => {
diff --git a/packages/react-reconciler/src/complete_work.rs b/packages/react-reconciler/src/complete_work.rs
index 7d91888..f474759 100644
--- a/packages/react-reconciler/src/complete_work.rs
+++ b/packages/react-reconciler/src/complete_work.rs
@@ -76,18 +76,18 @@ impl CompleteWork {
             }
 
             {
-                node.clone()
-                    .unwrap()
-                    .borrow()
+                let node = node.clone().unwrap();
+                let _return = { node.borrow()._return.clone() };
+                node.borrow()
                     .sibling
                     .clone()
                     .unwrap()
                     .clone()
                     .borrow_mut()
-                    ._return = node_unwrap.borrow()._return.clone();
+                    ._return = _return;
             }
 
-            node = node.clone().unwrap().borrow().sibling.clone();
+            node = { node.clone().unwrap().borrow().sibling.clone() };
         }
     }
 
diff --git a/packages/react-reconciler/src/fiber_hooks.rs b/packages/react-reconciler/src/fiber_hooks.rs
index c5dc55f..bf7253c 100644
--- a/packages/react-reconciler/src/fiber_hooks.rs
+++ b/packages/react-reconciler/src/fiber_hooks.rs
@@ -3,7 +3,7 @@ use std::rc::Rc;
 
 use wasm_bindgen::{JsCast, JsValue};
 use wasm_bindgen::prelude::{Closure, wasm_bindgen};
-use web_sys::js_sys::{Function, Object, Reflect};
+use web_sys::js_sys::{Array, Function, Object, Reflect};
 
 use shared::log;
 
@@ -304,7 +304,6 @@ fn update_state(_: &JsValue) -> Result<Vec<JsValue>, JsValue> {
     let queue = hook_cloned.borrow().update_queue.clone();
     let base_state = hook_cloned.borrow().memoized_state.clone();
 
-    // Todo update when render
     unsafe {
         hook_cloned.borrow_mut().memoized_state = process_update_queue(
             base_state,
@@ -313,7 +312,6 @@ fn update_state(_: &JsValue) -> Result<Vec<JsValue>, JsValue> {
             RENDER_LANE.clone(),
         );
     }
-    log!("memoized_state {:?}", hook_cloned.borrow().memoized_state);
 
     Ok(vec![
         hook.clone()
@@ -401,9 +399,65 @@ fn mount_effect(create: Function, deps: JsValue) {
             JsValue::null(),
             next_deps,
         )));
+}
+
+fn update_effect(create: Function, deps: JsValue) {
+    let hook = update_work_in_progress_hook();
+    let next_deps = if deps.is_undefined() {
+        JsValue::null()
+    } else {
+        deps
+    };
+
+    let mut destroy = JsValue::null();
+    unsafe {
+        if CURRENT_HOOK.is_some() {
+            let current_hook = CURRENT_HOOK.clone().unwrap();
+            let prev_effect = current_hook.borrow().memoized_state.clone();
+            if let MemoizedState::Effect(prev_effect) = prev_effect.unwrap() {
+                destroy = prev_effect.borrow().destroy.clone();
+                if !next_deps.is_null() {
+                    let prev_deps = prev_effect.borrow().deps.clone();
+
+                    if are_hook_inputs_equal(&prev_deps, &next_deps) {
+                        hook.as_ref().unwrap().borrow_mut().memoized_state =
+                            Some(MemoizedState::Effect(push_effect(Flags::Passive, create, destroy, next_deps)));
+                        return;
+                    }
+                }
+            } else {
+                panic!("memoized_state is not Effect")
+            }
+        }
+
+        CURRENTLY_RENDERING_FIBER.as_ref().unwrap().borrow_mut().flags |= Flags::PassiveEffect;
+        log!("CURRENTLY_RENDERING_FIBER.as_ref().unwrap().borrow_mut()");
 
-    // let next_deps = deps.is_undefined() ?
-    // log!("create {:?}", create);
+        hook.as_ref().unwrap().clone().borrow_mut().memoized_state =
+            Some(MemoizedState::Effect(push_effect(
+                Flags::Passive | Flags::HookHasEffect,
+                create,
+                destroy.clone(),
+                next_deps,
+            )));
+    }
 }
 
-fn update_effect(create: Function, deps: JsValue) {}
+fn are_hook_inputs_equal(next_deps: &JsValue, pre_deps: &JsValue) -> bool {
+    if next_deps.is_null() || pre_deps.is_null() {
+        return false;
+    }
+
+    let next_deps = next_deps.dyn_ref::<Array>().unwrap();
+    let pre_deps = pre_deps.dyn_ref::<Array>().unwrap();
+
+    let len = next_deps.length();
+
+    for i in 0..len {
+        if Object::is(&pre_deps.get(i), &next_deps.get(i)) {
+            continue;
+        }
+        return false;
+    }
+    return true;
+}
diff --git a/packages/react-reconciler/src/lib.rs b/packages/react-reconciler/src/lib.rs
index 3ce56d1..6f589ca 100644
--- a/packages/react-reconciler/src/lib.rs
+++ b/packages/react-reconciler/src/lib.rs
@@ -37,7 +37,7 @@ pub trait HostConfig {
     fn append_initial_child(&self, parent: Rc<dyn Any>, child: Rc<dyn Any>);
     fn append_child_to_container(&self, child: Rc<dyn Any>, parent: Rc<dyn Any>);
     fn remove_child(&self, child: Rc<dyn Any>, container: Rc<dyn Any>);
-    fn commit_text_update(&self, text_instance: Rc<dyn Any>, content: String);
+    fn commit_text_update(&self, text_instance: Rc<dyn Any>, content: &JsValue);
     fn insert_child_to_container(
         &self,
         child: Rc<dyn Any>,
diff --git a/packages/react-reconciler/src/work_loop.rs b/packages/react-reconciler/src/work_loop.rs
index cbfbbe1..2830176 100644
--- a/packages/react-reconciler/src/work_loop.rs
+++ b/packages/react-reconciler/src/work_loop.rs
@@ -167,7 +167,7 @@ fn flush_passive_effects(pending_passive_effects: Rc<RefCell<PendingPassiveEffec
         {
             log!("Cannot execute useEffect callback in React work loop")
         }
-        
+
         for effect in &pending_passive_effects.borrow().unmount {
             CommitWork::commit_hook_effect_list_destroy(Flags::Passive, effect.clone());
         }
@@ -219,7 +219,7 @@ fn commit_root(root: Rc<RefCell<FiberRootNode>>) {
             unsafe { ROOT_DOES_HAVE_PASSIVE_EFFECTS = true }
             let closure = Closure::wrap(Box::new(move || {
                 flush_passive_effects(root_cloned.borrow().pending_passive_effects.clone());
-            }) as Box<dyn Fn() -> bool>);
+            }) as Box<dyn Fn()>);
             let function = closure.as_ref().unchecked_ref::<Function>().clone();
             closure.forget();
             unstable_schedule_callback_no_delay(Priority::NormalPriority, function);

From 08ee809148f7e5058db9ec73318f85474a4ce840 Mon Sep 17 00:00:00 2001
From: youxingzhi <xingzhi.you@shopee.com>
Date: Fri, 24 May 2024 17:11:45 +0800
Subject: [PATCH 6/6] blog-15: complete useEffect fiber hooks, update demo

---
 examples/hello-world/src/App.tsx           | 34 ++++++++++++----------
 packages/react-reconciler/src/work_loop.rs |  2 +-
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/examples/hello-world/src/App.tsx b/examples/hello-world/src/App.tsx
index e04d2b6..3b79989 100644
--- a/examples/hello-world/src/App.tsx
+++ b/examples/hello-world/src/App.tsx
@@ -2,32 +2,36 @@ import {useEffect, useState} from 'react'
 
 function App() {
     const [num, updateNum] = useState(0);
-    useEffect(() => {
-        console.log(num)
-        setTimeout(() => {
-            updateNum(num + 1)
-        }, 1000)
-    }, [num]);
     return (
         <ul
             onClick={(e) => {
-                // 注意观察多次更新只会触发一次render阶段，这就是batchedUpdates（批处理），也是我们基础调度能力的体现
                 updateNum((num: number) => num + 1);
-                updateNum((num: number) => num + 2);
-                updateNum((num: number) => num + 3);
-                updateNum((num: number) => num + 4);
             }}
         >
-            <Child num={num}/>
-            hello
-            <Child num={num}/>
+            <Child1 num={num}/>
+            {num === 1 ? null : <Child2 num={num}/>}
         </ul>
     );
 }
 
-function Child({num}: { num: number }) {
+function Child1({num}: { num: number }) {
+    useEffect(() => {
+        console.log('child1 create')
+        return () => {
+            console.log('child1 destroy')
+        }
+    }, [num]);
+    return <div>child1 {num}</div>;
+}
 
-    return <div>{num}</div>;
+function Child2({num}: { num: number }) {
+    useEffect(() => {
+        console.log('child2 create')
+        return () => {
+            console.log('child2 destroy')
+        }
+    }, [num]);
+    return <div>child2 {num}</div>;
 }
 
 export default App
diff --git a/packages/react-reconciler/src/work_loop.rs b/packages/react-reconciler/src/work_loop.rs
index 2830176..9946138 100644
--- a/packages/react-reconciler/src/work_loop.rs
+++ b/packages/react-reconciler/src/work_loop.rs
@@ -208,9 +208,9 @@ fn commit_root(root: Rc<RefCell<FiberRootNode>>) {
 
     let subtree_flags = finished_work.borrow().subtree_flags.clone();
     let flags = finished_work.borrow().flags.clone();
+    
     // useEffect
     let root_cloned = root.clone();
-    log!("flags {:?} {:?}", flags, subtree_flags);
     let passive_mask = get_passive_mask();
     if flags.clone() & passive_mask.clone() != Flags::NoFlags
         || subtree_flags.clone() & passive_mask != Flags::NoFlags