\r\n )}\r\n/>\r\n\r\n```\r\n\r\n### Great For:\r\n\r\nHere are emojis for each UI element with names:\r\n\r\n- ๐ **Badges**\r\n \r\n- ๐ข **Counters**\r\n \r\n- ๐ **Status Text**\r\n \r\n- ๐งฉ **Mini Widgets**\r\n \r\n- โจ **Inline UI Parts**\r\n \r\n\r\n----------\r\n\r\n# 4๏ธโฃ chiComputed() โ Derived State\r\n\r\nAuto-updating values based on other state.\r\n\r\n```tsx\r\nconst price = chiState(100);\r\nconst qty = chiState(2);\r\n\r\nconst total = chiComputed(() => price.value * qty.value);\r\n\r\n```\r\n\r\n----------\r\n\r\n```mermaid\r\nflowchart LR\r\nA[price] --> C[total]\r\nB[qty] --> C[total]\r\nC --> D[UI updates]\r\n\r\n```\r\n\r\n----------\r\n\r\n### Full Example\r\n\r\n```tsx\r\n\r\n\r\n```\r\n\r\n----------\r\n\r\n# 5๏ธโฃ chiLog() โ Reactive Effects\r\n\r\nRun code whenever used state changes.\r\n\r\n```tsx\r\nchiLog(() => {\r\n console.log(count.value);\r\n});\r\n\r\n```\r\n\r\n### With Cleanup\r\n\r\n```tsx\r\nchiLog(() => {\r\n const id = setInterval(() => {\r\n console.log(count.value);\r\n }, 1000);\r\n\r\n return () => clearInterval(id);\r\n});\r\n\r\n```\r\n\r\n----------\r\n\r\n# 6๏ธโฃ chiBatch() โ Group Updates\r\n\r\nMany changes โ one update wave.\r\n\r\n```tsx\r\nchiBatch(() => {\r\n count.value++;\r\n user.value = \"Alex\";\r\n dark.value = true;\r\n});\r\n\r\n```\r\n\r\n----------\r\n\r\n```mermaid\r\nflowchart LR\r\nA[Multiple Changes] --> B[chiBatch]\r\nB --> C[Single Render Wave]\r\n\r\n```\r\n\r\n----------\r\n\r\n# ๐ Local vs ๐ Global State\r\n\r\n----------\r\n\r\n## Local Scope (Internal State)\r\n\r\nUse inside component or page.\r\n\r\nBest for:\r\n\r\n>#### ๐ **Forms**\r\n \r\n>#### ๐ช **Modals**\r\n \r\n>#### โฌ๏ธ **Dropdowns**\r\n \r\n>#### ๐งฉ **Widgets**\r\n \r\n>#### โณ **Temporary UI**\r\n\r\n \r\n```tsx\r\nconst open = chiState(false);\r\n\r\n```\r\n\r\n----------\r\n\r\n## Global Scope (External Store)\r\n\r\nUse shared state across app.\r\n\r\n#### store.ts\r\n\r\n```tsx\r\nexport const darkMode = chiState(false);\r\nexport const cartCount = chiState(0);\r\n\r\n```\r\n\r\n#### Page.tsx\r\n\r\n```tsx\r\n\r\n\r\n\r\n\r\n```\r\n\r\n----------\r\n\r\n```mermaid\r\nflowchart LR\r\nA[store.ts] --> B[Page A]\r\nA --> C[Page B]\r\nA --> D[Navbar]\r\n\r\n```\r\n\r\n----------\r\n\r\n# ๐ Example Projects\r\n\r\n### โ Todo App\r\n\r\nFeatures:\r\n\r\n- Add tasks\r\n \r\n- Search\r\n \r\n- Filters\r\n \r\n- Edit task\r\n \r\n- Progress bar\r\n \r\n- Dark mode\r\n \r\n- LocalStorage\r\n \r\n- Computed stats\r\n >#### GITHUB\r\n\r\n----------\r\n\r\n## ๐ฎ Tic Tac Toe\r\n\r\nFeatures:\r\n\r\n- Board state\r\n \r\n- Winner logic\r\n \r\n- Scoreboard\r\n \r\n- New round\r\n \r\n- Reset all\r\n >#### GITHUB\r\n\r\n----------\r\n\r\n# โก Why It Feels Better\r\n\r\nTraditional React:\r\n\r\n```tsx\r\nconst [count, setCount] = useState(0);\r\nsetCount(prev => prev + 1);\r\n\r\n```\r\n\r\nchiState:\r\n\r\n```tsx\r\ncount.value++\r\n\r\n```\r\n\r\nSimple. Direct. Clean.\r\n\r\n----------\r\n\r\n# ๐ Performance Summary\r\n\r\n### Stress Tests Showed:\r\n\r\n>#### Only affected UI rerenders\r\n \r\n>#### 100 isolated counters passed\r\n \r\n>#### 10,000 counters mounted\r\n \r\n>#### Smooth 60 FPS updates\r\n \r\n>#### Good cleanup behavior\r\n \r\n>#### Efficient batching\r\n \r\n\r\n----------\r\n\r\n\r\n# ๐งฉ Best Practices\r\n\r\n>## Use `Chi`\r\n\r\nFor simple values.\r\n\r\n```tsx\r\n\r\n\r\n```\r\n\r\n>## Use `chiView`\r\n\r\nFor sections / layouts.\r\n\r\n```tsx\r\nreturn chiView(() => );\r\n\r\n```\r\n\r\n>## Use `chiComputed`\r\n\r\nFor totals / filtered data.\r\n\r\n>## Use `chiBatch`\r\n\r\nFor grouped updates.\r\n\r\n>## Use Global Store\r\n\r\nFor shared app state.\r\n\r\n----------\r\n\r\n# โ Avoid\r\n\r\n> ##### Mutating arrays directly\r\n \r\n> ##### Circular computed chains\r\n \r\n> ##### Huge logic inside render\r\n \r\n\r\nBad:\r\n\r\n```tsx\r\nitems.value.push(1)\r\n\r\n```\r\n\r\nGood:\r\n\r\n```tsx\r\nitems.value = [...items.value, 1]\r\n\r\n```\r\n\r\n----------\r\n\r\n# FAQ\r\n\r\n### Need Provider?\r\n\r\n> ##### No\r\n\r\n### Need Context?\r\n\r\n> ##### No\r\n\r\n### Works with Next.js?\r\n\r\n> ##### Yes\r\n\r\n### TypeScript Support?\r\n\r\n> ##### Yes\r\n\r\n----------\r\n\r\n## ๐ Final Example\r\n\r\n```tsx\r\n\"use client\";\r\n\r\nimport {\r\n chiState,\r\n chiComputed,\r\n Chi\r\n} from \"chistate\";\r\n\r\nconst count = chiState(1);\r\n\r\nconst double = chiComputed(\r\n () => count.value * 2\r\n);\r\n\r\nexport default function App() {\r\n return (\r\n
\r\n \r\n\r\n
Count:
\r\n
Double:
\r\n
\r\n );\r\n}\r\n\r\n```\r\n\r\n----------\r\n\r\n## โค๏ธ Summary\r\n\r\nIf you want:\r\n\r\n> ##### โก Simpler React state\r\n \r\n> ##### ๐ฏ Less rerenders\r\n \r\n> ##### ๐งผ No boilerplate\r\n \r\n> ##### ๐ง Easy mental model\r\n \r\n> ##### ๐ Reactive power\r\n \r\n\r\n---\r\n\r\n \r\n\r\n### โก Why chistate?\r\n\r\n \r\n\r\n> ##### No boilerplate\r\n\r\n >##### No providers\r\n\r\n >##### No reducers\r\n\r\n >##### Just variables\r\n\r\n \r\n\r\n---\r\n### โญ Support\r\n\r\n \r\n\r\n> ##### If you like it, give a โญ on [Github!](https://github.com/rohitLovesKrishna/chistate)\r\n\r\n### Contributing\r\n> ##### For usage related query feel free to contact \"admin@appsitesolutions.in\"\r\n##### Made with โค๏ธ by Rohit Ambawata\r\n\r\n----------\r\n\r\n# ๐ License\r\n\r\nMIT","readmeFilename":"README.md"}