{"id":21168,"date":"2018-03-16T12:15:31","date_gmt":"2018-03-16T10:15:31","guid":{"rendered":"https:\/\/www.webcodegeeks.com\/?p=21168"},"modified":"2018-03-14T12:13:57","modified_gmt":"2018-03-14T10:13:57","slug":"javascript-upgrading-from-mobx-2-6-0-to-2-7-0","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-upgrading-from-mobx-2-6-0-to-2-7-0\/","title":{"rendered":"JavaScript: Upgrading from MobX 2.6.0 to 2.7.0"},"content":{"rendered":"

As usual, you should check out the\u00a0CHANGELOG<\/a>. However, let me point out a few things specifically:<\/p>\n

If you have something like:<\/p>\n

observable({\r\n    @computed get someProp() { ... }\r\n});<\/pre>\n
your code will work in 2.6.0, but in 2.7.0 reactions won’t occur properly. Your tests will end up timing out. It needs to be:<\/p>\n
observable({\r\n    get someProp() { ... }\r\n});<\/pre>\n
Note, there’s no deprecation warning or anything. Also note that this doesn’t apply to situations where you’re using a class. Those will continue working as before.<\/p>\n
As of 2.6.2, toJS no longer recurses once it hits something that isn’t observable. Hence, if you have an observable object with a non-observable array with observable objects in it, MobX will only convert the outer object “to JS”. You’ll need to call toJS again for the things inside the non-observable array. This can cause painful to debug errors.<\/p>\n
This change was announced for 2.6.0, but it actually happened in 2.6.2 which means that upgrading from 2.6.0 to 2.6.2 isn’t actually as safe as it might appear.<\/p>\n
You should also pay careful attention to the section “Automatic inference of computed properties has been deprecated.” However, that’s at least well-documented and results in deprecation warnings. There were a bunch of places where I had code that was passing in a callback. The callback took one parameter. However, in my tests, the callbacks were fake. Hence, they didn’t need that parameter. Our ESLint rules say that you should leave out the parameter in that case since it’s unused. However, once I left out the parameter, MobX kept trying to change the function into a cached, computed getter. The solution was to leave the parameter in place and write the following above each such instance:<\/p>\n
\/\/ See: https:\/\/github.com\/mobxjs\/mobx\/issues\/421\r\n\/\/ eslint-disable-next-line no-unused-vars<\/pre>\n
I also added asReference to a few such places when it made sense.<\/p>\n
\n\n\n\n
Published on Web Code Geeks with permission by Shannon Behrens, partner at our WCG program<\/a>. See the original article here: JavaScript: Upgrading from MobX 2.6.0 to 2.7.0<\/a><\/p>\n
Opinions expressed by Web Code Geeks contributors are their own.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
As usual, you should check out the\u00a0CHANGELOG. However, let me point out a few things specifically: If you have something like: observable({ @computed get someProp() { … } }); your code will work in 2.6.0, but in 2.7.0 reactions won’t occur properly. Your tests will end up timing out. It needs to be: observable({ get …<\/p>\n","protected":false},"author":2215,"featured_media":920,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[521],"class_list":["post-21168","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-mobx"],"yoast_head":"\nJavaScript: Upgrading from MobX 2.6.0 to 2.7.0 - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"As usual, you should check out the\u00a0CHANGELOG. However, let me point out a few things specifically: If you have something like: observable({ @computed get\" \/>\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.webcodegeeks.com\/javascript\/javascript-upgrading-from-mobx-2-6-0-to-2-7-0\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript: Upgrading from MobX 2.6.0 to 2.7.0 - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"As usual, you should check out the\u00a0CHANGELOG. However, let me point out a few things specifically: If you have something like: observable({ @computed get\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-upgrading-from-mobx-2-6-0-to-2-7-0\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/jjinux\" \/>\n<meta property=\"article:published_time\" content=\"2018-03-16T10:15:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Shannon Behrens\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@jjinux\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Shannon Behrens\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-upgrading-from-mobx-2-6-0-to-2-7-0\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-upgrading-from-mobx-2-6-0-to-2-7-0\/\"},\"author\":{\"name\":\"Shannon Behrens\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/e2d57d23e4b3598f8790df92623ca3d9\"},\"headline\":\"JavaScript: Upgrading from MobX 2.6.0 to 2.7.0\",\"datePublished\":\"2018-03-16T10:15:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-upgrading-from-mobx-2-6-0-to-2-7-0\/\"},\"wordCount\":330,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-upgrading-from-mobx-2-6-0-to-2-7-0\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"keywords\":[\"MobX\"],\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-upgrading-from-mobx-2-6-0-to-2-7-0\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-upgrading-from-mobx-2-6-0-to-2-7-0\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-upgrading-from-mobx-2-6-0-to-2-7-0\/\",\"name\":\"JavaScript: Upgrading from MobX 2.6.0 to 2.7.0 - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-upgrading-from-mobx-2-6-0-to-2-7-0\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-upgrading-from-mobx-2-6-0-to-2-7-0\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"datePublished\":\"2018-03-16T10:15:31+00:00\",\"description\":\"As usual, you should check out the\u00a0CHANGELOG. However, let me point out a few things specifically: If you have something like: observable({ @computed get\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-upgrading-from-mobx-2-6-0-to-2-7-0\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-upgrading-from-mobx-2-6-0-to-2-7-0\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-upgrading-from-mobx-2-6-0-to-2-7-0\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-upgrading-from-mobx-2-6-0-to-2-7-0\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"JavaScript: Upgrading from MobX 2.6.0 to 2.7.0\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/e2d57d23e4b3598f8790df92623ca3d9\",\"name\":\"Shannon Behrens\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/974735b0dd2b28e9ba02f5ebac09a19bfbca0375a57830af4430ed53927019e4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/974735b0dd2b28e9ba02f5ebac09a19bfbca0375a57830af4430ed53927019e4?s=96&d=mm&r=g\",\"caption\":\"Shannon Behrens\"},\"description\":\"Catholic, father of eight, open source enthusiast, Python, JavaScript, Ruby, Scala, Go, etc. programmer.\",\"sameAs\":[\"http:\/\/www.jjinux.com\",\"https:\/\/www.facebook.com\/jjinux\",\"www.linkedin.com\/in\/jjinux\",\"https:\/\/x.com\/jjinux\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/shannon-behrens\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript: Upgrading from MobX 2.6.0 to 2.7.0 - Web Code Geeks - 2026","description":"As usual, you should check out the\u00a0CHANGELOG. However, let me point out a few things specifically: If you have something like: observable({ @computed get","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.webcodegeeks.com\/javascript\/javascript-upgrading-from-mobx-2-6-0-to-2-7-0\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript: Upgrading from MobX 2.6.0 to 2.7.0 - Web Code Geeks - 2026","og_description":"As usual, you should check out the\u00a0CHANGELOG. However, let me point out a few things specifically: If you have something like: observable({ @computed get","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-upgrading-from-mobx-2-6-0-to-2-7-0\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/jjinux","article_published_time":"2018-03-16T10:15:31+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","type":"image\/jpeg"}],"author":"Shannon Behrens","twitter_card":"summary_large_image","twitter_creator":"@jjinux","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Shannon Behrens","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-upgrading-from-mobx-2-6-0-to-2-7-0\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-upgrading-from-mobx-2-6-0-to-2-7-0\/"},"author":{"name":"Shannon Behrens","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/e2d57d23e4b3598f8790df92623ca3d9"},"headline":"JavaScript: Upgrading from MobX 2.6.0 to 2.7.0","datePublished":"2018-03-16T10:15:31+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-upgrading-from-mobx-2-6-0-to-2-7-0\/"},"wordCount":330,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-upgrading-from-mobx-2-6-0-to-2-7-0\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","keywords":["MobX"],"articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/javascript-upgrading-from-mobx-2-6-0-to-2-7-0\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-upgrading-from-mobx-2-6-0-to-2-7-0\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-upgrading-from-mobx-2-6-0-to-2-7-0\/","name":"JavaScript: Upgrading from MobX 2.6.0 to 2.7.0 - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-upgrading-from-mobx-2-6-0-to-2-7-0\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-upgrading-from-mobx-2-6-0-to-2-7-0\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","datePublished":"2018-03-16T10:15:31+00:00","description":"As usual, you should check out the\u00a0CHANGELOG. However, let me point out a few things specifically: If you have something like: observable({ @computed get","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-upgrading-from-mobx-2-6-0-to-2-7-0\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/javascript-upgrading-from-mobx-2-6-0-to-2-7-0\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-upgrading-from-mobx-2-6-0-to-2-7-0\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-upgrading-from-mobx-2-6-0-to-2-7-0\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"JavaScript: Upgrading from MobX 2.6.0 to 2.7.0"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/e2d57d23e4b3598f8790df92623ca3d9","name":"Shannon Behrens","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/974735b0dd2b28e9ba02f5ebac09a19bfbca0375a57830af4430ed53927019e4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/974735b0dd2b28e9ba02f5ebac09a19bfbca0375a57830af4430ed53927019e4?s=96&d=mm&r=g","caption":"Shannon Behrens"},"description":"Catholic, father of eight, open source enthusiast, Python, JavaScript, Ruby, Scala, Go, etc. programmer.","sameAs":["http:\/\/www.jjinux.com","https:\/\/www.facebook.com\/jjinux","www.linkedin.com\/in\/jjinux","https:\/\/x.com\/jjinux"],"url":"https:\/\/www.webcodegeeks.com\/author\/shannon-behrens\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/21168","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/2215"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=21168"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/21168\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/920"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=21168"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=21168"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=21168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}