\n\n {/* Reactive prop — pass a function */}\n `Count is ${val(count)}`} />\n\n {/* Reactive list — function child returning array */}\n
\n {() => val(items).map((item) => (\n
{item.name}
\n ))}\n
\n\n {/* Events */}\n \n
\n );\n}\n```\n\n## Flow Components\n\n@hedystia/view provides built-in components for control flow. Since there is no Virtual DOM, these components ensure that only the necessary parts of the DOM are updated efficiently.\n\n> **Pro Tip**: Use functions `{() => }` inside flow components to ensure they are created and cleaned up correctly within the reactive scope.\n\n### Show (Conditional Rendering)\n\n```tsx\nimport { sig, mount, Show } from \"@hedystia/view\";\n\nfunction App() {\n const [loggedIn, setLoggedIn] = sig(false);\n\n return (\n
\n \n\n Please log in to continue.}\n >\n
\n
Welcome back!
\n
You are logged in.
\n
\n \n
\n );\n}\n```\n\n### For (Keyed List)\n\n```tsx\nimport { sig, val, mount, For } from \"@hedystia/view\";\n\ninterface Todo {\n id: number;\n text: string;\n}\n\nfunction TodoList() {\n const [todos, setTodos] = sig([\n { id: 1, text: \"Learn signals\" },\n { id: 2, text: \"Build an app\" },\n ]);\n\n return (\n
\n todo.id}>\n {(todo, index) => (\n
\n {() => `${index + 1}. ${todo.text}`}\n
\n )}\n \n
\n );\n}\n```\n\n### Switch / Match (Multiple Branching)\n\n```tsx\nimport { sig, mount, Switch, Match } from \"@hedystia/view\";\n\nfunction StatusView() {\n const [status, setStatus] = sig(\"loading\");\n\n return (\n Unknown state}>\n status() === \"loading\"}>\n
\n \n );\n}\n```\n\n## Context\n\nContext provides a way to share data through the component tree without passing props manually.\n\n```tsx\nimport { ctx, use, sig, mount } from \"@hedystia/view\";\n\nconst ThemeCtx = ctx(\"light\");\n\nfunction App() {\n const [theme, setTheme] = sig(\"dark\");\n\n return (\n \n
\n );\n}\n```\n\n## Effects & Watchers\n\n```tsx\nimport { effect, on, watch } from \"@hedystia/view\";\n\n// Run a side effect whenever dependencies change (eager)\neffect(() => {\n console.log(\"Count is now:\", count());\n});\n\n// Run with access to previous value (untracked callback)\non(count, (current, prev) => {\n console.log(`Changed from ${prev} to ${current}`);\n});\n\n// Watch a signal or accessor directly\nwatch(count, (val) => {\n console.log(\"Updated:\", val);\n});\n```\n\n## Data Fetching\n\n```tsx\nimport { sig, val, set, load, action } from \"@hedystia/view\";\n\nconst userId = sig(1);\n\nconst user = load(\n () => val(userId),\n async (id) => {\n const res = await fetch(`/api/users/${id}`);\n return res.json();\n }\n);\n\nfunction UserCard() {\n return (\n
\n {() => {\n if (val(user.loading)) return Loading...;\n if (val(user.error)) return Error: {val(user.error)!.message};\n return {val(user.data)?.name};\n }}\n