diff --git a/e2e/cypress/e2e/reactivity.cy.ts b/e2e/cypress/e2e/reactivity.cy.ts
index 39b73916..7493f09e 100644
--- a/e2e/cypress/e2e/reactivity.cy.ts
+++ b/e2e/cypress/e2e/reactivity.cy.ts
@@ -14,6 +14,12 @@ describe("basic reactivity & state", () => {
     cy.get("main #counter button").click().click()
     cy.get("main #counter p").should("exist")
   })
+
+  it("correctly persists component state when order of children changes", () => {
+    cy.get("main #counter button").click().click()
+    cy.get("main #toggle-btn").click()
+    cy.get("main #counter span").should("have.text", "2")
+  })
 })
 
 describe("hooks & data", () => {
diff --git a/e2e/src/App.tsx b/e2e/src/App.tsx
index b1fefbbf..c9312b71 100644
--- a/e2e/src/App.tsx
+++ b/e2e/src/App.tsx
@@ -2,13 +2,18 @@ import { Link, Route, Router, memo, useModel, useState } from "kaioken"
 import { Counter } from "./Counter"
 
 export function App() {
+  const [toggled, setToggled] = useState(false)
   return (
     <main>
       <header>
         <h1>Hello World</h1>
       </header>
+      {toggled && <p>Toggled</p>}
       <Counter />
       <TodoList />
+      <button id="toggle-btn" onclick={() => setToggled(!toggled)}>
+        toggle
+      </button>
       <nav>
         <ul>
           <li>