jac-client 0.1.0__py3-none-any.whl → 0.2.1__py3-none-any.whl

jac_client/docs/lifecycle-hooks.md

@@ -1,16 +1,19 @@
 # Lifecycle Hooks in Jac: Component Lifecycle Management
 
-Learn how to use `onMount()` and other lifecycle hooks to manage component initialization, side effects, and cleanup.
+Learn how to use React's `useEffect` and `useState` hooks to manage component state, initialization, side effects, and cleanup.
 
 ---
 
 ## 📚 Table of Contents
 
 - [What are Lifecycle Hooks?](#what-are-lifecycle-hooks)
-- [The `onMount()` Hook](#the-onmount-hook)
+- [React Hooks (Recommended)](#react-hooks-recommended)
+  - [useState](#usestate)
+  - [useEffect](#useeffect)
 - [Common Use Cases](#common-use-cases)
 - [Complete Examples](#complete-examples)
 - [Best Practices](#best-practices)
+- [Legacy Jac Hooks](#legacy-jac-hooks)
 
 ---
 
@@ -21,94 +24,192 @@ Lifecycle hooks are functions that let you run code at specific points in a comp
 - **When component updates**: React to state changes
 - **When component unmounts**: Clean up resources
 
-In Jac, the primary lifecycle hook is `onMount()`, which runs code once when a component first renders.
+**Jac uses React hooks as the standard approach:**
+- **useState**: Manage component state
+- **useEffect**: Handle side effects, lifecycle events, and cleanup
 
 **Key Benefits:**
 - **Initialization**: Load data when component appears
 - **Side Effects**: Set up subscriptions, timers, or listeners
-- **One-Time Setup**: Ensure code runs only once, not on every render
-- **Component Scoping**: Automatically tracks which component called the hook
+- **Reactive Updates**: Run code when specific dependencies change
+- **Cleanup**: Properly clean up resources when components unmount
+- **Standard React API**: Works exactly like React hooks you already know
 
 ---
 
-## The `onMount()` Hook
+## React Hooks (Recommended)
 
-### Basic Usage
+### useState
+
+The `useState` hook lets you add state to your components.
+
+#### Basic Usage
+
+```jac
+cl import from react { useState }
+
+cl {
+    def Counter() -> any {
+        let [count, setCount] = useState(0);
+
+        return <div>
+            <h1>Count: {count}</h1>
+            <button onClick={lambda e: any -> None {
+                setCount(count + 1);
+            }}>
+                Increment
+            </button>
+        </div>;
+    }
+}
+```
+
+**Key Points:**
+- Import `useState` from `react`
+- Returns an array: `[currentValue, setterFunction]`
+- Use destructuring to get the value and setter
+- Call the setter function to update state
+
+#### Multiple State Variables
 
 ```jac
+cl import from react { useState }
+
+cl {
+    def TodoApp() -> any {
+        let [todos, setTodos] = useState([]);
+        let [inputValue, setInputValue] = useState("");
+        let [filter, setFilter] = useState("all");
+
+        return <div>Todo App</div>;
+    }
+}
+```
+
+### useEffect
+
+The `useEffect` hook lets you perform side effects in your components. It provides full lifecycle management including mount, update, and cleanup.
+
+#### Basic Usage - Run on Mount
+
+```jac
+cl import from react { useState, useEffect }
+
 cl {
     def MyComponent() -> any {
-        onMount(lambda -> None {
+        let [data, setData] = useState(None);
+
+        useEffect(lambda -> None {
             console.log("Component mounted!");
             # Load initial data
+            async def loadData() -> None {
+                result = await jacSpawn("get_data", "", {});
+                setData(result);
+            }
             loadData();
-        });
+        }, []);  # Empty array means run only on mount
 
         return <div>My Component</div>;
     }
 }
 ```
 
-**How it Works:**
-1. Component renders
-2. `onMount()` is called
-3. The provided function runs **once** after the component is fully rendered
-4. Function won't run again on re-renders
+**Key Points:**
+- Import `useEffect` from `react`
+- First argument: function to run
+- Second argument: dependency array
+  - `[]` - run only on mount
+  - `[count]` - run when `count` changes
+  - No array - run on every render
 
-### Key Characteristics
+#### useEffect with Dependencies
 
-- **Runs Once**: Executes only on the first render
-- **After Render**: Runs after the component is mounted to the DOM
-- **Component Scoped**: Automatically tracks which component called it
-- **Async Support**: Can contain async operations
+```jac
+cl import from react { useState, useEffect }
 
----
+cl {
+    def Counter() -> any {
+        let [count, setCount] = useState(0);
 
-## Common Use Cases
+        useEffect(lambda -> None {
+            console.log("Count changed to:", count);
+            document.title = "Count: " + str(count);
+        }, [count]);  # Run when count changes
 
-### 1. Loading Initial Data
+        return <div>
+            <h1>Count: {count}</h1>
+            <button onClick={lambda e: any -> None {
+                setCount(count + 1);
+            }}>
+                Increment
+            </button>
+        </div>;
+    }
+}
+```
 
-The most common use case is loading data when a component mounts:
+#### useEffect with Cleanup
 
 ```jac
+cl import from react { useEffect }
+
 cl {
-    let [todoState, setTodoState] = createState({
-        "items": [],
-        "loading": True
-    });
+    def TimerComponent() -> any {
+        useEffect(lambda -> any {
+            # Setup
+            intervalId = setInterval(lambda -> None {
+                console.log("Timer tick");
+            }, 1000);
+
+            # Cleanup function (returned from useEffect)
+            return lambda -> None {
+                clearInterval(intervalId);
+            };
+        }, []);
+
+        return <div>Timer Component</div>;
+    }
+}
+```
 
-    async def loadTodos() -> None {
-        setTodoState({"loading": True});
+---
 
-        # Fetch todos from backend
-        todos = await __jacSpawn("read_todos");
+## Common Use Cases
 
-        items = [];
-        for todo in todos.reports {
-            items.push({
-                "id": todo._jac_id,
-                "text": todo.text,
-                "done": todo.done
-            });
-        }
+### 1. Loading Initial Data
 
-        setTodoState({"items": items, "loading": False});
-    }
+The most common use case is loading data when a component mounts:
+
+```jac
+cl import from react { useState, useEffect }
+cl import from '@jac-client/utils' { jacSpawn }
 
+cl {
     def TodoApp() -> any {
-        # Load todos when component mounts
-        onMount(lambda -> None {
+        let [todos, setTodos] = useState([]);
+        let [loading, setLoading] = useState(True);
+
+        useEffect(lambda -> None {
+            async def loadTodos() -> None {
+                setLoading(True);
+
+                # Fetch todos from backend
+                result = await jacSpawn("read_todos", "", {});
+                console.log(result);
+                setTodos(result.reports);
+                setLoading(False);
+            }
             loadTodos();
-        });
+        }, []);  # Empty array = run only on mount
 
-        s = todoState();
-
-        if s.loading {
+        if loading {
             return <div>Loading...</div>;
         }
 
         return <div>
-            {[TodoItem(item) for item in s.items]}
+            {todos.map(lambda todo: any -> any {
+                return <TodoItem todo={todo} />;
+            })}
         </div>;
     }
 }
@@ -116,39 +217,37 @@ cl {
 
 ### 2. Setting Up Event Listeners
 
-Set up event listeners that need to persist across re-renders:
+Set up event listeners with proper cleanup:
 
 ```jac
+cl import from react { useState, useEffect }
+
 cl {
     def WindowResizeHandler() -> any {
-        let [windowSize, setWindowSize] = createState({
-            "width": 0,
-            "height": 0
-        });
-
-        def handleResize() -> None {
-            setWindowSize({
-                "width": window.innerWidth,
-                "height": window.innerHeight
-            });
-        }
+        let [width, setWidth] = useState(0);
+        let [height, setHeight] = useState(0);
 
-        def ResizeDisplay() -> any {
-            onMount(lambda -> None {
-                # Set initial size
-                handleResize();
+        useEffect(lambda -> any {
+            def handleResize() -> None {
+                setWidth(window.innerWidth);
+                setHeight(window.innerHeight);
+            }
 
-                # Add listener
-                window.addEventListener("resize", handleResize);
-            });
+            # Set initial size
+            handleResize();
 
-            s = windowSize();
-            return <div>
-                Window size: {s.width} x {s.height}
-            </div>;
-        }
+            # Add listener
+            window.addEventListener("resize", handleResize);
+
+            # Cleanup function
+            return lambda -> None {
+                window.removeEventListener("resize", handleResize);
+            };
+        }, []);
 
-        return ResizeDisplay();
+        return <div>
+            Window size: {width} x {height}
+        </div>;
     }
 }
 ```
@@ -158,45 +257,40 @@ cl {
 Load user-specific data when a component mounts:
 
 ```jac
-cl {
-    let [userState, setUserState] = createState({
-        "profile": None,
-        "loading": True
-    });
-
-    async def loadUserProfile() -> None {
-        if not jacIsLoggedIn() {
-            navigate("/login");
-            return;
-        }
-
-        # Fetch user profile
-        profile = await __jacSpawn("get_user_profile");
-
-        setUserState({
-            "profile": profile,
-            "loading": False
-        });
-    }
+cl import from react { useState, useEffect }
+cl import from '@jac-client/utils' { jacSpawn }
 
+cl {
     def ProfileView() -> any {
-        onMount(lambda -> None {
+        let [profile, setProfile] = useState(None);
+        let [loading, setLoading] = useState(True);
+
+        useEffect(lambda -> None {
+            async def loadUserProfile() -> None {
+                if not jacIsLoggedIn() {
+                    navigate("/login");
+                    return;
+                }
+
+                # Fetch user profile
+                result = await jacSpawn("get_user_profile", "", {});
+                setProfile(result);
+                setLoading(False);
+            }
             loadUserProfile();
-        });
-
-        s = userState();
+        }, []);
 
-        if s.loading {
+        if loading {
             return <div>Loading profile...</div>;
         }
 
-        if not s.profile {
+        if not profile {
             return <div>No profile found</div>;
         }
 
         return <div>
-            <h1>{s.profile.username}</h1>
-            <p>{s.profile.email}</p>
+            <h1>{profile.username}</h1>
+            <p>{profile.email}</p>
         </div>;
     }
 }
@@ -207,16 +301,23 @@ cl {
 Initialize external libraries or APIs:
 
 ```jac
+cl import from react { useEffect }
+
 cl {
     def ChartComponent() -> any {
-        onMount(lambda -> None {
+        useEffect(lambda -> any {
             # Initialize chart library
             chart = new Chart("myChart", {
                 "type": "line",
                 "data": chartData,
                 "options": chartOptions
             });
-        });
+
+            # Cleanup function
+            return lambda -> None {
+                chart.destroy();
+            };
+        }, []);
 
         return <canvas id="myChart"></canvas>;
     }
@@ -228,15 +329,17 @@ cl {
 Focus an input field when a component mounts:
 
 ```jac
+cl import from react { useEffect }
+
 cl {
     def SearchBar() -> any {
-        onMount(lambda -> None {
+        useEffect(lambda -> None {
             # Focus search input on mount
             inputEl = document.getElementById("search-input");
             if inputEl {
                 inputEl.focus();
             }
-        });
+        }, []);
 
         return <input
             id="search-input"
@@ -254,65 +357,112 @@ cl {
 ### Example 1: Todo App with Data Loading
 
 ```jac
-cl {
-    let [todoState, setTodoState] = createState({
-        "items": [],
-        "filter": "all",
-        "loading": False
-    });
-
-    async def read_todos_action() -> None {
-        setTodoState({"loading": True});
+cl import from react { useState, useEffect }
+cl import from '@jac-client/utils' { jacSpawn }
 
-        try {
-            todos = await __jacSpawn("read_todos");
-
-            items = [];
-            for todo in todos.reports {
-                items.push({
-                    "id": todo._jac_id,
-                    "text": todo.text,
-                    "done": todo.done
-                });
+cl {
+    def app() -> any {
+        let [todos, setTodos] = useState([]);
+        let [inputValue, setInputValue] = useState("");
+        let [filter, setFilter] = useState("all");
+
+        useEffect(lambda -> None {
+            async def loadTodos() -> None {
+                todos = await jacSpawn("read_todos","",{});
+                console.log(todos);
+                setTodos(todos.reports);
             }
-
-            setTodoState({"items": items, "loading": False});
-        } except Exception as err {
-            console.error("Failed to load todos:", err);
-            setTodoState({"loading": False});
+            loadTodos();
+        }, []);
+
+        # Add a new todo
+        async def addTodo() -> None {
+            if not inputValue.trim() { return; }
+            newTodo = {
+                "id": Date.now(),
+                "text": inputValue.trim(),
+                "done": False
+            };
+            await jacSpawn("create_todo","", {"text": inputValue.trim()});
+            newTodos = todos.concat([newTodo]);
+            setTodos(newTodos);
+            setInputValue("");
         }
-    }
-
-    def TodoApp() -> any {
-        # Load todos when component mounts
-        onMount(lambda -> None {
-            read_todos_action();
-        });
-
-        s = todoState();
 
-        if s.loading {
-            return <div style={{
-                "textAlign": "center",
-                "padding": "40px"
-            }}>
-                Loading todos...
-            </div>;
+        # Toggle todo completion status
+        async def toggleTodo(id: any) -> None {
+            await jacSpawn("toggle_todo",id, {});
+            setTodos(todos.map(lambda todo: any -> any {
+                if todo._jac_id == id {
+                    updatedTodo = {
+                        "_jac_id": todo._jac_id,
+                        "text": todo.text,
+                        "done": not todo.done,
+                        "id": todo.id
+                    };
+                    return updatedTodo;
+                }
+                return todo;
+            }));
         }
 
-        itemsArr = filteredItems();
-        children = [];
-        for it in itemsArr {
-            children.push(TodoItem(it));
+        # Filter todos based on current filter
+        def getFilteredTodos() -> list {
+            if filter == "active" {
+                return todos.filter(lambda todo: any -> bool { return not todo.done; });
+            } elif filter == "completed" {
+                return todos.filter(lambda todo: any -> bool { return todo.done; });
+            }
+            return todos;
         }
 
-        return <div>
-            <h2>My Todos</h2>
-            <form onSubmit={onAddTodo}>
-                <input id="todo-input" type="text" />
-                <button type="submit">Add Todo</button>
-            </form>
-            <ul>{children}</ul>
+        filteredTodos = getFilteredTodos();
+
+        return <div style={{
+            "maxWidth": "600px",
+            "margin": "40px auto",
+            "padding": "24px",
+            "fontFamily": "system-ui, -apple-system, sans-serif"
+        }}>
+            <h1 style={{"textAlign": "center"}}>📝 My Todo App</h1>
+
+            # Add todo form
+            <div style={{"display": "flex", "gap": "8px", "marginBottom": "24px"}}>
+                <input
+                    type="text"
+                    value={inputValue}
+                    onChange={lambda e: any -> None { setInputValue(e.target.value); }}
+                    onKeyPress={lambda e: any -> None {
+                        if e.key == "Enter" { addTodo(); }
+                    }}
+                    placeholder="What needs to be done?"
+                    style={{"flex": "1", "padding": "12px"}}
+                />
+                <button onClick={addTodo} style={{"padding": "12px 24px"}}>
+                    Add
+                </button>
+            </div>
+
+            # Filter buttons
+            <div style={{"display": "flex", "gap": "8px", "marginBottom": "16px"}}>
+                <button onClick={lambda -> None { setFilter("all"); }}>All</button>
+                <button onClick={lambda -> None { setFilter("active"); }}>Active</button>
+                <button onClick={lambda -> None { setFilter("completed"); }}>Completed</button>
+            </div>
+
+            # Todo list
+            <ul>
+                {filteredTodos.map(lambda todo: any -> any {
+                    return <li key={todo._jac_id}>
+                        <input
+                            type="checkbox"
+                            checked={todo.done}
+                            onChange={lambda -> None { toggleTodo(todo._jac_id); }}
+                        />
+                        <span>{todo.text}</span>
+                    </li>;
+                })}
+            </ul>
         </div>;
     }
 }
@@ -321,71 +471,68 @@ cl {
 ### Example 2: Dashboard with Multiple Data Sources
 
 ```jac
-cl {
-    let [dashboardState, setDashboardState] = createState({
-        "stats": None,
-        "recentActivity": [],
-        "loading": True
-    });
-
-    async def loadDashboardData() -> None {
-        setDashboardState({"loading": True});
-
-        # Load multiple data sources in parallel
-        [stats, activity] = await Promise.all([
-            __jacSpawn("get_stats"),
-            __jacSpawn("get_recent_activity")
-        ]);
-
-        setDashboardState({
-            "stats": stats,
-            "recentActivity": activity.reports,
-            "loading": False
-        });
-    }
+cl import from react { useState, useEffect }
+cl import from '@jac-client/utils' { jacSpawn }
 
+cl {
     def Dashboard() -> any {
-        # Load all dashboard data on mount
-        onMount(lambda -> None {
+        let [stats, setStats] = useState(None);
+        let [activity, setActivity] = useState([]);
+        let [loading, setLoading] = useState(True);
+
+        useEffect(lambda -> None {
+            async def loadDashboardData() -> None {
+                setLoading(True);
+
+                # Load multiple data sources in parallel
+                results = await Promise.all([
+                    jacSpawn("get_stats", "", {}),
+                    jacSpawn("get_recent_activity", "", {})
+                ]);
+
+                setStats(results[0]);
+                setActivity(results[1].reports);
+                setLoading(False);
+            }
             loadDashboardData();
-        });
+        }, []);
 
-        s = dashboardState();
-
-        if s.loading {
+        if loading {
             return <div>Loading dashboard...</div>;
         }
 
         return <div>
-            <StatsView stats={s.stats} />
-            <ActivityList activities={s.recentActivity} />
+            <StatsView stats={stats} />
+            <ActivityList activities={activity} />
         </div>;
     }
 }
 ```
 
-### Example 3: Component with Cleanup (Future)
+### Example 3: Timer Component with Cleanup
 
-While `onMount()` doesn't currently support cleanup directly, you can store cleanup functions:
+Proper cleanup when component unmounts:
 
 ```jac
-cl {
-    let cleanupFunctions = [];
+cl import from react { useState, useEffect }
 
+cl {
     def TimerComponent() -> any {
-        onMount(lambda -> None {
+        let [seconds, setSeconds] = useState(0);
+
+        useEffect(lambda -> any {
             # Set up timer
             intervalId = setInterval(lambda -> None {
-                console.log("Timer tick");
+                setSeconds(lambda prev: int -> int { return prev + 1; });
             }, 1000);
 
-            # Store cleanup function
-            cleanupFunctions.push(lambda -> None {
+            # Cleanup function - runs when component unmounts
+            return lambda -> None {
                 clearInterval(intervalId);
-            });
-        });
+            };
+        }, []);
 
-        return <div>Timer Component</div>;
+        return <div>Timer: {seconds} seconds</div>;
     }
 }
 ```
@@ -394,161 +541,234 @@ cl {
 
 ## Best Practices
 
-### 1. Use `onMount()` for Initialization Only
+### 1. Always Specify Dependencies
+
+Be explicit about what your effect depends on:
 
 ```jac
-# ✅ Good: One-time initialization
-def Component() -> any {
-    onMount(lambda -> None {
-        loadInitialData();
-    });
-    return <div>Component</div>;
-}
+# ✅ Good: Empty array for mount-only effects
+useEffect(lambda -> None {
+    loadInitialData();
+}, []);
+
+# ✅ Good: Specify dependencies
+useEffect(lambda -> None {
+    console.log("Count changed:", count);
+}, [count]);
+
+# ⚠️ Warning: No dependency array runs on every render
+useEffect(lambda -> None {
+    console.log("Runs on every render!");
+});
+```
 
-# ❌ Avoid: Side effects that should run on every state change
-def Component() -> any {
-    s = state();
-    onMount(lambda -> None {
-        # This won't run when state changes!
-        processState(s);
-    });
-    return <div>{s.value}</div>;
-}
+### 2. Handle Async Operations Properly
+
+Always handle async operations with proper error handling:
+
+```jac
+# ✅ Good: Proper async handling
+useEffect(lambda -> None {
+    async def loadData() -> None {
+        try {
+            data = await jacSpawn("get_data", "", {});
+            setData(data);
+        } except Exception as err {
+            console.error("Error loading data:", err);
+            setError(err);
+        }
+    }
+    loadData();
+}, []);
 ```
 
-### 2. Handle Async Operations
+### 3. Clean Up Side Effects
 
-Always handle async operations properly:
+Always clean up event listeners, timers, and subscriptions:
 
 ```jac
-# ✅ Good: Handle async properly
-async def loadData() -> None {
-    try {
-        data = await __jacSpawn("get_data");
-        setState({"data": data});
-    } except Exception as err {
-        console.error("Error loading data:", err);
+# ✅ Good: Cleanup function removes event listener
+useEffect(lambda -> any {
+    def handleResize() -> None {
+        setWidth(window.innerWidth);
     }
-}
 
-def Component() -> any {
-    onMount(lambda -> None {
-        loadData();
-    });
-    return <div>Component</div>;
-}
+    window.addEventListener("resize", handleResize);
+
+    return lambda -> None {
+        window.removeEventListener("resize", handleResize);
+    };
+}, []);
 ```
 
-### 3. Check Conditions Before Operations
+### 4. Use Loading States
 
-Verify prerequisites before executing operations:
+Show loading indicators while data is being fetched:
 
 ```jac
-# ✅ Good: Check authentication first
-def ProtectedComponent() -> any {
-    onMount(lambda -> None {
-        if not jacIsLoggedIn() {
-            navigate("/login");
-            return;
+# ✅ Good: Clear loading states
+def Component() -> any {
+    let [data, setData] = useState(None);
+    let [loading, setLoading] = useState(True);
+    let [error, setError] = useState(None);
+
+    useEffect(lambda -> None {
+        async def loadData() -> None {
+            try {
+                setLoading(True);
+                result = await jacSpawn("get_data", "", {});
+                setData(result);
+            } except Exception as err {
+                setError(err);
+            } finally {
+                setLoading(False);
+            }
         }
-        loadUserData();
-    });
-    return <div>Protected Content</div>;
+        loadData();
+    }, []);
+
+    if loading { return <div>Loading...</div>; }
+    if error { return <div>Error: {error}</div>; }
+    return <div>{data}</div>;
 }
 ```
 
-### 4. Use Loading States
+### 5. Keep Effects Focused
 
-Show loading indicators while data is being fetched:
+Each effect should have a single responsibility:
 
 ```jac
+# ✅ Good: Separate effects for separate concerns
 def Component() -> any {
-    let [dataState, setDataState] = createState({
-        "data": None,
-        "loading": True
-    });
+    useEffect(lambda -> None {
+        loadData();  # Data loading
+    }, []);
+
+    useEffect(lambda -> any {
+        # Event listener setup
+        window.addEventListener("resize", handleResize);
+        return lambda -> None {
+            window.removeEventListener("resize", handleResize);
+        };
+    }, []);
 
-    onMount(lambda -> None {
-        loadData();
-    });
+    return <div>Component</div>;
+}
+```
 
-    s = dataState();
-    if s.loading {
-        return <div>Loading...</div>;
-    }
+### 6. Avoid Stale Closures
 
-    return <div>{s.data}</div>;
-}
+Be careful with closures capturing old state values:
+
+```jac
+# ❌ Avoid: Stale closure problem
+useEffect(lambda -> None {
+    setInterval(lambda -> None {
+        setCount(count + 1);  # count is stale!
+    }, 1000);
+}, []);
+
+# ✅ Good: Use functional update
+useEffect(lambda -> any {
+    intervalId = setInterval(lambda -> None {
+        setCount(lambda prev: int -> int { return prev + 1; });
+    }, 1000);
+
+    return lambda -> None {
+        clearInterval(intervalId);
+    };
+}, []);
 ```
 
-### 5. Avoid Multiple `onMount()` Calls
+---
+
+## Summary
 
-Group initialization logic in a single `onMount()` call:
+- **useState**: Manage component state (replaces `createState()`, `createSignal()`)
+- **useEffect**: Handle side effects and lifecycle events (replaces `onMount()`, `createEffect()`)
+- **Dependencies**: Always specify what your effect depends on
+- **Cleanup**: Return a cleanup function for subscriptions, timers, and listeners
+- **Best Practices**: Handle errors, use loading states, keep effects focused
+
+React hooks provide a powerful and standard way to manage component lifecycle! 🎯
+
+---
+
+## Legacy Jac Hooks
+
+> **Note**: The following hooks are from older Jac versions. New projects should use React hooks instead.
+
+### `onMount()` - Legacy
+
+The `onMount()` hook was a Jac-specific hook for running code once when a component mounts:
 
 ```jac
-# ✅ Good: Single onMount with multiple operations
+# Legacy approach - use useEffect instead
 def Component() -> any {
     onMount(lambda -> None {
         loadData();
-        setupEventListeners();
-        initializeThirdParty();
     });
     return <div>Component</div>;
 }
+```
+
+**Modern equivalent:**
 
-# ❌ Avoid: Multiple onMount calls
+```jac
+# Modern approach with React hooks
 def Component() -> any {
-    onMount(lambda -> None { loadData(); });
-    onMount(lambda -> None { setupEventListeners(); });
-    onMount(lambda -> None { initializeThirdParty(); });
+    useEffect(lambda -> None {
+        loadData();
+    }, []);
     return <div>Component</div>;
 }
 ```
 
----
-
-## When NOT to Use `onMount()`
+### `createState()` - Legacy
 
-### Use `createEffect()` for Reactive Side Effects
-
-If you need code to run when state changes, use `createEffect()` instead:
+The `createState()` hook was a Jac-specific state management solution:
 
 ```jac
-# ✅ Use createEffect() for state-dependent side effects
+# Legacy approach - use useState instead
+let [state, setState] = createState({"count": 0});
+
 def Component() -> any {
-    let [count, setCount] = createSignal(0);
+    s = state();
+    return <div>{s.count}</div>;
+}
+```
 
-    createEffect(lambda -> None {
-        console.log("Count changed:", count());
-    });
+**Modern equivalent:**
 
-    return <div>
-        <button onClick={lambda -> None { setCount(count() + 1); }}>
-            Count: {count()}
-        </button>
-    </div>;
+```jac
+# Modern approach with React hooks
+def Component() -> any {
+    let [count, setCount] = useState(0);
+    return <div>{count}</div>;
 }
+```
 
-# ❌ onMount() won't run when state changes
-def Component() -> any {
-    let [count, setCount] = createSignal(0);
+### `createSignal()` and `createEffect()` - Legacy
 
-    onMount(lambda -> None {
-        console.log("Count:", count());  # Only logs initial value
-    });
+These were Signal-based reactive primitives from Jac:
 
-    return <div>Component</div>;
-}
-```
+```jac
+# Legacy approach
+let [count, setCount] = createSignal(0);
 
----
+createEffect(lambda -> None {
+    console.log("Count:", count());
+});
+```
 
-## Summary
+**Modern equivalent:**
 
-- **`onMount()`**: Runs code once when a component first mounts
-- **Use Cases**: Loading data, setting up listeners, initializing libraries
-- **Best Practices**: Handle async properly, check conditions, show loading states
-- **Avoid**: Using `onMount()` for reactive side effects (use `createEffect()` instead)
+```jac
+# Modern approach with React hooks
+let [count, setCount] = useState(0);
 
-Lifecycle hooks help you manage component initialization and side effects effectively! 🎯
+useEffect(lambda -> None {
+    console.log("Count:", count);
+}, [count]);
+```