MobX-utils is a companion library for MobX, offering a collection of common patterns and utility functions to simplify reactive state management in applications. It provides solutions for handling asynchronous operations, view models, observable resources, and more, building directly on top of the core MobX library. The current stable version is 6.1.1 and it actively tracks the major versions of MobX, currently requiring `mobx@^6.0.0` as a peer dependency. Key differentiators include its `fromPromise` utility for observable promise states, `createViewModel` for easily creating editable views of data, and `lazyObservable` for demand-driven data fetching. Its release cadence is tied to MobX's evolution, with updates typically addressing compatibility or introducing new patterns.
npm install mobx-utilsVerified import paths — ran on the pinned version, not inferred.
Demonstrates `fromPromise` to create an observable wrapper around an asynchronous operation, tracking its pending, fulfilled, and rejected states, and consuming the result reactively.
Ensure your project is using `mobx@^6.0.0` or later. Update your MobX setup to use `makeObservable` or `makeAutoObservable` instead of legacy decorators.
Configure your build system (Webpack, Rollup, Babel) to correctly handle ES Modules. For Node.js projects, ensure `"type": "module"` is set in `package.json` or use `.mjs` file extensions, and utilize `import` statements.
Always use the `.state` property (e.g., `myPromise.state === 'rejected'`) or the `.case()` method for robust handling of different promise outcomes, rather than relying solely on the `.value`.
Ensure the object passed to `createViewModel` is itself observable, and that changes to the data are made by modifying its observable properties directly, rather than reassigning the entire object reference.
For precise timing or performance-critical animations, consider implementing a custom observable timer or leveraging browser-native APIs like `requestAnimationFrame` with MobX's `reaction` or `autorun` for more granular control.
Ensure `fromPromise` is always initialized with a valid `Promise` instance or a placeholder `Promise.resolve(null)`. Check for `null` or `undefined` on the `fromPromise` instance before attempting to access its properties if it's conditionally rendered or initialized.
For MobX-utils v6+, ensure you are using ES Module `import { fromPromise } from 'mobx-utils'` syntax. Verify that your `package.json` has `"type": "module"` or that your build pipeline correctly transpiles and resolves ESM imports.Ensure the object passed to `createViewModel` is a MobX observable. For class instances, call `makeObservable(this)` in the constructor. For plain objects, wrap them with `observable({})` before passing to `createViewModel`.