try another approach to fixing switching component def and resetting state

Author: rmorshea

src/idom/core/layout.py

@@ -380,6 +380,19 @@ def _render_model_children(
                         child,
                         self._rendering_queue.put,
                     )
+                elif old_child_state.is_component_state and (
+                    old_child_state.life_cycle_state.component.definition_id
+                    != child.definition_id
+                ):
+                    self._unmount_model_states([old_child_state])
+                    old_child_state = None
+                    new_child_state = _make_component_model_state(
+                        new_state,
+                        index,
+                        key,
+                        child,
+                        self._rendering_queue.put,
+                    )
                 else:
                     new_child_state = _update_component_model_state(
                         old_child_state,
@@ -511,10 +524,6 @@ def _update_component_model_state(
         life_cycle_state=(
             _update_life_cycle_state(old_model_state.life_cycle_state, new_component)
             if old_model_state.is_component_state
-            and (
-                old_model_state.life_cycle_state.component.definition_id
-                == new_component.definition_id
-            )
             else _make_life_cycle_state(new_component, schedule_render)
         ),
     )

tests/test_core/test_layout.py

@@ -11,7 +11,7 @@
 from idom import html
 from idom.config import IDOM_DEBUG_MODE
 from idom.core.dispatcher import render_json_patch
-from idom.core.hooks import use_effect
+from idom.core.hooks import use_effect, use_state
 from idom.core.layout import LayoutEvent
 from idom.testing import (
     HookCatcher,
@@ -877,3 +877,49 @@ def SomeComponent():
 
         assert element_static_handler.target in layout._event_handlers
         assert component_static_handler.target not in layout._event_handlers
+
+
+async def test_switching_component_definition():
+    toggle_component = idom.Ref()
+    first_used_state = idom.Ref(None)
+    second_used_state = idom.Ref(None)
+
+    @idom.component
+    def Root():
+        toggle, toggle_component.current = use_toggle(True)
+        if toggle:
+            return FirstComponent()
+        else:
+            return SecondComponent()
+
+    @idom.component
+    def FirstComponent():
+        first_used_state.current = use_state("first")[0]
+        # reset state after unmount
+        use_effect(lambda: lambda: first_used_state.set_current(None))
+        return html.div()
+
+    @idom.component
+    def SecondComponent():
+        second_used_state.current = use_state("second")[0]
+        # reset state after unmount
+        use_effect(lambda: lambda: second_used_state.set_current(None))
+        return html.div()
+
+    with idom.Layout(Root()) as layout:
+        await layout.render()
+
+        assert first_used_state.current == "first"
+        assert second_used_state.current is None
+
+        toggle_component.current()
+        await layout.render()
+
+        assert first_used_state.current is None
+        assert second_used_state.current == "second"
+
+        toggle_component.current()
+        await layout.render()
+
+        assert first_used_state.current == "first"
+        assert second_used_state.current is None