{"id":5704,"date":"2019-12-12T16:09:41","date_gmt":"2019-12-12T10:39:41","guid":{"rendered":"https:\/\/www.innovationm.com\/blog\/?p=5704"},"modified":"2026-05-28T16:42:07","modified_gmt":"2026-05-28T11:12:07","slug":"mobx-in-react","status":"publish","type":"post","link":"https:\/\/www.innovationm.com\/blog\/mobx-in-react\/","title":{"rendered":"MobX in React"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">MobX is the new upcoming state management solution. This blog is all about how to create a simple React-Native app using MobX.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">MobX is fast in speed than Redux, its easier to learn &amp; requires less boilerplate code.<\/span><\/p>\n<p><strong>Here are some of its main concepts<\/strong><\/p>\n<p><strong>Stores:<\/strong><\/p>\n<p><span style=\"font-weight: 400;\">Stores create data sources. A store is basically an ES6 class.\u00a0 \u00a0the state is automatically derived from a data source by MobX by using ES6 decorators.<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The store can expose the\u00a0<\/span><span style=\"font-weight: 400;\">observable<\/span><span style=\"font-weight: 400;\"> field(s), to which an <\/span><span style=\"font-weight: 400;\">observer<\/span><span style=\"font-weight: 400;\"> can react.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The store can additionally expose some derived <\/span><span style=\"font-weight: 400;\">observable<\/span><span style=\"font-weight: 400;\"> fields too. Which are pure functions on <\/span><span style=\"font-weight: 400;\">observable<\/span><span style=\"font-weight: 400;\"> fields? MobX calls them as <\/span><span style=\"font-weight: 400;\">computed<\/span><span style=\"font-weight: 400;\"> fields.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The store can also change the values of <\/span><span style=\"font-weight: 400;\">observable<\/span><span style=\"font-weight: 400;\"> fields via <\/span><span style=\"font-weight: 400;\">actions<\/span><span style=\"font-weight: 400;\">. Only in this way MobX can allow you to change state.<\/span><\/li>\n<\/ol>\n<p><strong>MobX has some core concepts:<\/strong><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Observables<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Computed Values<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Reactions<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Actions<\/span><\/li>\n<\/ul>\n<h3><strong>Observables:<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Observables extend functionality to subscribe to their changes.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We can list down our class properties with @observable decorator &amp; using observers, check their values.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">These observers will be updated accordingly every time the values will change.<\/span><\/p>\n<h3><strong>Computed values:<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Computed values are derived from observables. These values will be automatically updated when the observables will change.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It should be kept in mind that, \u2018computed\u2019 has to be observed in order to be updated<\/span><\/p>\n<h3><strong>Reactions:<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Reactions are identical to computed values, but they are used to produce side-effects instead of returning new value (patching DOM, making network requests, etc.).<\/span><\/p>\n<p><span style=\"font-weight: 400;\">MobX provides 3 reaction functions <\/span><span style=\"font-weight: 400;\">when<\/span><span style=\"font-weight: 400;\">\u00a0<\/span><a href=\"https:\/\/mobx.js.org\/refguide\/autorun.html\"><span style=\"font-weight: 400;\">autorun<\/span><\/a><span style=\"font-weight: 400;\"> and <\/span><span style=\"font-weight: 400;\">reaction<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><strong>When\u00a0<\/strong><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">when it takes two functions: predicate and effect. It executes and checks predicate until it returns <\/span><span style=\"font-weight: 400;\">true<\/span><span style=\"font-weight: 400;\">, and then executes the <\/span><span style=\"font-weight: 400;\">effect<\/span><span style=\"font-weight: 400;\"> function. After that, it disposes and stops reacting checked property.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><strong>Autorun\u00a0<\/strong><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">autorun is used in specific cases where you want a reactive function that will get fired every time the checked value is updated. Unlike <\/span><span style=\"font-weight: 400;\">computed<\/span><span style=\"font-weight: 400;\"> it doesn\u2019t have to be checked itself.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><strong>Reaction\u00a0<\/strong><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">the reaction is like autorun but gives you more control over what properties to check. It takes two functions, namely data-function and side-effect-function. data-function is observed and returns data that is used in side-effect-function.<\/span><\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone wp-image-5707\" src=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/12\/MObx-300x167.png\" alt=\"\" width=\"573\" height=\"319\" srcset=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/12\/MObx-300x167.png 300w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/12\/MObx-768x427.png 768w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/12\/MObx-1024x569.png 1024w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/12\/MObx-624x347.png 624w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/12\/MObx.png 1141w\" sizes=\"(max-width: 573px) 100vw, 573px\" \/><\/p>\n<p><i><span style=\"font-weight: 400;\">Fig. 1.1: The MobX lifecycle<\/span><\/i><\/p>\n<h3><strong>Actions:<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Actions are responsible for altering the state.we can use them to explicitly mark that function with <\/span><span style=\"font-weight: 400;\">@action<\/span><span style=\"font-weight: 400;\"> decorator.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This decorator takes a function and wraps it into a\u00a0<\/span><span style=\"font-weight: 400;\">transaction<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">untracked<\/span><span style=\"font-weight: 400;\"> and allows state changes<\/span><span style=\"font-weight: 400;\">.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><strong>Transaction\u00a0<\/strong><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">the transaction is used to batch together updates in the state so until &amp; unless that function is completed, no observers will be notified. So we can update various properties at once.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><strong>Untracked\u00a0<\/strong><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">With the help of untracked, we can run code without establishing observers (just like reactions, or unlike computed\u2019s)<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><strong>Allow State Changes\u00a0<\/strong><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">allow state changes is used to allow or reject state changes for certain functions. By default allows an\u00a0<\/span><span style=\"font-weight: 400;\">action<\/span><span style=\"font-weight: 400;\"> to make changes (and disallows for <\/span><span style=\"font-weight: 400;\">computed<\/span><span style=\"font-weight: 400;\"> and <\/span><span style=\"font-weight: 400;\">observer<\/span><span style=\"font-weight: 400;\">).<\/span><\/p>\n<h2><strong>Observers:<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">Honestly,\u00a0 <\/span><span style=\"font-weight: 400;\">observers<\/span><span style=\"font-weight: 400;\"> aren\u2019t part of MobX core. They are provided by the <\/span><span style=\"font-weight: 400;\">mobx-react<\/span><span style=\"font-weight: 400;\"> package. They are used to enable views to \u201cobserve\u201d <\/span><span style=\"font-weight: 400;\">observables<\/span><span style=\"font-weight: 400;\"> and re-render on change.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s explore a simple ValueStore. It provides an observable field named count value and actions <\/span><span style=\"font-weight: 400;\">increase_value<\/span><span style=\"font-weight: 400;\"> and <\/span><span style=\"font-weight: 400;\">decrease_value<\/span><span style=\"font-weight: 400;\"> to change the value.<\/span><\/p>\n<pre class=\"lang:js decode:true\">\/\/ @ flow\r\n\r\nimport {observable,action} from \u201cmobx\u201d;\r\n\r\nclass ValueStore{\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0@observable countValue=0;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0@action increase_value()={\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.countValue+=1;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0@action decrease_value()={\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.countValue-=1;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\r\n}\r\n\r\nexport default ValueStore;<\/pre>\n<p><span style=\"font-weight: 400;\">Here is a look at a component that keeps track of count value and re-renders every time the count value gets changed.<\/span><\/p>\n<pre class=\"lang:js decode:true\">\/\/ RN imports\r\n\r\nimport { observer, inject } from \"mobx-react\";\r\n\r\n@inject(\"valueStore\")\r\n\r\n@observer\r\n\r\nclass Counter extends Component {\r\n\r\n\u00a0\u00a0render() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return &lt;Text&gt;Count:\u00a0 {this.props.valueStore.count}&lt;\/Text&gt;;\r\n\r\n\u00a0\u00a0}\r\n\r\n}<\/pre>\n<p><span style=\"font-weight: 400;\">By decorating class with <\/span><span style=\"font-weight: 400;\">@observer,<\/span><span style=\"font-weight: 400;\"> MobX can infer reactions to the changes in store &amp; automatically subscribe to them and re-render component on getting changes.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0<\/span><span style=\"font-weight: 400;\">@inject<\/span><span style=\"font-weight: 400;\"> is a MobX decorator that will provide component props with the mentioned store.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">MobX provides a React Provider that can be made as a parent component for all the components of your application. A MobX provider should be initialized with all the stores that you may want to be injected into your components.<\/span><\/p>\n<pre class=\"lang:js decode:true\">import { Provider } from \"mobx-react\";\r\n\r\nclass App extends Component {\r\n\r\n\u00a0\u00a0render() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0return (\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Provider {counterStore: new ValueStore(), userStore:\u00a0 \u00a0 \u00a0 new UserStore()}&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Home \/&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/Provider&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0);\r\n\r\n\u00a0}\r\n\r\n}\r\n\r\nexport default App;<\/pre>\n<p><span style=\"font-weight: 400;\"><br \/>\nNow, all children of the Home component can be injected with value stores and user stores.<\/span><\/p>\n<p>InnovationM is a globally renowned\u00a0Android app development company in Delhi NCR that caters to a strong &amp; secure Android app development, iOS app development, hybrid app development services. Our commitment &amp; engagement towards our target gives us brighter in the world of technology and has led us to establish success stories consecutively which makes us the best\u00a0iPhone app development company in Delhi NCR.<\/p>\n<p>Thanks for giving your valuable time. Keep reading and keep learning<\/p>\n","protected":false},"excerpt":{"rendered":"<p>MobX is the new upcoming state management solution. This blog is all about how to create a simple React-Native app using MobX. MobX is fast in speed than Redux, its easier to learn &amp; requires less boilerplate code. Here are some of its main concepts Stores: Stores create data sources. A store is basically an [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5708,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[360,257],"tags":[422,423,346,421,427,424,425,247,426,314],"class_list":["post-5704","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-react","tag-how-to-use-mobx-in-react","tag-how-to-use-mobx-with-react-hooks","tag-javascript","tag-js","tag-mobx-in-react","tag-mobx-react","tag-mobx-react-native","tag-react","tag-react-native-mobx","tag-reactjs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>MobX in React - InnovationM - Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.innovationm.com\/blog\/mobx-in-react\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"MobX in React - InnovationM - Blog\" \/>\n<meta property=\"og:description\" content=\"MobX is the new upcoming state management solution. This blog is all about how to create a simple React-Native app using MobX. MobX is fast in speed than Redux, its easier to learn &amp; requires less boilerplate code. Here are some of its main concepts Stores: Stores create data sources. A store is basically an [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.innovationm.com\/blog\/mobx-in-react\/\" \/>\n<meta property=\"og:site_name\" content=\"InnovationM - Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-12-12T10:39:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-28T11:12:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/12\/Mobx-in-react.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1141\" \/>\n\t<meta property=\"og:image:height\" content=\"634\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"InnovationM Admin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InnovationM Admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/mobx-in-react\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/mobx-in-react\\\/\"},\"author\":{\"name\":\"InnovationM Admin\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"headline\":\"MobX in React\",\"datePublished\":\"2019-12-12T10:39:41+00:00\",\"dateModified\":\"2026-05-28T11:12:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/mobx-in-react\\\/\"},\"wordCount\":724,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/mobx-in-react\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/Mobx-in-react.png\",\"keywords\":[\"how to use mobx in react\",\"how to use mobx with react hooks\",\"JavaScript\",\"JS\",\"mobx in react\",\"mobx react\",\"mobx react native\",\"react\",\"react native mobx\",\"Reactjs\"],\"articleSection\":[\"JavaScript\",\"React\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/mobx-in-react\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/mobx-in-react\\\/\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/mobx-in-react\\\/\",\"name\":\"MobX in React - InnovationM - Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/mobx-in-react\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/mobx-in-react\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/Mobx-in-react.png\",\"datePublished\":\"2019-12-12T10:39:41+00:00\",\"dateModified\":\"2026-05-28T11:12:07+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/mobx-in-react\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/mobx-in-react\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/mobx-in-react\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/Mobx-in-react.png\",\"contentUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/Mobx-in-react.png\",\"width\":1141,\"height\":634},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/mobx-in-react\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"MobX in React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\",\"name\":\"AI, Software Development & Digital Engineering Insights Blog | InnovationM\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\",\"name\":\"InnovationM Admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"caption\":\"InnovationM Admin\"},\"sameAs\":[\"https:\\\/\\\/www.innovationm.com\\\/\"],\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/author\\\/innovationmadmin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"MobX in React - InnovationM - Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.innovationm.com\/blog\/mobx-in-react\/","og_locale":"en_US","og_type":"article","og_title":"MobX in React - InnovationM - Blog","og_description":"MobX is the new upcoming state management solution. This blog is all about how to create a simple React-Native app using MobX. MobX is fast in speed than Redux, its easier to learn &amp; requires less boilerplate code. Here are some of its main concepts Stores: Stores create data sources. A store is basically an [&hellip;]","og_url":"https:\/\/www.innovationm.com\/blog\/mobx-in-react\/","og_site_name":"InnovationM - Blog","article_published_time":"2019-12-12T10:39:41+00:00","article_modified_time":"2026-05-28T11:12:07+00:00","og_image":[{"width":1141,"height":634,"url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/12\/Mobx-in-react.png","type":"image\/png"}],"author":"InnovationM Admin","twitter_misc":{"Written by":"InnovationM Admin","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.innovationm.com\/blog\/mobx-in-react\/#article","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/mobx-in-react\/"},"author":{"name":"InnovationM Admin","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"headline":"MobX in React","datePublished":"2019-12-12T10:39:41+00:00","dateModified":"2026-05-28T11:12:07+00:00","mainEntityOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/mobx-in-react\/"},"wordCount":724,"commentCount":0,"image":{"@id":"https:\/\/www.innovationm.com\/blog\/mobx-in-react\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/12\/Mobx-in-react.png","keywords":["how to use mobx in react","how to use mobx with react hooks","JavaScript","JS","mobx in react","mobx react","mobx react native","react","react native mobx","Reactjs"],"articleSection":["JavaScript","React"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.innovationm.com\/blog\/mobx-in-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.innovationm.com\/blog\/mobx-in-react\/","url":"https:\/\/www.innovationm.com\/blog\/mobx-in-react\/","name":"MobX in React - InnovationM - Blog","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/mobx-in-react\/#primaryimage"},"image":{"@id":"https:\/\/www.innovationm.com\/blog\/mobx-in-react\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/12\/Mobx-in-react.png","datePublished":"2019-12-12T10:39:41+00:00","dateModified":"2026-05-28T11:12:07+00:00","author":{"@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"breadcrumb":{"@id":"https:\/\/www.innovationm.com\/blog\/mobx-in-react\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.innovationm.com\/blog\/mobx-in-react\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.innovationm.com\/blog\/mobx-in-react\/#primaryimage","url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/12\/Mobx-in-react.png","contentUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/12\/Mobx-in-react.png","width":1141,"height":634},{"@type":"BreadcrumbList","@id":"https:\/\/www.innovationm.com\/blog\/mobx-in-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.innovationm.com\/blog\/"},{"@type":"ListItem","position":2,"name":"MobX in React"}]},{"@type":"WebSite","@id":"https:\/\/www.innovationm.com\/blog\/#website","url":"https:\/\/www.innovationm.com\/blog\/","name":"AI, Software Development & Digital Engineering Insights Blog | InnovationM","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.innovationm.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed","name":"InnovationM Admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","caption":"InnovationM Admin"},"sameAs":["https:\/\/www.innovationm.com\/"],"url":"https:\/\/www.innovationm.com\/blog\/author\/innovationmadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/5704","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/comments?post=5704"}],"version-history":[{"count":4,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/5704\/revisions"}],"predecessor-version":[{"id":9603,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/5704\/revisions\/9603"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media\/5708"}],"wp:attachment":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media?parent=5704"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/categories?post=5704"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/tags?post=5704"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}