{"id":24011898,"url":"https://github.com/ansgrb/statefolio","last_synced_at":"2026-05-06T04:31:43.234Z","repository":{"id":271188808,"uuid":"912640239","full_name":"ansgrb/statefolio","owner":"ansgrb","description":"explore and compare popular state management libraries for react native—redux, mst, recoil, jotai, and more—all in one sleek, interactive app.","archived":false,"fork":false,"pushed_at":"2025-02-08T21:53:38.000Z","size":2287,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-25T14:51:28.525Z","etag":null,"topics":["expo","expo-router","jotai","mobx-state-tree","nativewind","react-native","recoil","redux-toolkit","tyepscript","zustand"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ansgrb.png","metadata":{"files":{"readme":"docs/README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-01-06T04:59:51.000Z","updated_at":"2025-02-08T21:53:35.000Z","dependencies_parsed_at":"2025-02-25T14:54:01.848Z","dependency_job_id":null,"html_url":"https://github.com/ansgrb/statefolio","commit_stats":null,"previous_names":["ansgrb/statefolio"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ansgrb/statefolio","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ansgrb%2Fstatefolio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ansgrb%2Fstatefolio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ansgrb%2Fstatefolio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ansgrb%2Fstatefolio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ansgrb","download_url":"https://codeload.github.com/ansgrb/statefolio/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ansgrb%2Fstatefolio/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32678584,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-06T02:33:58.958Z","status":"ssl_error","status_checked_at":"2026-05-06T02:33:39.611Z","response_time":117,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["expo","expo-router","jotai","mobx-state-tree","nativewind","react-native","recoil","redux-toolkit","tyepscript","zustand"],"created_at":"2025-01-08T05:42:37.249Z","updated_at":"2026-05-06T04:31:43.218Z","avatar_url":"https://github.com/ansgrb.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🔥 statefolio 🔥 - the React Native state management showdown\n\nHey there, fellow React Native developer! 👋 Tired of scratching your head over which state management solution to pick? We've all been there! Let's make this journey fun and insightful.\n\n![Statefolio Demo](../assets/statefolio-demo.gif)\n\n## 🎯 What's This All About?\n\nWe've built the same app six different ways (yes, we're that crazy!) to help you understand each state management solution. Think of it as a \"Choose Your Own Adventure\" book, but for code!\n\n### 🛠 What We're Building\n\n1. A counter app (because we're legally required to start with one 😉)\n2. A todo list (breaking traditions? Never!)\n3. All wrapped in beautiful NativeWind styling (because we're fancy)\n\n## 🏃‍♂️ TL;DR - Quick Picks\n\nIn a hurry? Here's your cheat sheet:\n\n- **\"I'm building the next Facebook\"** → Redux Toolkit\n- **\"I love clean, simple code\"** → MobX\n- **\"Bundle size is my religion\"** → Zustand\n- **\"I'm from the future\"** → Recoil\n- **\"I'm a React purist\"** → Context API\n- **\"I like atomic physics\"** → Jotai\n\n## 🎪 The Contestants\n\n### 🏆 Redux Toolkit\n\n```typescript\nconst IAmInevitable = () =\u003e {\n  const dispatch = useDispatch();\n  // With great power comes great boilerplate\n};\n```\n\n**Perfect for:** Teams who love meetings about meetings about state management\n\n### 🧪 MobX\n\n```typescript\nmakeAutoObservable(this);\n// Magic! ✨ But the good kind\n```\n\n**Perfect for:** People who believe in magic but also want to understand how the trick works\n\n### 🏃‍♂️ Zustand\n\n```typescript\nconst useStore = create((set) =\u003e ({\n  bears: 0,\n  increaseBears: () =\u003e set((state) =\u003e ({ bears: state.bears + 1 })),\n}));\n// That's it. Really. No, we're not kidding.\n```\n\n**Perfect for:** Minimalists who still want their DevTools\n\n### ⚛️ Recoil\n\n```typescript\nconst todoListState = atom({\n  key: \"TodoList\",\n  default: [],\n});\n// Facebook's way of saying \"hold my beer\"\n```\n\n**Perfect for:** Quantum physics enthusiasts who code\n\n### 🤝 Context API\n\n```typescript\nconst Context = createContext();\n// React's built-in solution (it's not just for themes!)\n```\n\n**Perfect for:** React traditionalists and minimalists\n\n### ⚡ Jotai\n\n```typescript\nconst counterAtom = atom(0);\n// Atoms! But not the scary radioactive kind\n```\n\n**Perfect for:** People who think Redux is too big and Context is too basic\n\n## 🎭 Real Talk: Performance Showdown\n\nWe did the heavy lifting so you don't have to! Here's what happened when we made each solution sweat:\n\n| Library       | Bundle Size | Performance | Dev Experience |\n| ------------- | ----------- | ----------- | -------------- |\n| Redux Toolkit | Chonky boi  | Rock solid  | Detective work |\n| MobX          | Just right  | Speedy      | Magic carpet   |\n| Zustand       | Tiny        | Lightning   | Smooth sailing |\n| Recoil        | Medium      | Quick       | Future proof   |\n| Context API   | Free!       | Good enough | Familiar       |\n| Jotai         | Smol        | Fast        | Atomic fun     |\n\n## 🎓 Learning Curve Reality Check\n\n- **Redux Toolkit**: \"What's a thunk?\" - Every junior dev\n- **MobX**: \"Wait, it just... works?\"\n- **Zustand**: \"Is that all I need to write?\"\n- **Recoil**: \"Facebook uses this, so it must be good, right?\"\n- **Context API**: \"Oh, I know this one!\"\n- **Jotai**: \"Atoms go brrr\"\n\n## 🚀 Getting Started\n\nReady to dive in? Each solution has its own comprehensive guide:\n\n- [Redux Toolkit Guide](./redux-toolkit.md) - The industry standard\n- [MobX Guide](./mobx.md) - The reactive powerhouse\n- [Zustand Guide](./zustand.md) - The new kid on the block\n- [Recoil Guide](./recoil.md) - Facebook's secret sauce\n- [Context API Guide](./context-api.md) - React's built-in solution\n- [Jotai Guide](./jotai.md) - The atomic challenger\n\n## 🤔 How to Choose?\n\nAsk yourself these questions:\n\n1. **How big is your app?**\n\n   - \"It's the next big thing\" → Redux Toolkit\n   - \"It's modest but important\" → MobX/Zustand\n   - \"It's a side project\" → Context/Jotai\n\n2. **How's your team?**\n\n   - \"We love TypeScript\" → Any of them (they all play nice)\n   - \"We need good docs\" → Redux Toolkit/MobX\n   - \"We hate boilerplate\" → Zustand/Jotai\n\n3. **What's your priority?**\n   - \"Performance\" → MobX/Zustand\n   - \"Ecosystem\" → Redux Toolkit\n   - \"Simplicity\" → Context API/Jotai\n\n## 🎉 Final Words\n\nRemember, there's no \"perfect\" solution - just the right tool for your specific needs. Each library has its own superpowers, and now you know them all!\n\nWant to dive deeper? Check out our:\n\n- [Detailed Comparison Guide](./comparison.md)\n- [Performance Deep Dive](./performance.md)\n- [Testing Strategies](./testing.md)\n- [Migration Guide](./migration.md)\n\n## 📂 Project Structure\n\n```bash\nsrc/\n├── app/                    # Expo Router app directory\n│   ├── _layout.tsx        # Root layout with providers\n│   ├── index.tsx          # Home screen with navigation\n│   ├── redux.tsx          # Redux implementation\n│   ├── mobx.tsx           # MobX implementation\n│   ├── zustand.tsx        # Zustand implementation\n│   ├── recoil.tsx         # Recoil implementation\n│   ├── context.tsx        # Context implementation\n│   └── jotai.tsx          # Jotai implementation\n├── components/            # Shared components\n│   └── BaseScreen.tsx     # Base screen layout\n└── hooks/                 # Custom hooks\n    └── useColorScheme.ts  # Color scheme hook\n```\n\n## 🤝 Contributing\n\nContributions are welcome! If you'd like to contribute, please follow these steps:\n\n1. Fork the repository.\n2. Create a new branch (`git checkout -b feature/YourFeature`).\n3. Commit your changes (`git commit -m 'Add some feature'`).\n4. Push to the branch (`git push origin feature/YourFeature`).\n5. Open a pull request.\n\n---\n\nRemember: The best state management solution is the one that makes your team productive and your app performant. Now go forth and manage some state! 🚀\n\n_P.S. If you enjoyed this guide, consider giving it a ⭐ on GitHub. It helps others find this resource and makes us feel warm and fuzzy inside!_\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fansgrb%2Fstatefolio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fansgrb%2Fstatefolio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fansgrb%2Fstatefolio/lists"}