[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3609":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":25,"hasPages":25,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":31,"readmeContent":32,"aiSummary":33,"trendingCount":16,"starSnapshotCount":16,"syncStatus":18,"lastSyncTime":34,"discoverSource":35},3609,"mobx","mobxjs\u002Fmobx","mobxjs","Simple, scalable state management.","http:\u002F\u002Fmobx.js.org",null,"TypeScript",28189,1798,331,49,0,1,2,18,4,44.77,"MIT License",false,"main",true,[27,5,28,29,30],"javascript","react","reactive-programming","typescript","2026-06-12 02:00:51","\u003Cimg src=\"https:\u002F\u002Fmobx.js.org\u002Fassets\u002Fmobx.png\" alt=\"logo\" height=\"120\" align=\"right\" \u002F>\n\n# MobX\n\n_Simple, scalable state management._\n\n[![npm version](https:\u002F\u002Fbadge.fury.io\u002Fjs\u002Fmobx.svg)](https:\u002F\u002Fbadge.fury.io\u002Fjs\u002Fmobx)\n[![OpenCollective](https:\u002F\u002Fopencollective.com\u002Fmobx\u002Fbackers\u002Fbadge.svg)](docs\u002Fbackers-sponsors.md#backers)\n[![OpenCollective](https:\u002F\u002Fopencollective.com\u002Fmobx\u002Fsponsors\u002Fbadge.svg)](docs\u002Fbackers-sponsors.md#sponsors)\n[![Discuss on Github](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fdiscuss%20on-GitHub-orange)](https:\u002F\u002Fgithub.com\u002Fmobxjs\u002Fmobx\u002Fdiscussions)\n[![Coverage Status](https:\u002F\u002Fcoveralls.io\u002Frepos\u002Fgithub\u002Fmobxjs\u002Fmobx\u002Fbadge.svg?branch=main)](https:\u002F\u002Fcoveralls.io\u002Fgithub\u002Fmobxjs\u002Fmobx?branch=main)\n[![View changelog](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fchangelogs.xyz-Explore%20Changelog-brightgreen)](https:\u002F\u002Fchangelogs.xyz\u002Fmobx)\n\n---\n\n## Documentation\n\nDocumentation can be found at **[mobx.js.org](https:\u002F\u002Fmobx.js.org\u002F)**.\n\n---\n\n## Sponsors\n\nMobX is made possible by the generosity of the sponsors below, and many other [individual backers](https:\u002F\u002Fgithub.com\u002Fmobxjs\u002Fmobx\u002Fblob\u002Fmain\u002Fdocs\u002Fbackers-sponsors.md#backers). Sponsoring directly impacts the longevity of this project.\n\n**🥇🥇 Platinum sponsors (\\$5000+ total contribution): 🥇🥇**\n\n\u003Cbr\u002F>\n\u003Ca href=\"https:\u002F\u002Fwww.guilded.gg\u002F\">\u003Cimg src=\"https:\u002F\u002Fmobx.js.org\u002Fassets\u002Fguilded.jpg\" align=\"center\" width=\"100\" title=\"Guilded\" alt=\"Guilded\" \u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fwww.canva.com\u002F\">\u003Cimg src=\"https:\u002F\u002Fmobx.js.org\u002Fassets\u002Fcanva.svg\" align=\"center\" width=\"100\" title=\"Canva\" alt=\"Canva\" \u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fwww.getparallax.com\u002F\">\u003Cimg src=\"https:\u002F\u002Fmobx.js.org\u002Fassets\u002Fparallax.png\" align=\"center\" width=\"100\" title=\"Parallax\" alt=\"Parallax\" \u002F>\u003C\u002Fa>\n\n**🥇 Gold sponsors (\\$2500+ total contribution):**\n\n\u003Cbr\u002F>\n\u003Ca href=\"https:\u002F\u002Fwww.one-beyond.com\">\u003Cimg src=\"https:\u002F\u002Fmobx.js.org\u002Fassets\u002Fdcsl.png\" align=\"center\" width=\"100\" title=\"One Beyond\" alt=\"One Beyond\"\u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Ffrontendmasters.com\u002F\">\u003Cimg src=\"https:\u002F\u002Fmobx.js.org\u002Fassets\u002Ffrontendmasters.jpg\" align=\"center\" width=\"100\" title=\"Frontend Masters\" alt=\"Frontend Masters\">\u003C\u002Fa>\n\u003Ca href=\"http:\u002F\u002Fauctionfrontier.com\u002F\">\u003Cimg src=\"https:\u002F\u002Fmobx.js.org\u002Fassets\u002Fauctionfrontier.jpeg\" align=\"center\" width=\"100\" title=\"Auction Frontier\" alt=\"Auction Frontier\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fwww.codefirst.co.uk\u002F\">\u003Cimg src=\"https:\u002F\u002Fmobx.js.org\u002Fassets\u002Fcodefirst.png\" align=\"center\" width=\"100\" title=\"CodeFirst\" alt=\"CodeFirst\"\u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fmodulz.app\u002F\">\u003Cimg src=\"https:\u002F\u002Fmobx.js.org\u002Fassets\u002Fmodulz.png\" align=\"center\" width=\"100\" title=\"Modulz\" alt=\"Modulz\"\u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fcoinbase.com\u002F\">\u003Cimg src=\"https:\u002F\u002Fmobx.js.org\u002Fassets\u002Fcoinbase.jpeg\" align=\"center\" width=\"100\" title=\"Coinbase\" alt=\"Coinbase\" \u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fcurology.com\u002Fblog\u002Ftech\">\u003Cimg src=\"https:\u002F\u002Fmobx.js.org\u002Fassets\u002Fcurology.png\" align=\"center\" width=\"100\" title=\"Curology\" alt=\"Curology\"\u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fmendix.com\u002F\">\u003Cimg src=\"https:\u002F\u002Fmobx.js.org\u002Fassets\u002Fmendix-logo.png\" align=\"center\" width=\"100\" title=\"Mendix\" alt=\"Mendix\" \u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopensource.facebook.com\u002F\">\u003Cimg src=\"https:\u002F\u002Fmobx.js.org\u002Fassets\u002Ffbos.jpeg\" align=\"center\" width=\"100\" title=\"Facebook Open Source\" alt=\"Facebook Open Source\" \u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fcasinosites.ltd.uk\u002F?utm_source=sponsorship&utm_medium=mobx&utm_campaign=readme\">\u003Cimg src=\"https:\u002F\u002Fmobx.js.org\u002Fassets\u002Fcasino2.png\" align=\"center\" width=\"100\" title=\"Casino Sites\" alt=\"Casino Sites\"\u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fwww.bugsnag.com\u002Fplatforms\u002Freact-error-reporting?utm_source=MobX&utm_medium=Website&utm_content=open-source&utm_campaign=2019-community&utm_term=20190913\">\u003Cimg src=\"https:\u002F\u002Fmobx.js.org\u002Fassets\u002Fbugsnag.jpg\" align=\"center\" width=\"100\" title=\"Bugsnag\" alt=\"Bugsnag\"\u002F>\u003C\u002Fa>\n\n**🥈 Silver sponsors (\\$500+ total contributions):**\u003Cbr\u002F>\n\n\u003Ca href=\"https:\u002F\u002Fmantro.net\u002Fjobs\u002Fwarlock\">\u003Cimg src=\"https:\u002F\u002Fmobx.js.org\u002Fassets\u002Fmantro.png\" align=\"center\" width=\"100\" title=\"mantro GmbH\" alt=\"mantro GmbH\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fxh.io\u002F\">\u003Cimg src=\"https:\u002F\u002Fmobx.js.org\u002Fassets\u002Fxh.png\" align=\"center\" width=\"100\" title=\"Extremely Heavy Industries\" alt=\"Extremely Heavy Industries\" \u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fwww.algolia.com\u002F\">\u003Cimg src=\"https:\u002F\u002Fmobx.js.org\u002Fassets\u002Falgolia.jpg\" align=\"center\" width=\"100\" title=\"Algolia\" alt=\"Algolia\" \u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fspace307.com\u002F?utm_source=sponsorship&utm_medium=mobx&utm_campaign=readme\">\u003Cimg src=\"https:\u002F\u002Fmobx.js.org\u002Fassets\u002Fspace307.png\" align=\"center\" width=\"100\" title=\"Space307\" alt=\"Space307\"\u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fblokt.com\u002F\">\u003Cimg src=\"https:\u002F\u002Fmobx.js.org\u002Fassets\u002Fblokt.jpg\" align=\"center\" width=\"100\" title=\"Blokt\" alt=\"Blokt\"\u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fupper.co\u002F?utm_source=github_mobxjs_sponsorship&utm_medium=paid_acquisition&utm_campaign=sponsorship\">\u003Cimg src=\"https:\u002F\u002Fmobx.js.org\u002Fassets\u002Fupper.png\" align=\"center\" width=\"100\" title=\"UPPER\" alt=\"UPPER\"\u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fcareers.dazn.com\u002F\">\u003Cimg src=\"https:\u002F\u002Fmobx.js.org\u002Fassets\u002Fdazn.png\" align=\"center\" width=\"100\" title=\"DAZN\" alt=\"DAZN\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Ftalentplot.com\u002F\">\u003Cimg src=\"https:\u002F\u002Fmobx.js.org\u002Fassets\u002Ftalentplot.png\" align=\"center\" width=\"100\" title=\"talentplot\" alt=\"talentplot\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fwww.easeus.com\u002F?utm_source=github_mobxjs_sponsorship&utm_medium=readme&utm_campaign=sponsorship\">\u003Cimg src=\"https:\u002F\u002Fmobx.js.org\u002Fassets\u002Feaseus.png\" align=\"center\" width=\"100\" title=\"EaseUS\" alt=\"EaseUS\"\u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Froute4me.com\u002F\">\u003Cimg src=\"https:\u002F\u002Fmobx.js.org\u002Fassets\u002Froute4me.png\" align=\"center\" width=\"100\" title=\"Route Planner and Route Optimizer\" alt=\"Route Planner and Route Optimizer\"\u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fhandsontable.com\u002Fdocs\u002Freact-data-grid\u002F?utm_source=Mobx_homepage&utm_medium=sponsorship&utm_campaign=library_sponsorship\">\u003Cimg src=\"https:\u002F\u002Fmobx.js.org\u002Fassets\u002Fhandsontable.png\" align=\"center\" width=\"100\" title=\"Handsontable\" alt=\"Handsontable\"\u002F>\u003C\u002Fa>\n\n## Introduction\n\n_Anything that can be derived from the application state, should be. Automatically._\n\nMobX is a signal based, battle-tested library that makes state management simple and scalable by transparently applying functional reactive programming.\nThe philosophy behind MobX is simple:\n\n\u003Cdiv class=\"benefits\">\n    \u003Cdiv>\n        \u003Cdiv class=\"pic\">😙\u003C\u002Fdiv>\n        \u003Cdiv>\n            \u003Ch4>Straightforward\u003C\u002Fh4>\n            \u003Cp>Write minimalistic, boilerplate-free code that captures your intent.\n            Trying to update a record field? Simply use a normal JavaScript assignment —\n            the reactivity system will detect all your changes and propagate them out to where they are being used.\n            No special tools are required when updating data in an asynchronous process.\n            \u003C\u002Fp>\n        \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv>\n        \u003Cdiv class=\"pic\">🚅\u003C\u002Fdiv>\n        \u003Cdiv>\n            \u003Ch4>Effortless optimal rendering\u003C\u002Fh4>\n            \u003Cp>\n                All changes to and uses of your data are tracked at runtime, building a dependency tree that captures all relations between state and output.\n                This guarantees that computations that depend on your state, like React components, run only when strictly needed.\n                There is no need to manually optimize components with error-prone and sub-optimal techniques like memoization and selectors.\n            \u003C\u002Fp>\n        \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv>\n        \u003Cdiv class=\"pic\">🤹🏻‍♂️\u003C\u002Fdiv>\n        \u003Cdiv>\n            \u003Ch4>Architectural freedom\u003C\u002Fh4>\n            \u003Cp>\n                MobX is unopinionated and allows you to manage your application state outside of any UI framework.\n                This makes your code decoupled, portable, and above all, easily testable.\n            \u003C\u002Fp>\n        \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n---\n\n## A quick example\n\nSo what does code that uses MobX look like?\n\n```javascript\nimport React from \"react\"\nimport ReactDOM from \"react-dom\"\nimport { makeAutoObservable } from \"mobx\"\nimport { observer } from \"mobx-react-lite\"\n\n\u002F\u002F Model the application state.\nfunction createTimer() {\n    return makeAutoObservable({\n        secondsPassed: 0,\n        increase() {\n            this.secondsPassed += 1\n        },\n        reset() {\n            this.secondsPassed = 0\n        }\n    })\n}\n\nconst myTimer = createTimer()\n\n\u002F\u002F Build a \"user interface\" that uses the observable state.\nconst TimerView = observer(({ timer }) => (\n    \u003Cbutton onClick={() => timer.reset()}>Seconds passed: {timer.secondsPassed}\u003C\u002Fbutton>\n))\n\nReactDOM.render(\u003CTimerView timer={myTimer} \u002F>, document.body)\n\n\u002F\u002F Update the 'Seconds passed: X' text every second.\nsetInterval(() => {\n    myTimer.increase()\n}, 1000)\n```\n\nThe `observer` wrapper around the `TimerView` React component will automatically detect that rendering\ndepends on the `timer.secondsPassed` observable, even though this relationship is not explicitly defined. The reactivity system will take care of re-rendering the component when _precisely that_ field is updated in the future.\n\nEvery event (`onClick` \u002F `setInterval`) invokes an _action_ (`myTimer.increase` \u002F `myTimer.reset`) that updates _observable state_ (`myTimer.secondsPassed`).\nChanges in the observable state are propagated precisely to all _computations_ and _side effects_ (`TimerView`) that depend on the changes being made.\n\n\u003Cimg alt=\"MobX unidirectional flow\" src=\"https:\u002F\u002Fmobx.js.org\u002Fassets\u002Fflow2.png\" align=\"center\" \u002F>\n\nThis conceptual picture can be applied to the above example, or any other application using MobX.\n\n## Getting started\n\nTo learn about the core concepts of MobX using a larger example, check out **[The gist of MobX](https:\u002F\u002Fmobx.js.org\u002Fthe-gist-of-mobx.html)** page, or take the **[10 minute interactive introduction to MobX and React](https:\u002F\u002Fmobx.js.org\u002Fgetting-started)**.\nThe philosophy and benefits of the mental model provided by MobX are also described in great detail in the blog posts [UI as an afterthought](https:\u002F\u002Fmichel.codes\u002Fblogs\u002Fui-as-an-afterthought) and [How to decouple state and UI (a.k.a. you don’t need componentWillMount)](https:\u002F\u002Fhackernoon.com\u002Fhow-to-decouple-state-and-ui-a-k-a-you-dont-need-componentwillmount-cc90b787aa37).\n\n## Further resources\n\n-   The [MobX cheat sheet](https:\u002F\u002Fgum.co\u002FfSocU) (£5) is both useful and sponsors the project\n-   [10 minute interactive introduction to MobX and React](https:\u002F\u002Fmobx.js.org\u002Fgetting-started)\n-   [Egghead.io course, based on MobX 3](https:\u002F\u002Fegghead.io\u002Fcourses\u002Fmanage-complex-state-in-react-apps-with-mobx)\n-   The [MobX awesome list](https:\u002F\u002Fgithub.com\u002Fmobxjs\u002Fawesome-mobx#awesome-mobx) – a long list of MobX resources and example projects\n\n### The MobX book\n\n\u003Ca href=\"https:\u002F\u002Fwww.packtpub.com\u002Fproduct\u002Fmobx-quick-start-guide\u002F9781789344837\">\u003Cimg src=\"https:\u002F\u002Fmobx.js.org\u002Fassets\u002Fbook.jpg\" height=\"120px\" \u002F>\u003C\u002Fa>\n\nThe **[MobX Quick Start Guide](https:\u002F\u002Fwww.packtpub.com\u002Fproduct\u002Fmobx-quick-start-guide\u002F9781789344837)** ($24.99) by [Pavan Podila](https:\u002F\u002Ftwitter.com\u002Fpavanpodila) and [Michel Weststrate](https:\u002F\u002Ftwitter.com\u002Fmweststrate) is available as an [ebook](https:\u002F\u002Fwww.packtpub.com\u002Fproduct\u002Fmobx-quick-start-guide\u002F9781789344837), [paperback](https:\u002F\u002Fwww.amazon.com\u002FMobX-Quick-Start-Guide-Supercharge\u002Fdp\u002F1789344832), and on the [O'Reilly platform](https:\u002F\u002Fwww.oreilly.com\u002Flibrary\u002Fview\u002Fmobx-quick-start\u002F9781789344837\u002F) (see [preview](https:\u002F\u002Fbooks.google.com\u002Fbooks?id=ALFmDwAAQBAJ&printsec=frontcover#v=onepage&q&f=false)).\n\n### Videos\n\n-   [Introduction to MobX & React in 2020](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=pnhIJA64ByY) by Leigh Halliday, _17 min_.\n-   [ReactNext 2016: Real World MobX](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=Aws40KOx90U) by Michel Weststrate, _40 min_, [slides](https:\u002F\u002Fdocs.google.com\u002Fpresentation\u002Fd\u002F1DrI6Hc2xIPTLBkfNH8YczOcPXQTOaCIcDESdyVfG_bE\u002Fedit?usp=sharing).\n-   [CityJS 2020: MobX, from mutable to immutable, to observable data](https:\u002F\u002Fyoutu.be\u002FsP7dtZm_Wx0?t=27050) by Michel Weststrate, _30 min_.\n-   [OpenSourceNorth: Practical React with MobX (ES5)](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=XGwuM_u7UeQ) by Matt Ruby, _42 min_.\n-   [HolyJS 2019: MobX and the unique symbiosis of predictability and speed](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=NBYbBbjZeX4&list=PL8sJahqnzh8JJD7xahG5zXkjfM5GOgcPA&index=21&t=0s) by Michel Weststrate, _59 min_.\n-   [React Amsterdam 2016: State Management Is Easy](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=ApmSsu3qnf0&feature=youtu.be) by Michel Weststrate, _20 min_, [slides](https:\u002F\u002Fspeakerdeck.com\u002Fmweststrate\u002Fstate-management-is-easy-introduction-to-mobx).\n-   {🚀} [React Live 2019: Reinventing MobX](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=P_WqKZxpX8g) by Max Gallo, _27 min_.\n\n## Credits\n\nMobX is inspired by reactive programming principles, which are for example used in spreadsheets. It is inspired by model–view–viewmodel frameworks like [MeteorJS's Tracker](https:\u002F\u002Fdocs.meteor.com\u002Fapi\u002Ftracker.html), [Knockout](https:\u002F\u002Fknockoutjs.com\u002F) and [Vue.js](https:\u002F\u002Fvuejs.org\u002F), but MobX brings _transparent functional reactive programming_ (TFRP, a concept which is further explained in the [MobX book](https:\u002F\u002Fwww.packtpub.com\u002Fproduct\u002Fmobx-quick-start-guide\u002F9781789344837)) to the next level and provides a standalone implementation. It implements TFRP in a glitch-free, synchronous, predictable and efficient manner.\n\nA ton of credit goes to [Mendix](https:\u002F\u002Fgithub.com\u002Fmendix), for providing the flexibility and support to maintain MobX and the chance to prove the philosophy of MobX in a real, complex, performance critical applications.\n","MobX 是一个简单且可扩展的状态管理库。它通过透明的函数响应式编程使得状态管理变得直观和高效，支持 TypeScript 和 JavaScript，并且能够与 React 等前端框架无缝集成。其核心功能包括自动跟踪依赖关系、仅在需要时更新视图以及提供强大的调试工具。适用于任何需要处理复杂状态逻辑的应用场景，尤其是大型单页应用（SPA）开发中，可以显著提高代码的可维护性和性能。","2026-06-11 02:54:57","top_language"]