From bf4afc582817d1466cb250aadc00e55704fb46f7 Mon Sep 17 00:00:00 2001 From: evan Date: Wed, 6 May 2026 09:32:58 -0400 Subject: [PATCH] chore(docs): Migration guide: Update makeObservable section with decorators support (#4588) Update outdated claim in `makeObservable` section: it's no longer true that MobX 6 does not support decorators. --- docs/migrating-from-4-or-5.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/docs/migrating-from-4-or-5.md b/docs/migrating-from-4-or-5.md index f7bf7a4d7..1675248c2 100644 --- a/docs/migrating-from-4-or-5.md +++ b/docs/migrating-from-4-or-5.md @@ -24,12 +24,14 @@ _⚠️ **Warning**: Depending on factors like the size and complexity of your c - (Optional) In MobX 6 decorators have become opt-in. If you no longer wish to use decorators, remove `plugin-proposal-decorators` from your babel configuration and dependencies. Check out the [Enabling decorators {🚀}](enabling-decorators.md) section for more details. 5. For TypeScript users: - Add the flag `"useDefineForClassFields": true` to your compiler config. - - (Optional) In MobX 6 decorators have become opt-in. If you no longer wish to use decorators, remove / disable the `experimentalDecorators` configuration from your TypeScript config. Check out the [Enabling decorators {🚀}](enabling-decorators.md) section for more details. + - (Optional) In MobX 6 decorators have become opt-in. If you no longer wish to use legacy decorators, remove / disable the `experimentalDecorators` configuration from your TypeScript config. Check out the [Enabling decorators {🚀}](enabling-decorators.md) section for more details. 6. The MobX default configuration has become more strict. We recommend to adopt the new defaults after completing the upgrade, check out the [Configuration {🚀}](configuration.md) section. During migration, we recommend to configure MobX in the same way as it would be in v4/v5 out of the box: `import {configure} from "mobx"; configure({ enforceActions: "never" });`. After finishing the entire migration process and validating that your project works as expected, consider enabling the flags `computedRequiresReaction`, `reactionRequiresObservable` and `observableRequiresReaction` and `enforceActions: "observed"` to write more idiomatic MobX code. -## Upgrading classes to use `makeObservable` +## Upgrading classes to use `makeObservable` or Stage 3 decorators -Due to standardized JavaScript limitations in how class fields are constructed, it is no longer possible for MobX to alter the behavior of class fields by means of decorators or the `decorate` utility. Instead, fields have to be made observable by the `constructor`. This can be done in three different ways: +The implementation of decorators has changed between MobX 4/5 and version 6.11. Decorators now use the Stage 3 proposal, which comes with slight differences. Check out the [Enabling decorators {🚀}](enabling-decorators.md) section for more details. + +Or, fields can be made observable by the use of `makeObservable` in the `constructor`. This can be done in three different ways: 1. Remove all decorators and call `makeObservable` in the `constructor` and explicitly define which field should be made observable using which decorator. For example: `makeObservable(this, { count: observable, tick: action, elapsedTime: computed })` (note that the second argument corresponds to what would be passed to `decorate`). This is the recommended approach if you want to drop decorators in your code base, and the project isn't yet too big. 2. Leave all the decorators and call `makeObservable(this)` in the `constructor`. This will pick up the metadata generated by the decorators. This is the recommended way if you want to limit the impact of a MobX 6 migration.