` inside the render of class components.\n\n## Compatibility table (major versions)\n\n| mobx | mobx-react-lite | Browser |\n| ---- | --------------- | ---------------------------------------------- |\n| 7 | 5 | Modern browsers with native Proxy support |\n| 6 | 3 | Modern browsers (IE 11+ in compatibility mode) |\n| 5 | 2 | Modern browsers |\n| 4 | 2 | IE 11+, RN w/o Proxy support |\n\n`mobx-react-lite` version 5 requires React 18 or higher.\n\n## User Guide 👉 https://mobx.js.org/react-integration.html\n\n---\n\n## API reference ⚒\n\n### **`observer(baseComponent: FunctionComponent
): FunctionComponent
`**\n\nThe observer converts a component into a reactive component, which tracks which observables are used automatically and re-renders the component when one of these values changes.\nCan only be used for function components. For class component support see the `mobx-react` package.\n\n### **`{renderFn}`**\n\nIs a React component, which applies observer to an anonymous region in your component. `` can be used both inside class and function components.\n\n### **`useLocalObservable(initializer: () => T, annotations?: AnnotationsMap): T`**\n\nCreates an observable object with the given properties, methods and computed values.\n\nNote that computed values cannot directly depend on non-observable values, but only on observable values, so it might be needed to sync properties into the observable using `useEffect`.\n\n`useLocalObservable` is a short-hand for:\n\n`const [state] = useState(() => observable(initializer(), annotations, { autoBind: true }))`\n\n### **`enableStaticRendering(enable: true)`**\n\nCall `enableStaticRendering(true)` when running in an SSR environment, in which `observer` wrapped components should never re-render, but cleanup after the first rendering automatically. Use `isUsingStaticRendering()` to inspect the current setting.\n\n---\n\n## Removed APIs in version 5\n\n`useObserver`, `useLocalStore`, `useAsObservableSource`, `useStaticRendering`, batching imports, `observerBatching`, and `isObserverBatched` have been removed. Use `observer`, ``, `useLocalObservable`, and `enableStaticRendering`; React 18 renderers handle batching.\n\n## Testing\n\nRunning the full test suite now requires node 14+\nBut the library itself does not have this limitation\n\nTo avoid memory leaks from abandoned or suspended renders, this library uses timers\nto dispose reactions that never subscribe. When\n[FinalizationRegistry](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/FinalizationRegistry)\nis available, it can dispose these reactions earlier. Timers remain active for pending\nreactions because native finalization cannot clean up targets that are still reachable.\n\nThis can cause issues with test frameworks such as Jest\nwhich require that timers be cleaned up before the tests\ncan exit.\n\n### **`clearTimers()`**\n\nCall `clearTimers()` in the `afterEach` of your tests to ensure\nthat `mobx-react-lite` cleans up immediately and allows tests\nto exit.\n","packages/mobx-react/README.md":"# mobx-react\n\n[](https://circleci.com/gh/mobxjs/mobx-react)\n[](https://cdnjs.com/libraries/mobx-react)\n[](https://bundlephobia.com/result?p=mobx-react)\n[](https://github.com/mobxjs/mobx/discussions)\n[](https://changelogs.xyz/mobx-react)\n\nPackage with React component wrapper for combining React with MobX.\nExports the `observer` decorator and other utilities.\nFor documentation, see the [MobX](https://mobx.js.org) project.\nThis package supports both React and React Native.\n\n## Compatibility matrix\n\nOnly the latest version is actively maintained. If you're missing a fix or a feature in older version, consider upgrading or using [patch-package](https://www.npmjs.com/package/patch-package)\n\n| NPM Version | Support MobX version | Supported React versions | Added support for: |\n| ----------- | -------------------- | ------------------------ | -------------------------------------------------------------------------------- |\n| v10 | 7.\\* | >=18 | MobX 7, Hooks, React 18 strict mode |\n| v9 | 6.\\* | >16.8 | Hooks, React 18.2 in strict mode |\n| v7 | 6.\\* | >16.8 < 18.2 | Hooks |\n| v6 | 4.\\* / 5.\\* | >16.8 <17 | Hooks |\n| v5 | 4.\\* / 5.\\* | >0.13 <17 | No, but it is possible to use `` sections inside hook based components |\n\n`mobx-react` is a wrapper around `mobx-react-lite` for applications that also need class component support:\n\n- Support for function components through `mobx-react-lite`\n- Support for class based components for `observer` and `@observer`\n\n## Installation\n\n`npm install mobx-react`\n\nOr CDN: https://unpkg.com/mobx-react (UMD namespace: `mobxReact`)\n\n```javascript\nimport { observer } from \"mobx-react\"\n```\n\nThis package provides the bindings for MobX and React.\nSee the [official documentation](https://mobx.js.org/react-integration.html) for how to get started.\n\nUse `React.createContext` to pass stores around.\n\n## API documentation\n\nPlease check [mobx.js.org](https://mobx.js.org/) for the general documentation. The documentation below highlights some specifics.\n\n### `observer(component)`\n\nFunction (and decorator) that converts a React component definition, React component class, or stand-alone render function, into a reactive component. A converted component will track which observables are used by its effective `render` and automatically re-render the component when one of these values changes.\n\n#### Functional Components\n\n`React.memo` is automatically applied to functional components provided to `observer`. `observer` does not accept a functional component already wrapped in `React.memo`, or an `observer`, in order to avoid consequences that might arise as a result of wrapping it twice.\n\n#### Class Components\n\n`shouldComponentUpdate` is not supported. As such, it is recommended that class components extend `React.PureComponent`. The `observer` will automatically patch non-pure class components with an internal implementation of `React.PureComponent` if necessary.\n\nExtending `observer` class components is not supported. Always apply `observer` only on the last class in the inheritance chain.\n\nSee the [MobX](https://mobx.js.org/react-integration.html#react-integration) documentation for more details.\n\n```javascript\nimport { observer } from \"mobx-react\"\n\n// ---- ES6 syntax ----\nconst TodoView = observer(\n class TodoView extends React.Component {\n render() {\n return {this.props.todo.title}
\n }\n }\n)\n\n// ---- ESNext syntax with decorator syntax enabled ----\n@observer\nclass TodoView extends React.Component {\n render() {\n return {this.props.todo.title}
\n }\n}\n\n// ---- or just use function components: ----\nconst TodoView = observer(({ todo }) => {todo.title}
)\n```\n\n##### Note on using props and state in derivations\n\n`mobx-react` version 6 and lower would automatically turn `this.state` and `this.props` into observables.\nThis has the benefit that computed properties and reactions were able to observe those.\nHowever, since this pattern is fundamentally incompatible with `StrictMode` in React 18.2 and higher, this behavior has been removed in React 18.\n\nAs a result, we recommend to no longer mark properties as `@computed` in observer components if they depend on `this.state` or `this.props`.\n\n```javascript\n@observer\nclass Doubler extends React.Component<{ counter: number }> {\n @computed // BROKEN! <-- @computed should be removed in mobx-react > 7\n get doubleValue() {\n // Changes to this.props will no longer be detected properly, to fix it,\n // remove the @computed annotation.\n return this.props * 2\n }\n\n render() {\n return {this.doubleValue}
\n }\n}\n```\n\nSimilarly, reactions will no longer respond to `this.state` / `this.props`. This can be overcome by creating an observable copy:\n\n```javascript\n@observer\nclass Alerter extends React.Component<{ counter: number }> {\n @observable observableCounter: number\n reactionDisposer\n\n constructor(props) {\n this.observableCounter = counter\n }\n\n componentDidMount() {\n // set up a reaction, by observing the observable,\n // rather than the prop which is non-reactive:\n this.reactionDisposer = autorun(() => {\n if (this.observableCounter > 10) {\n alert(\"Reached 10!\")\n }\n })\n }\n\n componentDidUpdate() {\n // sync the observable from props\n this.observableCounter = this.props.counter\n }\n\n componentWillUnmount() {\n this.reactionDisposer()\n }\n\n render() {\n return {this.props.counter}
\n }\n}\n```\n\nMobX-react will try to detect cases where `this.props`, `this.state` or `this.context` are used by any other derivation than the `render` method of the owning component and throw.\nThis is to make sure that neither computed properties, nor reactions, nor other components accidentally rely on those fields to be reactive.\n\nThis includes cases where a render callback is passed to a child, that will read from the props or state of a parent component.\nAs a result, passing a function that might later read a property of a parent in a reactive context will throw as well.\nInstead, when using a callback function that is being passed to an `observer` based child, the capture should be captured locally first:\n\n```javascript\n@observer\nclass ChildWrapper extends React.Component<{ counter: number }> {\n render() {\n // Collapsible is an observer component that should respond to this.counter,\n // if it is expanded\n\n // BAD:\n return {this.props.counter}
} />\n\n // GOOD: (causes to pass down a fresh callback whenever counter changes,\n // that doesn't depend on its parents props)\n const counter = this.props.counter\n return {counter}
} />\n }\n}\n```\n\n### `Observer`\n\n`Observer` is a React component, which applies `observer` to an anonymous region in your component.\nIt takes as children a single, argumentless function which should return exactly one React component.\nThe rendering in the function will be tracked and automatically re-rendered when needed.\nThis can come in handy when needing to pass render function to external components (for example the React Native listview), or if you\ndislike the `observer` decorator / function.\n\n```javascript\nclass App extends React.Component {\n render() {\n return (\n \n {this.props.person.name}\n
{() => {this.props.person.name}
}\n
\n {this.props.person.name}\n
{this.props.person.name}
} />\n \n {todo.title} {todo.done ? \"[DONE]\" : \"[OPEN]\"}\n
\n )}\n \n )\n}\n```\n\nWhen using `useLocalObservable`, all properties of the returned object will be made observable automatically, getters will be turned into computed properties, and methods will be bound to the store and apply mobx transactions automatically. If new class instances are returned from the initializer, they will be kept as is.\n\nIt is important to realize that the store is created only once! It is not possible to specify dependencies to force re-creation, _nor should you directly be referring to props for the initializer function_, as changes in those won't propagate.\n\nInstead, if your store needs to refer to props (or `useState` based local state), sync those values into the store with `useEffect`.\n\nNote that in many cases it is possible to extract the initializer function to a function outside the component definition. Which makes it possible to test the store itself in a more straight-forward manner, and avoids creating the initializer closure on each re-render.\n\n_Note: using `useLocalObservable` is mostly beneficial for really complex local state, or to obtain more uniform code base. Note that using a local store might conflict with future React features like concurrent rendering._\n\n### Server Side Rendering with `enableStaticRendering`\n\nWhen using server side rendering, normal lifecycle hooks of React components are not fired, as the components are rendered only once.\nSince components are never unmounted, `observer` components would in this case leak memory when being rendered server side.\nTo avoid leaking memory, call `enableStaticRendering(true)` when using server side rendering.\n\n```javascript\nimport { enableStaticRendering } from \"mobx-react\"\n\nenableStaticRendering(true)\n```\n\nThis makes sure the component won't try to react to any future data changes.\n\n### Which components should be marked with `observer`?\n\nThe simple rule of thumb is: _all components that render observable data_.\nIf you don't want to mark a component as observer, for example to reduce the dependencies of a generic component package, make sure you only pass it plain data.\n\n### Enabling decorators (optional)\n\nDecorators are currently a stage-2 ESNext feature. How to enable them is documented [here](https://mobx.js.org/enabling-decorators.html#enabling-decorators-).\n\n### Should I still use smart and dumb components?\n\nSee this [thread](https://www.reddit.com/r/reactjs/comments/4vnxg5/free_eggheadio_course_learn_mobx_react_in_30/d61oh0l).\nTL;DR: the conceptual distinction makes a lot of sense when using MobX as well, but use `observer` on all components.\n\n## DevTools\n\n`mobx-react@6` and higher are no longer compatible with the mobx-react-devtools.\nThat is, the MobX react devtools will no longer show render timings or dependency trees of the component.\nThe reason is that the standard React devtools are also capable of highlighting re-rendering components.\nAnd the dependency tree of a component can now be inspected by the standard devtools as well, as shown in the image below:\n\n\n\n## FAQ\n\n**Should I use `observer` for each component?**\n\nYou should use `observer` on every component that displays observable data.\nEven the small ones. `observer` allows components to render independently from their parent and in general this means that\nthe more you use `observer`, the better the performance become.\nThe overhead of `observer` itself is negligible.\nSee also [Do child components need `@observer`?](https://github.com/mobxjs/mobx/issues/101)\n\n**I see React warnings about `forceUpdate` / `setState` from React**\n\nThe following warning will appear if you trigger a re-rendering between instantiating and rendering a component:\n\n```\n\nWarning: forceUpdate(...): Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.`\n\n```\n\n-- or --\n\n```\n\nWarning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.\n\n```\n\nUsually this means that (another) component is trying to modify observables used by this components in their `constructor` or `getInitialState` methods.\nThis violates the React Lifecycle, `componentWillMount` should be used instead if state needs to be modified before mounting.\n","packages/mobx-undecorate/README.md":"# mobx-undecorate\n\nUpdate MobX 4/5 code to be conformant to MobX 6.\n\nTo run this codemod:\n\n- Go to your source files directory\n- Run `npx mobx-undecorate`\n\nThe following MobX 4/5 APIs will be converted to their MobX 6 equivalents:\n\n- `@computed`\n- `@action`\n- `@observable`\n- `@observer`\n- `@inject`\n- `decorate`\n\n### Options\n\nThe following flags are accepted:\n\n- `--ignoreImports`: normally the codemod will only convert decorators if they are imported from a MobX package, using import statements like `import {observable} from \"mobx\"`. This flag ignores checking for imports statements and converts all `@computed`, `@action`, `@observable`, `@observer` and `@inject` calls.\n- `--keepDecorators`: don't rewrite decorators but keep them as they are, and generate the required `makeObservable` calls. Use this option if you intend to keep using decorators after updating to MobX 6.\n- `--decoratorsAfterExport`: set this flag only if you have `decoratorsBeforeExport: false` in your Babel configuration, otherwise you will get an error like: `SyntaxError: Decorators must be placed *before* the 'export' keyword. You can set the 'decoratorsBeforeExport' option to false`.\n- `--parseTsAsNonJsx`: parse ts file as non-jsx, and other file as same as before. see more details -> [mobxjs/mobx#issues2754](https://github.com/mobxjs/mobx/issues/2754)\n",".cursorrules (react-mobx-cursorrules-prompt-file.mdc)":"---\ndescription: \"Cursor rules for React development with MobX integration.\"\nglobs: **/*\nalwaysApply: false\n---\n// React + MobX .cursorrules\n\n// Prefer functional components with hooks\n\nconst preferFunctionalComponents = true;\n\n// MobX best practices\n\nconst mobxBestPractices = [\n \"Use MobX-react-lite for optimal performance with functional components\",\n \"Implement stores for managing application state\",\n \"Utilize computed values for derived state\",\n \"Use actions for modifying observable state\",\n \"Implement proper error handling in asynchronous actions\",\n];\n\n// Folder structure\n\nconst folderStructure = `\nsrc/\n components/\n stores/\n hooks/\n pages/\n utils/\n`;\n\n// Additional instructions\n\nconst additionalInstructions = `\n1. Use TypeScript for type safety with MobX\n2. Implement strict mode for MobX for better debugging\n3. Use observer HOC or useObserver hook for reactive components\n4. Implement proper dependency injection for stores\n5. Use reaction for side-effects based on observable changes\n6. Utilize MobX DevTools for debugging\n7. Follow MobX best practices for scalable state management\n`;\n"},"files":{"docs/api.md":"---\ntitle: MobX API Reference\nsidebar_label: API\nhide_title: true\n---\n\n\n\n# MobX API Reference\n\nFunctions marked with {🚀} are considered advanced, and should typically not be needed.\nConsider downloading our handy cheat sheet that explains all important APIs on a single page:\n\n\n\n## Core APIs\n\n_These are the most important MobX APIs._\n\n> Understanding [`observable`](#observable), [`computed`](#computed), [`reaction`](#reaction) and [`action`](#action) is enough to master and use MobX in your applications!\n\n## Creating observables\n\n_Making things observable._\n\n### `makeObservable`\n\nUsage: `makeObservable(target, annotations, options?)`\n([further information](observable-state.md#makeobservable))\n\nProperties, entire objects, arrays, Maps and Sets can all be made observable.\n\n### `makeAutoObservable`\n\nUsage: `makeAutoObservable(target, overrides?, options?)`\n([further information](observable-state.md#makeautoobservable))\n\nAutomatically make properties, objects, arrays, Maps and Sets observable.\n\n### `extendObservable`\n\n{🚀} Usage: `extendObservable(target, properties, overrides?, options?)`\n\nCan be used to introduce new properties on the `target` object and make them observable immediately. Basically a shorthand for `Object.assign(target, properties); makeAutoObservable(target, overrides, options);`. However, existing properties on `target` won't be touched.\n\nOld-fashioned constructor functions can nicely leverage `extendObservable`:\n\n```javascript\nfunction Person(firstName, lastName) {\n extendObservable(this, { firstName, lastName })\n}\n\nconst person = new Person(\"Michel\", \"Weststrate\")\n```\n\nIt is possible to use `extendObservable` to add observable fields to an existing object after instantiation, but be careful that adding an observable property this way is in itself not a fact that can be observed.\n\n### `observable`\n\nUsage: `observable(source, overrides?, options?)`, `observable` _(annotation)_ or `@observable accessor` _(field decorator)_.\n([further information](observable-state.md#observable))\n\nClones an object and makes it observable. Source can be a plain object, array, Map or Set. By default, `observable` is applied recursively. If one of the encountered values is an object or array, that value will be passed through `observable` as well.\n\n### `observable.object`\n\n{🚀} Usage: `observable.object(source, overrides?, options?)`\n([further information](observable-state.md#observable))\n\nAlias for `observable(source, overrides?, options?)`. Creates a clone of the provided object and makes all of its properties observable.\n\n### `observable.array`\n\n{🚀} Usage: `observable.array(initialValues?, options?)`\n\nCreates a new observable array based on the provided `initialValues`.\nTo convert observable arrays back to plain arrays, use the `.slice()` method, or check out [toJS](#tojs) to convert them recursively.\nBesides all the language built-in array functions, the following goodies are available on observable arrays as well:\n\n- `clear()` removes all current entries from the array.\n- `replace(newItems)` replaces all existing entries in the array with new ones.\n- `remove(value)` removes a single item by value from the array and returns `true` if the item was found and removed.\n\nIf the values in the array should not be turned into observables automatically, use the `{ deep: false }` option to make the array shallowly observable.\n\n### `observable.map`\n\n{🚀} Usage: `observable.map(initialMap?, options?)`\n\nCreates a new observable [ES6 Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) based on the provided `initialMap`.\nThey are very useful if you don't want to react just to the change of a specific entry, but also to their addition and removal.\nCreating observable Maps is the recommended approach for creating dynamically keyed collections.\n\nBesides all the language built-in Map functions, the following goodies are available on observable Maps as well:\n\n- `toJSON()` returns a shallow plain object representation of this Map (use [toJS](#tojs) for a deep copy).\n- `merge(values)` copies all entries from the provided `values` (plain object, array of entries or a string-keyed ES6 Map) into this Map.\n- `replace(values)` replaces the entire contents of this Map with the provided `values`.\n\nIf the values in the Map should not be turned into observables automatically, use the `{ deep: false }` option to make the Map shallowly observable.\n\n### `observable.set`\n\n{🚀} Usage: `observable.set(initialSet?, options?)`\n\nCreates a new observable [ES6 Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) based on the provided `initialSet`. Use it whenever you want to create a dynamic set where the addition and removal of values needs to be observed, but where values can appear only once in the entire collection.\n\nIf the values in the Set should not be turned into observables automatically, use the `{ deep: false }` option to make the Set shallowly observable.\n\nUnlike Map keys, Set values are [not tracked individually](https://github.com/mobxjs/mobx/issues/2336#issuecomment-616128089).\n\n### `observable.ref`\n\nUsage: `observable.ref` _(annotation)_\n([further information](observable-state.md#available-annotations))\n\nLike the `observable` annotation, but only reassignments will be tracked. The assigned values themselves won't be made observable automatically. For example, use this if you intend to store immutable data in an observable field.\n\n### `observable.shallow`\n\nUsage: `observable.shallow` _(annotation)_\n([further information](observable-state.md#available-annotations))\n\nLike the `observable.ref` annotation, but for collections. Any collection assigned will be made observable, but the contents of the collection itself won't become observable.\n\n### `observable.struct`\n\n{🚀} Usage: `observable.struct` _(annotation)_\n([further information](observable-state.md#available-annotations))\n\nLike the `observable` annotation, except that any assigned value that is structurally equal to the current value will be ignored.\n\n### `observable.deep`\n\n{🚀} Usage: `observable.deep` _(annotation)_\n([further information](observable-state.md#available-annotations))\n\nAlias for the [`observable`](#observable) annotation.\n\n### `observable.box`\n\n{🚀} Usage: `observable.box(value, options?)`\n\nAll primitive values in JavaScript are immutable and hence per definition not observable.\nUsually that is fine, as MobX can just make the _property_ that contains the value observable.\nIn rare cases, it can be convenient to have an observable _primitive_ that is not owned by an object.\nFor such cases, it is possible to create an observable _box_ that manages such a _primitive_.\n\n`observable.box(value)` accepts any value and stores it inside a box. The current value can be accessed through `.get()` and updated using `.set(newValue)`.\n\n```javascript\nimport { observable, autorun } from \"mobx\"\n\nconst cityName = observable.box(\"Vienna\")\n\nautorun(() => {\n console.log(cityName.get())\n})\n// Prints: 'Vienna'\n\ncityName.set(\"Amsterdam\")\n// Prints: 'Amsterdam'\n```\n\nIf the values in the box should not be turned into observables automatically, use the `{ deep: false }` option to make the box shallowly observable.\n\n---\n\n## Actions\n\n_An action is any piece of code that modifies the state._\n\n### `action`\n\nUsage: `action(fn)`, `action` _(annotation)_ or `@action` _(method / field decorator)_\n([further information](actions.md))\n\nUse on functions that intend to modify the state.\n\n### `runInAction`\n\n{🚀} Usage: `runInAction(fn)`\n([further information](actions.md#runinaction))\n\nCreate a one-time action that is immediately invoked.\n\n### `flow`\n\nUsage: `flow(fn)`, `flow` _(annotation)_ or `@flow` _(generator method decorator)_\n([further information](actions.md#using-flow-instead-of-async--await-))\n\nMobX friendly replacement for `async` / `await` that supports cancellation.\n\n### `flowResult`\n\nUsage: `flowResult(flowFunctionResult)`\n([further information](actions.md#using-flow-instead-of-async--await-))\n\nFor TypeScript users only. Utility that casts the output of the generator to a promise.\nThis is just a type-wise correction for the promise wrapping done by `flow`. At runtime it directly returns the inputted value.\n\n---\n\n## Computeds\n\n_Computed values can be used to derive information from other observables._\n\n### `computed`\n\nUsage: `computed(fn, options?)`, `computed(options?)` _(annotation)_ or `@computed` _(getter decorator)_\n([further information](computeds.md))\n\nCreates an observable value that is derived from other observables, but won't be recomputed unless one of the underlying observables changes.\n\n---\n\n## React integration\n\n_From `mobx-react-lite` for function components, or `mobx-react` for class component support._\n\n### `observer`\n\nUsage: `observer(component)`\n([further information](react-integration.md))\n\nA higher order component you can use to make a functional or class based React component re-render when observables change.\n\n### `Observer`\n\nUsage: `{() => rendering}`\n([further information](react-integration.md#callback-components-might-require-observer))\n\nRenders the given render function, and automatically re-renders it once one of the observables used in the render function changes.\n\n### `useLocalObservable`\n\nUsage: `useLocalObservable(() => source, annotations?)`\n([further information](react-integration.md#using-local-observable-state-in-observer-components))\n\nCreates a new observable object using `makeObservable`, and keeps it around in the component for the entire life-cycle of the component.\n\n---\n\n## Reactions\n\n_The goal of reactions is to model side effects that happen automatically._\n\n### `autorun`\n\nUsage: `autorun(() => effect, options?)`\n([further information](reactions.md#autorun))\n\nReruns a function every time anything it observes changes.\n\n### `reaction`\n\nUsage: `reaction(() => data, data => effect, options?)`\n([further information](reactions.md#reaction))\n\nReruns a side effect when any selected data changes.\n\n### `when`\n\nUsage: `when(() => condition, () => effect, options?)` or `await when(() => condition, options?)`\n([further information](reactions.md#when))\n\nExecutes a side effect once when a observable condition becomes true.\n\n---\n\n## Utilities\n\n_Utilities that might make working with observable objects or computed values more convenient. Less trivial utilities can also be found in the [mobx-utils](https://github.com/mobxjs/mobx-utils) package._\n\n### `onReactionError`\n\n{🚀} Usage: `onReactionError(handler: (error: any, derivation) => void)`\n\nAttaches a global error listener, which is invoked for every error that is thrown from a _reaction_. This can be used for monitoring or test purposes.\n\n### `intercept`\n\n{🚀} Usage: `intercept(propertyName|array|object|Set|Map, listener)`\n([further information](intercept-and-observe.md#intercept))\n\nIntercepts changes before they are applied to an observable API. Returns a disposer function that stops the interception.\n\n### `observe`\n\n{🚀} Usage: `observe(propertyName|array|object|Set|Map, listener)`\n([further information](intercept-and-observe.md#observe))\n\nLow-level API that can be used to observe a single observable value. Returns a disposer function that stops the interception.\n\n### `onBecomeObserved`\n\n{🚀} Usage: `onBecomeObserved(observable, property?, listener: () => void)`\n([further information](lazy-observables.md))\n\nHook for when something becomes observed.\n\n### `onBecomeUnobserved`\n\n{🚀} Usage: `onBecomeUnobserved(observable, property?, listener: () => void)`\n([further information](lazy-observables.md))\n\nHook for when something stops being observed.\n\n### `toJS`\n\nUsage: `toJS(value)`\n([further information](observable-state.md#converting-observables-back-to-vanilla-javascript-collections))\n\nRecursively converts an observable object to a JavaScript _object_. Supports observable arrays, objects, Maps and primitives.\n\nIt does NOT recurse into non-observables, these are left as they are, even if they contain observables.\nComputed and other non-enumerable properties are completely ignored and won't be returned. `@observable accessor` fields are the exception: they are not enumerable, but they are returned.\n\nFor more complex (de)serialization scenarios, it is recommended to give classes a (computed) `toJSON` method, or use a serialization library like [serializr](https://github.com/mobxjs/serializr).\n\n```javascript\nconst obj = mobx.observable({\n x: 1\n})\n\nconst clone = mobx.toJS(obj)\n\nconsole.log(mobx.isObservableObject(obj)) // true\nconsole.log(mobx.isObservableObject(clone)) // false\n```\n\n---\n\n## Configuration\n\n_Fine-tuning your MobX instance._\n\n### `configure`\n\nUsage: sets global behavior settings on the active MobX instance.\n([further information](configuration.md))\nUse it to change how MobX behaves as a whole.\n\n---\n\n## Collection utilities {🚀}\n\n_They enable manipulating observable arrays, objects and Maps with the same generic API._\n\n### `values`\n\n{🚀} Usage: `values(array|object|Set|Map)`\n([further information](collection-utilities.md))\n\nReturns all values in the collection as an array.\n\n### `keys`\n\n{🚀} Usage: `keys(array|object|Set|Map)`\n([further information](collection-utilities.md))\n\nReturns all keys / indices in the collection as an array.\n\n### `entries`\n\n{🚀} Usage: `entries(array|object|Set|Map)`\n([further information](collection-utilities.md))\n\nReturns a `[key, value]` pair of every entry in the collection as an array.\n\n### `set`\n\n{🚀} Usage: `set(array|object|Map, key, value)`\n([further information](collection-utilities.md))\n\nUpdates the collection.\n\n### `remove`\n\n{🚀} Usage: `remove(array|object|Map, key)`\n([further information](collection-utilities.md))\n\nRemoves item from the collection.\n\n### `has`\n\n{🚀} Usage: `has(array|object|Map, key)`\n([further information](collection-utilities.md))\n\nChecks for membership in the collection.\n\n### `get`\n\n{🚀} Usage: `get(array|object|Map, key)`\n([further information](collection-utilities.md))\n\nGets value from the collection with key.\n\n---\n\n## Introspection utilities {🚀}\n\n_Utilities that might come in handy if you want to inspect the internal state of MobX, or want to build cool tools on top of MobX._\n\n### `isObservable`\n\n{🚀} Usage: `isObservable(array|object|Set|Map)`\n\nIs the object / collection made observable by MobX?\n\n### `isObservableProp`\n\n{🚀} Usage: `isObservableProp(object, propertyName)`\n\nIs the property observable?\n\n### `isObservableArray`\n\n{🚀} Usage: `isObservableArray(array)`\n\nIs the value an observable array?\n\n### `isObservableObject`\n\n{🚀} Usage: `isObservableObject(object)`\n\nIs the value an observable object?\n\n### `isObservableSet`\n\n{🚀} Usage: `isObservableSet(set)`\n\nIs the value an observable Set?\n\n### `isObservableMap`\n\n{🚀} Usage: `isObservableMap(map)`\n\nIs the value an observable Map?\n\n### `isBoxedObservable`\n\n{🚀} Usage: `isBoxedObservable(value)`\n\nIs the value an observable box, created using `observable.box`?\n\n### `isAction`\n\n{🚀} Usage: `isAction(func)`\n\nIs the function marked as an `action`?\n\n### `isComputed`\n\n{🚀} Usage: `isComputed(boxedComputed)`\n\nIs this a boxed computed value, created using `computed(() => expr)`?\n\n### `isComputedProp`\n\n{🚀} Usage: `isComputedProp(object, propertyName)`\n\nIs this a computed property?\n\n### `spy`\n\n{🚀} Usage: `spy(eventListener)`\n([further information](analyzing-reactivity.md#spy))\n\nRegisters a global spy listener that listens to all events that happen in MobX.\n\n### `getDebugName`\n\n{🚀} Usage: `getDebugName(reaction|array|Set|Map)` or `getDebugName(object|Map, propertyName)`\n([further information](analyzing-reactivity.md#getdebugname))\n\nReturns the (generated) friendly debug name for an observable or reaction.\n\n### `getDependencyTree`\n\n{🚀} Usage: `getDependencyTree(object, computedPropertyName)`\n([further information](analyzing-reactivity.md#getdependencytree))\n\nReturns a tree structure with all observables the given reaction / computation currently depends upon.\n\n### `getObserverTree`\n\n{🚀} Usage: `getObserverTree(array|Set|Map)` or `getObserverTree(object|Map, propertyName)`\n([further information](analyzing-reactivity.md#getobservertree))\n\nReturns a tree structure with all reactions / computations that are observing the given observable.\n\n---\n\n## Extending MobX {🚀}\n\n_In the rare case you want to extend MobX itself._\n\n### `createAtom`\n\n{🚀} Usage: `createAtom(name, onBecomeObserved?, onBecomeUnobserved?)`\n([further information](custom-observables.md))\n\nCreates your own observable data structure and hooks it up to MobX. Used internally by all observable data types. Atom exposes two _report_ methods to notify MobX with when:\n\n- `reportObserved()`: the atom has become observed, and should be considered part of the dependency tree of the current derivation.\n- `reportChanged()`: the atom has changed, and all derivations depending on it should be invalidated.\n\n### `getAtom`\n\n{🚀} Usage: `getAtom(thing, property?)`\n([further information](analyzing-reactivity.md#getatom))\n\nReturns the backing atom.\n\n### `transaction`\n\n{🚀} Usage: `transaction(worker: () => any)`\n\n_Transaction is a low-level API. It is recommended to use [`action`](#action) or [`runInAction`](#runinaction) instead._\n\nUsed to batch a bunch of updates without running any reactions until the end of the transaction. Like [`untracked`](#untracked), it is automatically applied by `action`, so usually it makes more sense to use actions than to use `transaction` directly.\n\nIt takes a single, parameterless `worker` function as an argument, and returns any value that was returned by it.\nNote that `transaction` runs completely synchronously and can be nested. Only after completing the outermost `transaction`, the pending reactions will be run.\n\n```javascript\nimport { observable, transaction, autorun } from \"mobx\"\n\nconst numbers = observable([])\n\nautorun(() => console.log(numbers.length, \"numbers!\"))\n// Prints: '0 numbers!'\n\ntransaction(() => {\n transaction(() => {\n numbers.push(1)\n numbers.push(2)\n })\n numbers.push(3)\n})\n// Prints: '3 numbers!'\n```\n\n### `untracked`\n\n{🚀} Usage: `untracked(worker: () => any)`\n\n_Untracked is a low-level API. It is recommended to use [`reaction`](#reaction), [`action`](#action) or [`runInAction`](#runinaction) instead._\n\nRuns a piece of code without establishing observers. Like `transaction`, `untracked` is automatically applied by `action`, so usually it makes more sense to use actions than to use `untracked` directly.\n\n```javascript\nconst person = observable({\n firstName: \"Michel\",\n lastName: \"Weststrate\"\n})\n\nautorun(() => {\n console.log(\n person.lastName,\n \",\",\n // This untracked block will return the person's\n // firstName without establishing a dependency.\n untracked(() => person.firstName)\n )\n})\n// Prints: 'Weststrate, Michel'\n\nperson.firstName = \"G.K.\"\n// Doesn't print!\n\nperson.lastName = \"Chesterton\"\n// Prints: 'Chesterton, G.K.'\n```\n","packages/eslint-plugin-mobx/README.md":"# eslint-plugin-mobx\n\nMobx specific linting rules for `eslint`.\n\n## Installation\n\n```\nnpm install --save-dev eslint @typescript-eslint/parser eslint-plugin-mobx\n```\n\n## Configuration\n\n### Legacy Config\n\n```javascript\n// .eslintrc.js\nmodule.exports = {\n parser: \"@typescript-eslint/parser\",\n // Include \"mobx\" in plugins array:\n plugins: [\"mobx\"],\n // Either extend our recommended configuration:\n extends: \"plugin:mobx/recommended\",\n // ...or specify and customize individual rules:\n rules: {\n // these values are the same as recommended\n \"mobx/exhaustive-make-observable\": \"warn\",\n \"mobx/unconditional-make-observable\": \"error\",\n \"mobx/missing-make-observable\": \"error\",\n \"mobx/missing-observer\": \"warn\"\n }\n}\n```\n\n### Flat Config\n\n```javascript\n// eslint.config.js\nimport pluginMobx from \"eslint-plugin-mobx\"\n\nexport default [\n // ...\n\n // Either extend our recommended configuration:\n pluginMobx.flatConfigs.recommended,\n\n // ...or specify and customize individual rules:\n {\n plugins: { mobx: pluginMobx },\n rules: {\n // these values are the same as recommended\n \"mobx/exhaustive-make-observable\": \"warn\",\n \"mobx/unconditional-make-observable\": \"error\",\n \"mobx/missing-make-observable\": \"error\",\n \"mobx/missing-observer\": \"warn\"\n }\n }\n]\n```\n\n## Rules\n\n### mobx/exhaustive-make-observable\n\nMakes sure that `makeObservable` annotates all fields defined on class or object literal.
\nTo exclude a field, annotate it using `field: false`.
\nDoes not support fields introduced by constructor (`this.foo = 5`).
\nDoes not warn about annotated non-existing fields (there is a runtime check, but the autofix removing the field could be handy...).
\n**Autofix** adds `field: true` for each missing field by default. You can change this behaviour by specifying options in your eslint config:\n\n```json\n{\n \"rules\": {\n \"mobx/exhaustive-make-observable\": [\"error\", { \"autofixAnnotation\": false }]\n }\n}\n```\n\nThis is a boolean value that controls if the field is annotated with `true` or `false`.\nIf you are migrating an existing project using `makeObservable` and do not want this rule to override\nyour current usage (even if it may be wrong), you should run the autofix with the annotation set to `false` to maintain existing behaviour: `eslint --no-eslintrc --fix --rule='mobx/exhaustive-make-observable: [2, { \"autofixAnnotation\": false }]' .`\n\n### mobx/missing-make-observable\n\n_When using decorators (eg `@observable foo = 5`)_, makes sure that `makeObservable(this)` is called in a constructor.
\n**Autofix** creates a constructor if necessary and adds `makeObservable(this)` at it's end.\n\n### mobx/unconditional-make-observable\n\nMakes sure the `make(Auto)Observable(this)` is called unconditionally inside a constructor.\n\n### mobx/missing-observer\n\nMakes sure every React component is wrapped with `observer`. A React component is considered to be any _class_ extending from `Component` or `React.Component` and any _function_ which name has the first letter capitalized (for anonymous functions the name is inferred from variable). These are all considered components:\n\n```javascript\nclass Cmp extends React.Component { }\nclass Cmp extends Component { }\nconst Cmp = class extends React.Component { }\nconst Cmp = class extends Component { }\nclass extends Component { }\nclass extends React.Component { }\n\nfunction Named() { }\nconst foo = function Named() { }\nconst Anonym = function () { };\nconst Arrow = () => { };\n```\n\n**Autofix** wraps the component with `observer` and if necessary declares a constant of the same name: `const Name = observer(function Name() {})`.\nIt's a bit opinionated and can lead to a lot of false positives depending on your conventions. You will probably want to combine this rule with `overrides` option, eg:\n\n```javascript\n// .eslintrc.js\n\"overrides\": [\n {\n \"files\": [\"*.jsx\"],\n \"rules\": {\n \"mobx/missing-observer\": \"error\"\n }\n }\n]\n```\n\n### mobx/no-anonymous-observer (deprecated)\n\n_Deprecated in favor of [react/display-name](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/display-name.md) + [componentWrapperFunctions](https://github.com/jsx-eslint/eslint-plugin-react). Example of **.eslintrc**:_\n\n```\n{\n \"rules\": {\n \"react/display-name\": \"warn\"\n },\n \"settings\": {\n \"componentWrapperFunctions\": [\n \"observer\"\n ]\n }\n}\n```\n\n---\n\nForbids anonymous functions or classes as `observer` components.\nImproves debugging experience and [avoids problem with inability to customize `displayName`](https://github.com/mobxjs/mobx/issues/2721).\nPlays nice with `eslint-plugin-react-hooks` and `mobx/missing-observer` as both of these don't recognize anonymous function as component.\n**Autofix** infers the name from variable if possible.\n","packages/mobx-react-lite/README.md":"# mobx-react-lite\n\n[](https://circleci.com/gh/mobxjs/mobx-react-lite)\n[](https://coveralls.io/github/mobxjs/mobx-react-lite)\n[](https://npmjs.com/package/mobx-react-lite)[](https://bundlephobia.com/result?p=mobx-react-lite)\n[](https://github.com/mobxjs/mobx/discussions)\n[](https://changelogs.xyz/mobx-react-lite)\n\nThis package supports React **function components only**. Use [mobx-react](https://github.com/mobxjs/mobx/tree/main/packages/mobx-react) if you also need class component support. It is still possible to use `` inside the render of class components.\n\n## Compatibility table (major versions)\n\n| mobx | mobx-react-lite | Browser |\n| ---- | --------------- | ---------------------------------------------- |\n| 7 | 5 | Modern browsers with native Proxy support |\n| 6 | 3 | Modern browsers (IE 11+ in compatibility mode) |\n| 5 | 2 | Modern browsers |\n| 4 | 2 | IE 11+, RN w/o Proxy support |\n\n`mobx-react-lite` version 5 requires React 18 or higher.\n\n## User Guide 👉 https://mobx.js.org/react-integration.html\n\n---\n\n## API reference ⚒\n\n### **`observer(baseComponent: FunctionComponent
): FunctionComponent
`**\n\nThe observer converts a component into a reactive component, which tracks which observables are used automatically and re-renders the component when one of these values changes.\nCan only be used for function components. For class component support see the `mobx-react` package.\n\n### **`{renderFn}`**\n\nIs a React component, which applies observer to an anonymous region in your component. `` can be used both inside class and function components.\n\n### **`useLocalObservable(initializer: () => T, annotations?: AnnotationsMap): T`**\n\nCreates an observable object with the given properties, methods and computed values.\n\nNote that computed values cannot directly depend on non-observable values, but only on observable values, so it might be needed to sync properties into the observable using `useEffect`.\n\n`useLocalObservable` is a short-hand for:\n\n`const [state] = useState(() => observable(initializer(), annotations, { autoBind: true }))`\n\n### **`enableStaticRendering(enable: true)`**\n\nCall `enableStaticRendering(true)` when running in an SSR environment, in which `observer` wrapped components should never re-render, but cleanup after the first rendering automatically. Use `isUsingStaticRendering()` to inspect the current setting.\n\n---\n\n## Removed APIs in version 5\n\n`useObserver`, `useLocalStore`, `useAsObservableSource`, `useStaticRendering`, batching imports, `observerBatching`, and `isObserverBatched` have been removed. Use `observer`, ``, `useLocalObservable`, and `enableStaticRendering`; React 18 renderers handle batching.\n\n## Testing\n\nRunning the full test suite now requires node 14+\nBut the library itself does not have this limitation\n\nTo avoid memory leaks from abandoned or suspended renders, this library uses timers\nto dispose reactions that never subscribe. When\n[FinalizationRegistry](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/FinalizationRegistry)\nis available, it can dispose these reactions earlier. Timers remain active for pending\nreactions because native finalization cannot clean up targets that are still reachable.\n\nThis can cause issues with test frameworks such as Jest\nwhich require that timers be cleaned up before the tests\ncan exit.\n\n### **`clearTimers()`**\n\nCall `clearTimers()` in the `afterEach` of your tests to ensure\nthat `mobx-react-lite` cleans up immediately and allows tests\nto exit.\n","packages/mobx-react/README.md":"# mobx-react\n\n[](https://circleci.com/gh/mobxjs/mobx-react)\n[](https://cdnjs.com/libraries/mobx-react)\n[](https://bundlephobia.com/result?p=mobx-react)\n[](https://github.com/mobxjs/mobx/discussions)\n[](https://changelogs.xyz/mobx-react)\n\nPackage with React component wrapper for combining React with MobX.\nExports the `observer` decorator and other utilities.\nFor documentation, see the [MobX](https://mobx.js.org) project.\nThis package supports both React and React Native.\n\n## Compatibility matrix\n\nOnly the latest version is actively maintained. If you're missing a fix or a feature in older version, consider upgrading or using [patch-package](https://www.npmjs.com/package/patch-package)\n\n| NPM Version | Support MobX version | Supported React versions | Added support for: |\n| ----------- | -------------------- | ------------------------ | -------------------------------------------------------------------------------- |\n| v10 | 7.\\* | >=18 | MobX 7, Hooks, React 18 strict mode |\n| v9 | 6.\\* | >16.8 | Hooks, React 18.2 in strict mode |\n| v7 | 6.\\* | >16.8 < 18.2 | Hooks |\n| v6 | 4.\\* / 5.\\* | >16.8 <17 | Hooks |\n| v5 | 4.\\* / 5.\\* | >0.13 <17 | No, but it is possible to use `` sections inside hook based components |\n\n`mobx-react` is a wrapper around `mobx-react-lite` for applications that also need class component support:\n\n- Support for function components through `mobx-react-lite`\n- Support for class based components for `observer` and `@observer`\n\n## Installation\n\n`npm install mobx-react`\n\nOr CDN: https://unpkg.com/mobx-react (UMD namespace: `mobxReact`)\n\n```javascript\nimport { observer } from \"mobx-react\"\n```\n\nThis package provides the bindings for MobX and React.\nSee the [official documentation](https://mobx.js.org/react-integration.html) for how to get started.\n\nUse `React.createContext` to pass stores around.\n\n## API documentation\n\nPlease check [mobx.js.org](https://mobx.js.org/) for the general documentation. The documentation below highlights some specifics.\n\n### `observer(component)`\n\nFunction (and decorator) that converts a React component definition, React component class, or stand-alone render function, into a reactive component. A converted component will track which observables are used by its effective `render` and automatically re-render the component when one of these values changes.\n\n#### Functional Components\n\n`React.memo` is automatically applied to functional components provided to `observer`. `observer` does not accept a functional component already wrapped in `React.memo`, or an `observer`, in order to avoid consequences that might arise as a result of wrapping it twice.\n\n#### Class Components\n\n`shouldComponentUpdate` is not supported. As such, it is recommended that class components extend `React.PureComponent`. The `observer` will automatically patch non-pure class components with an internal implementation of `React.PureComponent` if necessary.\n\nExtending `observer` class components is not supported. Always apply `observer` only on the last class in the inheritance chain.\n\nSee the [MobX](https://mobx.js.org/react-integration.html#react-integration) documentation for more details.\n\n```javascript\nimport { observer } from \"mobx-react\"\n\n// ---- ES6 syntax ----\nconst TodoView = observer(\n class TodoView extends React.Component {\n render() {\n return {this.props.todo.title}
\n }\n }\n)\n\n// ---- ESNext syntax with decorator syntax enabled ----\n@observer\nclass TodoView extends React.Component {\n render() {\n return {this.props.todo.title}
\n }\n}\n\n// ---- or just use function components: ----\nconst TodoView = observer(({ todo }) => {todo.title}
)\n```\n\n##### Note on using props and state in derivations\n\n`mobx-react` version 6 and lower would automatically turn `this.state` and `this.props` into observables.\nThis has the benefit that computed properties and reactions were able to observe those.\nHowever, since this pattern is fundamentally incompatible with `StrictMode` in React 18.2 and higher, this behavior has been removed in React 18.\n\nAs a result, we recommend to no longer mark properties as `@computed` in observer components if they depend on `this.state` or `this.props`.\n\n```javascript\n@observer\nclass Doubler extends React.Component<{ counter: number }> {\n @computed // BROKEN! <-- @computed should be removed in mobx-react > 7\n get doubleValue() {\n // Changes to this.props will no longer be detected properly, to fix it,\n // remove the @computed annotation.\n return this.props * 2\n }\n\n render() {\n return {this.doubleValue}
\n }\n}\n```\n\nSimilarly, reactions will no longer respond to `this.state` / `this.props`. This can be overcome by creating an observable copy:\n\n```javascript\n@observer\nclass Alerter extends React.Component<{ counter: number }> {\n @observable observableCounter: number\n reactionDisposer\n\n constructor(props) {\n this.observableCounter = counter\n }\n\n componentDidMount() {\n // set up a reaction, by observing the observable,\n // rather than the prop which is non-reactive:\n this.reactionDisposer = autorun(() => {\n if (this.observableCounter > 10) {\n alert(\"Reached 10!\")\n }\n })\n }\n\n componentDidUpdate() {\n // sync the observable from props\n this.observableCounter = this.props.counter\n }\n\n componentWillUnmount() {\n this.reactionDisposer()\n }\n\n render() {\n return {this.props.counter}
\n }\n}\n```\n\nMobX-react will try to detect cases where `this.props`, `this.state` or `this.context` are used by any other derivation than the `render` method of the owning component and throw.\nThis is to make sure that neither computed properties, nor reactions, nor other components accidentally rely on those fields to be reactive.\n\nThis includes cases where a render callback is passed to a child, that will read from the props or state of a parent component.\nAs a result, passing a function that might later read a property of a parent in a reactive context will throw as well.\nInstead, when using a callback function that is being passed to an `observer` based child, the capture should be captured locally first:\n\n```javascript\n@observer\nclass ChildWrapper extends React.Component<{ counter: number }> {\n render() {\n // Collapsible is an observer component that should respond to this.counter,\n // if it is expanded\n\n // BAD:\n return {this.props.counter}
} />\n\n // GOOD: (causes to pass down a fresh callback whenever counter changes,\n // that doesn't depend on its parents props)\n const counter = this.props.counter\n return {counter}
} />\n }\n}\n```\n\n### `Observer`\n\n`Observer` is a React component, which applies `observer` to an anonymous region in your component.\nIt takes as children a single, argumentless function which should return exactly one React component.\nThe rendering in the function will be tracked and automatically re-rendered when needed.\nThis can come in handy when needing to pass render function to external components (for example the React Native listview), or if you\ndislike the `observer` decorator / function.\n\n```javascript\nclass App extends React.Component {\n render() {\n return (\n \n {this.props.person.name}\n
{() => {this.props.person.name}
}\n
\n {this.props.person.name}\n
{this.props.person.name}
} />\n \n {todo.title} {todo.done ? \"[DONE]\" : \"[OPEN]\"}\n
\n )}\n \n )\n}\n```\n\nWhen using `useLocalObservable`, all properties of the returned object will be made observable automatically, getters will be turned into computed properties, and methods will be bound to the store and apply mobx transactions automatically. If new class instances are returned from the initializer, they will be kept as is.\n\nIt is important to realize that the store is created only once! It is not possible to specify dependencies to force re-creation, _nor should you directly be referring to props for the initializer function_, as changes in those won't propagate.\n\nInstead, if your store needs to refer to props (or `useState` based local state), sync those values into the store with `useEffect`.\n\nNote that in many cases it is possible to extract the initializer function to a function outside the component definition. Which makes it possible to test the store itself in a more straight-forward manner, and avoids creating the initializer closure on each re-render.\n\n_Note: using `useLocalObservable` is mostly beneficial for really complex local state, or to obtain more uniform code base. Note that using a local store might conflict with future React features like concurrent rendering._\n\n### Server Side Rendering with `enableStaticRendering`\n\nWhen using server side rendering, normal lifecycle hooks of React components are not fired, as the components are rendered only once.\nSince components are never unmounted, `observer` components would in this case leak memory when being rendered server side.\nTo avoid leaking memory, call `enableStaticRendering(true)` when using server side rendering.\n\n```javascript\nimport { enableStaticRendering } from \"mobx-react\"\n\nenableStaticRendering(true)\n```\n\nThis makes sure the component won't try to react to any future data changes.\n\n### Which components should be marked with `observer`?\n\nThe simple rule of thumb is: _all components that render observable data_.\nIf you don't want to mark a component as observer, for example to reduce the dependencies of a generic component package, make sure you only pass it plain data.\n\n### Enabling decorators (optional)\n\nDecorators are currently a stage-2 ESNext feature. How to enable them is documented [here](https://mobx.js.org/enabling-decorators.html#enabling-decorators-).\n\n### Should I still use smart and dumb components?\n\nSee this [thread](https://www.reddit.com/r/reactjs/comments/4vnxg5/free_eggheadio_course_learn_mobx_react_in_30/d61oh0l).\nTL;DR: the conceptual distinction makes a lot of sense when using MobX as well, but use `observer` on all components.\n\n## DevTools\n\n`mobx-react@6` and higher are no longer compatible with the mobx-react-devtools.\nThat is, the MobX react devtools will no longer show render timings or dependency trees of the component.\nThe reason is that the standard React devtools are also capable of highlighting re-rendering components.\nAnd the dependency tree of a component can now be inspected by the standard devtools as well, as shown in the image below:\n\n\n\n## FAQ\n\n**Should I use `observer` for each component?**\n\nYou should use `observer` on every component that displays observable data.\nEven the small ones. `observer` allows components to render independently from their parent and in general this means that\nthe more you use `observer`, the better the performance become.\nThe overhead of `observer` itself is negligible.\nSee also [Do child components need `@observer`?](https://github.com/mobxjs/mobx/issues/101)\n\n**I see React warnings about `forceUpdate` / `setState` from React**\n\nThe following warning will appear if you trigger a re-rendering between instantiating and rendering a component:\n\n```\n\nWarning: forceUpdate(...): Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.`\n\n```\n\n-- or --\n\n```\n\nWarning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.\n\n```\n\nUsually this means that (another) component is trying to modify observables used by this components in their `constructor` or `getInitialState` methods.\nThis violates the React Lifecycle, `componentWillMount` should be used instead if state needs to be modified before mounting.\n","packages/mobx-undecorate/README.md":"# mobx-undecorate\n\nUpdate MobX 4/5 code to be conformant to MobX 6.\n\nTo run this codemod:\n\n- Go to your source files directory\n- Run `npx mobx-undecorate`\n\nThe following MobX 4/5 APIs will be converted to their MobX 6 equivalents:\n\n- `@computed`\n- `@action`\n- `@observable`\n- `@observer`\n- `@inject`\n- `decorate`\n\n### Options\n\nThe following flags are accepted:\n\n- `--ignoreImports`: normally the codemod will only convert decorators if they are imported from a MobX package, using import statements like `import {observable} from \"mobx\"`. This flag ignores checking for imports statements and converts all `@computed`, `@action`, `@observable`, `@observer` and `@inject` calls.\n- `--keepDecorators`: don't rewrite decorators but keep them as they are, and generate the required `makeObservable` calls. Use this option if you intend to keep using decorators after updating to MobX 6.\n- `--decoratorsAfterExport`: set this flag only if you have `decoratorsBeforeExport: false` in your Babel configuration, otherwise you will get an error like: `SyntaxError: Decorators must be placed *before* the 'export' keyword. You can set the 'decoratorsBeforeExport' option to false`.\n- `--parseTsAsNonJsx`: parse ts file as non-jsx, and other file as same as before. see more details -> [mobxjs/mobx#issues2754](https://github.com/mobxjs/mobx/issues/2754)\n",".cursorrules (react-mobx-cursorrules-prompt-file.mdc)":"---\ndescription: \"Cursor rules for React development with MobX integration.\"\nglobs: **/*\nalwaysApply: false\n---\n// React + MobX .cursorrules\n\n// Prefer functional components with hooks\n\nconst preferFunctionalComponents = true;\n\n// MobX best practices\n\nconst mobxBestPractices = [\n \"Use MobX-react-lite for optimal performance with functional components\",\n \"Implement stores for managing application state\",\n \"Utilize computed values for derived state\",\n \"Use actions for modifying observable state\",\n \"Implement proper error handling in asynchronous actions\",\n];\n\n// Folder structure\n\nconst folderStructure = `\nsrc/\n components/\n stores/\n hooks/\n pages/\n utils/\n`;\n\n// Additional instructions\n\nconst additionalInstructions = `\n1. Use TypeScript for type safety with MobX\n2. Implement strict mode for MobX for better debugging\n3. Use observer HOC or useObserver hook for reactive components\n4. Implement proper dependency injection for stores\n5. Use reaction for side-effects based on observable changes\n6. Utilize MobX DevTools for debugging\n7. Follow MobX best practices for scalable state management\n`;\n"},"items":[{"name":"api.md","path":"docs/api.md","rawUrl":"https://raw.githubusercontent.com/mobxjs/mobx/HEAD/docs/api.md","title":"docs - API Interface Contract & Specifications","category":"project-spec","format":"markdown","content":"---\ntitle: MobX API Reference\nsidebar_label: API\nhide_title: true\n---\n\n\n\n# MobX API Reference\n\nFunctions marked with {🚀} are considered advanced, and should typically not be needed.\nConsider downloading our handy cheat sheet that explains all important APIs on a single page:\n\n\n\n## Core APIs\n\n_These are the most important MobX APIs._\n\n> Understanding [`observable`](#observable), [`computed`](#computed), [`reaction`](#reaction) and [`action`](#action) is enough to master and use MobX in your applications!\n\n## Creating observables\n\n_Making things observable._\n\n### `makeObservable`\n\nUsage: `makeObservable(target, annotations, options?)`\n([further information](observable-state.md#makeobservable))\n\nProperties, entire objects, arrays, Maps and Sets can all be made observable.\n\n### `makeAutoObservable`\n\nUsage: `makeAutoObservable(target, overrides?, options?)`\n([further information](observable-state.md#makeautoobservable))\n\nAutomatically make properties, objects, arrays, Maps and Sets observable.\n\n### `extendObservable`\n\n{🚀} Usage: `extendObservable(target, properties, overrides?, options?)`\n\nCan be used to introduce new properties on the `target` object and make them observable immediately. Basically a shorthand for `Object.assign(target, properties); makeAutoObservable(target, overrides, options);`. However, existing properties on `target` won't be touched.\n\nOld-fashioned constructor functions can nicely leverage `extendObservable`:\n\n```javascript\nfunction Person(firstName, lastName) {\n extendObservable(this, { firstName, lastName })\n}\n\nconst person = new Person(\"Michel\", \"Weststrate\")\n```\n\nIt is possible to use `extendObservable` to add observable fields to an existing object after instantiation, but be careful that adding an observable property this way is in itself not a fact that can be observed.\n\n### `observable`\n\nUsage: `observable(source, overrides?, options?)`, `observable` _(annotation)_ or `@observable accessor` _(field decorator)_.\n([further information](observable-state.md#observable))\n\nClones an object and makes it observable. Source can be a plain object, array, Map or Set. By default, `observable` is applied recursively. If one of the encountered values is an object or array, that value will be passed through `observable` as well.\n\n### `observable.object`\n\n{🚀} Usage: `observable.object(source, overrides?, options?)`\n([further information](observable-state.md#observable))\n\nAlias for `observable(source, overrides?, options?)`. Creates a clone of the provided object and makes all of its properties observable.\n\n### `observable.array`\n\n{🚀} Usage: `observable.array(initialValues?, options?)`\n\nCreates a new observable array based on the provided `initialValues`.\nTo convert observable arrays back to plain arrays, use the `.slice()` method, or check out [toJS](#tojs) to convert them recursively.\nBesides all the language built-in array functions, the following goodies are available on observable arrays as well:\n\n- `clear()` removes all current entries from the array.\n- `replace(newItems)` replaces all existing entries in the array with new ones.\n- `remove(value)` removes a single item by value from the array and returns `true` if the item was found and removed.\n\nIf the values in the array should not be turned into observables automatically, use the `{ deep: false }` option to make the array shallowly observable.\n\n### `observable.map`\n\n{🚀} Usage: `observable.map(initialMap?, options?)`\n\nCreates a new observable [ES6 Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) based on the provided `initialMap`.\nThey are very useful if you don't want to react just to the change of a specific entry, but also to their addition and removal.\nCreating observable Maps is the recommended approach for creating dynamically keyed collections.\n\nBesides all the language built-in Map functions, the following goodies are available on observable Maps as well:\n\n- `toJSON()` returns a shallow plain object representation of this Map (use [toJS](#tojs) for a deep copy).\n- `merge(values)` copies all entries from the provided `values` (plain object, array of entries or a string-keyed ES6 Map) into this Map.\n- `replace(values)` replaces the entire contents of this Map with the provided `values`.\n\nIf the values in the Map should not be turned into observables automatically, use the `{ deep: false }` option to make the Map shallowly observable.\n\n### `observable.set`\n\n{🚀} Usage: `observable.set(initialSet?, options?)`\n\nCreates a new observable [ES6 Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) based on the provided `initialSet`. Use it whenever you want to create a dynamic set where the addition and removal of values needs to be observed, but where values can appear only once in the entire collection.\n\nIf the values in the Set should not be turned into observables automatically, use the `{ deep: false }` option to make the Set shallowly observable.\n\nUnlike Map keys, Set values are [not tracked individually](https://github.com/mobxjs/mobx/issues/2336#issuecomment-616128089).\n\n### `observable.ref`\n\nUsage: `observable.ref` _(annotation)_\n([further information](observable-state.md#available-annotations))\n\nLike the `observable` annotation, but only reassignments will be tracked. The assigned values themselves won't be made observable automatically. For example, use this if you intend to store immutable data in an observable field.\n\n### `observable.shallow`\n\nUsage: `observable.shallow` _(annotation)_\n([further information](observable-state.md#available-annotations))\n\nLike the `observable.ref` annotation, but for collections. Any collection assigned will be made observable, but the contents of the collection itself won't become observable.\n\n### `observable.struct`\n\n{🚀} Usage: `observable.struct` _(annotation)_\n([further information](observable-state.md#available-annotations))\n\nLike the `observable` annotation, except that any assigned value that is structurally equal to the current value will be ignored.\n\n### `observable.deep`\n\n{🚀} Usage: `observable.deep` _(annotation)_\n([further information](observable-state.md#available-annotations))\n\nAlias for the [`observable`](#observable) annotation.\n\n### `observable.box`\n\n{🚀} Usage: `observable.box(value, options?)`\n\nAll primitive values in JavaScript are immutable and hence per definition not observable.\nUsually that is fine, as MobX can just make the _property_ that contains the value observable.\nIn rare cases, it can be convenient to have an observable _primitive_ that is not owned by an object.\nFor such cases, it is possible to create an observable _box_ that manages such a _primitive_.\n\n`observable.box(value)` accepts any value and stores it inside a box. The current value can be accessed through `.get()` and updated using `.set(newValue)`.\n\n```javascript\nimport { observable, autorun } from \"mobx\"\n\nconst cityName = observable.box(\"Vienna\")\n\nautorun(() => {\n console.log(cityName.get())\n})\n// Prints: 'Vienna'\n\ncityName.set(\"Amsterdam\")\n// Prints: 'Amsterdam'\n```\n\nIf the values in the box should not be turned into observables automatically, use the `{ deep: false }` option to make the box shallowly observable.\n\n---\n\n## Actions\n\n_An action is any piece of code that modifies the state._\n\n### `action`\n\nUsage: `action(fn)`, `action` _(annotation)_ or `@action` _(method / field decorator)_\n([further information](actions.md))\n\nUse on functions that intend to modify the state.\n\n### `runInAction`\n\n{🚀} Usage: `runInAction(fn)`\n([further information](actions.md#runinaction))\n\nCreate a one-time action that is immediately invoked.\n\n### `flow`\n\nUsage: `flow(fn)`, `flow` _(annotation)_ or `@flow` _(generator method decorator)_\n([further information](actions.md#using-flow-instead-of-async--await-))\n\nMobX friendly replacement for `async` / `await` that supports cancellation.\n\n### `flowResult`\n\nUsage: `flowResult(flowFunctionResult)`\n([further information](actions.md#using-flow-instead-of-async--await-))\n\nFor TypeScript users only. Utility that casts the output of the generator to a promise.\nThis is just a type-wise correction for the promise wrapping done by `flow`. At runtime it directly returns the inputted value.\n\n---\n\n## Computeds\n\n_Computed values can be used to derive information from other observables._\n\n### `computed`\n\nUsage: `computed(fn, options?)`, `computed(options?)` _(annotation)_ or `@computed` _(getter decorator)_\n([further information](computeds.md))\n\nCreates an observable value that is derived from other observables, but won't be recomputed unless one of the underlying observables changes.\n\n---\n\n## React integration\n\n_From `mobx-react-lite` for function components, or `mobx-react` for class component support._\n\n### `observer`\n\nUsage: `observer(component)`\n([further information](react-integration.md))\n\nA higher order component you can use to make a functional or class based React component re-render when observables change.\n\n### `Observer`\n\nUsage: `{() => rendering}`\n([further information](react-integration.md#callback-components-might-require-observer))\n\nRenders the given render function, and automatically re-renders it once one of the observables used in the render function changes.\n\n### `useLocalObservable`\n\nUsage: `useLocalObservable(() => source, annotations?)`\n([further information](react-integration.md#using-local-observable-state-in-observer-components))\n\nCreates a new observable object using `makeObservable`, and keeps it around in the component for the entire life-cycle of the component.\n\n---\n\n## Reactions\n\n_The goal of reactions is to model side effects that happen automatically._\n\n### `autorun`\n\nUsage: `autorun(() => effect, options?)`\n([further information](reactions.md#autorun))\n\nReruns a function every time anything it observes changes.\n\n### `reaction`\n\nUsage: `reaction(() => data, data => effect, options?)`\n([further information](reactions.md#reaction))\n\nReruns a side effect when any selected data changes.\n\n### `when`\n\nUsage: `when(() => condition, () => effect, options?)` or `await when(() => condition, options?)`\n([further information](reactions.md#when))\n\nExecutes a side effect once when a observable condition becomes true.\n\n---\n\n## Utilities\n\n_Utilities that might make working with observable objects or computed values more convenient. Less trivial utilities can also be found in the [mobx-utils](https://github.com/mobxjs/mobx-utils) package._\n\n### `onReactionError`\n\n{🚀} Usage: `onReactionError(handler: (error: any, derivation) => void)`\n\nAttaches a global error listener, which is invoked for every error that is thrown from a _reaction_. This can be used for monitoring or test purposes.\n\n### `intercept`\n\n{🚀} Usage: `intercept(propertyName|array|object|Set|Map, listener)`\n([further information](intercept-and-observe.md#intercept))\n\nIntercepts changes before they are applied to an observable API. Returns a disposer function that stops the interception.\n\n### `observe`\n\n{🚀} Usage: `observe(propertyName|array|object|Set|Map, listener)`\n([further information](intercept-and-observe.md#observe))\n\nLow-level API that can be used to observe a single observable value. Returns a disposer function that stops the interception.\n\n### `onBecomeObserved`\n\n{🚀} Usage: `onBecomeObserved(observable, property?, listener: () => void)`\n([further information](lazy-observables.md))\n\nHook for when something becomes observed.\n\n### `onBecomeUnobserved`\n\n{🚀} Usage: `onBecomeUnobserved(observable, property?, listener: () => void)`\n([further information](lazy-observables.md))\n\nHook for when something stops being observed.\n\n### `toJS`\n\nUsage: `toJS(value)`\n([further information](observable-state.md#converting-observables-back-to-vanilla-javascript-collections))\n\nRecursively converts an observable object to a JavaScript _object_. Supports observable arrays, objects, Maps and primitives.\n\nIt does NOT recurse into non-observables, these are left as they are, even if they contain observables.\nComputed and other non-enumerable properties are completely ignored and won't be returned. `@observable accessor` fields are the exception: they are not enumerable, but they are returned.\n\nFor more complex (de)serialization scenarios, it is recommended to give classes a (computed) `toJSON` method, or use a serialization library like [serializr](https://github.com/mobxjs/serializr).\n\n```javascript\nconst obj = mobx.observable({\n x: 1\n})\n\nconst clone = mobx.toJS(obj)\n\nconsole.log(mobx.isObservableObject(obj)) // true\nconsole.log(mobx.isObservableObject(clone)) // false\n```\n\n---\n\n## Configuration\n\n_Fine-tuning your MobX instance._\n\n### `configure`\n\nUsage: sets global behavior settings on the active MobX instance.\n([further information](configuration.md))\nUse it to change how MobX behaves as a whole.\n\n---\n\n## Collection utilities {🚀}\n\n_They enable manipulating observable arrays, objects and Maps with the same generic API._\n\n### `values`\n\n{🚀} Usage: `values(array|object|Set|Map)`\n([further information](collection-utilities.md))\n\nReturns all values in the collection as an array.\n\n### `keys`\n\n{🚀} Usage: `keys(array|object|Set|Map)`\n([further information](collection-utilities.md))\n\nReturns all keys / indices in the collection as an array.\n\n### `entries`\n\n{🚀} Usage: `entries(array|object|Set|Map)`\n([further information](collection-utilities.md))\n\nReturns a `[key, value]` pair of every entry in the collection as an array.\n\n### `set`\n\n{🚀} Usage: `set(array|object|Map, key, value)`\n([further information](collection-utilities.md))\n\nUpdates the collection.\n\n### `remove`\n\n{🚀} Usage: `remove(array|object|Map, key)`\n([further information](collection-utilities.md))\n\nRemoves item from the collection.\n\n### `has`\n\n{🚀} Usage: `has(array|object|Map, key)`\n([further information](collection-utilities.md))\n\nChecks for membership in the collection.\n\n### `get`\n\n{🚀} Usage: `get(array|object|Map, key)`\n([further information](collection-utilities.md))\n\nGets value from the collection with key.\n\n---\n\n## Introspection utilities {🚀}\n\n_Utilities that might come in handy if you want to inspect the internal state of MobX, or want to build cool tools on top of MobX._\n\n### `isObservable`\n\n{🚀} Usage: `isObservable(array|object|Set|Map)`\n\nIs the object / collection made observable by MobX?\n\n### `isObservableProp`\n\n{🚀} Usage: `isObservableProp(object, propertyName)`\n\nIs the property observable?\n\n### `isObservableArray`\n\n{🚀} Usage: `isObservableArray(array)`\n\nIs the value an observable array?\n\n### `isObservableObject`\n\n{🚀} Usage: `isObservableObject(object)`\n\nIs the value an observable object?\n\n### `isObservableSet`\n\n{🚀} Usage: `isObservableSet(set)`\n\nIs the value an observable Set?\n\n### `isObservableMap`\n\n{🚀} Usage: `isObservableMap(map)`\n\nIs the value an observable Map?\n\n### `isBoxedObservable`\n\n{🚀} Usage: `isBoxedObservable(value)`\n\nIs the value an observable box, created using `observable.box`?\n\n### `isAction`\n\n{🚀} Usage: `isAction(func)`\n\nIs the function marked as an `action`?\n\n### `isComputed`\n\n{🚀} Usage: `isComputed(boxedComputed)`\n\nIs this a boxed computed value, created using `computed(() => expr)`?\n\n### `isComputedProp`\n\n{🚀} Usage: `isComputedProp(object, propertyName)`\n\nIs this a computed property?\n\n### `spy`\n\n{🚀} Usage: `spy(eventListener)`\n([further information](analyzing-reactivity.md#spy))\n\nRegisters a global spy listener that listens to all events that happen in MobX.\n\n### `getDebugName`\n\n{🚀} Usage: `getDebugName(reaction|array|Set|Map)` or `getDebugName(object|Map, propertyName)`\n([further information](analyzing-reactivity.md#getdebugname))\n\nReturns the (generated) friendly debug name for an observable or reaction.\n\n### `getDependencyTree`\n\n{🚀} Usage: `getDependencyTree(object, computedPropertyName)`\n([further information](analyzing-reactivity.md#getdependencytree))\n\nReturns a tree structure with all observables the given reaction / computation currently depends upon.\n\n### `getObserverTree`\n\n{🚀} Usage: `getObserverTree(array|Set|Map)` or `getObserverTree(object|Map, propertyName)`\n([further information](analyzing-reactivity.md#getobservertree))\n\nReturns a tree structure with all reactions / computations that are observing the given observable.\n\n---\n\n## Extending MobX {🚀}\n\n_In the rare case you want to extend MobX itself._\n\n### `createAtom`\n\n{🚀} Usage: `createAtom(name, onBecomeObserved?, onBecomeUnobserved?)`\n([further information](custom-observables.md))\n\nCreates your own observable data structure and hooks it up to MobX. Used internally by all observable data types. Atom exposes two _report_ methods to notify MobX with when:\n\n- `reportObserved()`: the atom has become observed, and should be considered part of the dependency tree of the current derivation.\n- `reportChanged()`: the atom has changed, and all derivations depending on it should be invalidated.\n\n### `getAtom`\n\n{🚀} Usage: `getAtom(thing, property?)`\n([further information](analyzing-reactivity.md#getatom))\n\nReturns the backing atom.\n\n### `transaction`\n\n{🚀} Usage: `transaction(worker: () => any)`\n\n_Transaction is a low-level API. It is recommended to use [`action`](#action) or [`runInAction`](#runinaction) instead._\n\nUsed to batch a bunch of updates without running any reactions until the end of the transaction. Like [`untracked`](#untracked), it is automatically applied by `action`, so usually it makes more sense to use actions than to use `transaction` directly.\n\nIt takes a single, parameterless `worker` function as an argument, and returns any value that was returned by it.\nNote that `transaction` runs completely synchronously and can be nested. Only after completing the outermost `transaction`, the pending reactions will be run.\n\n```javascript\nimport { observable, transaction, autorun } from \"mobx\"\n\nconst numbers = observable([])\n\nautorun(() => console.log(numbers.length, \"numbers!\"))\n// Prints: '0 numbers!'\n\ntransaction(() => {\n transaction(() => {\n numbers.push(1)\n numbers.push(2)\n })\n numbers.push(3)\n})\n// Prints: '3 numbers!'\n```\n\n### `untracked`\n\n{🚀} Usage: `untracked(worker: () => any)`\n\n_Untracked is a low-level API. It is recommended to use [`reaction`](#reaction), [`action`](#action) or [`runInAction`](#runinaction) instead._\n\nRuns a piece of code without establishing observers. Like `transaction`, `untracked` is automatically applied by `action`, so usually it makes more sense to use actions than to use `untracked` directly.\n\n```javascript\nconst person = observable({\n firstName: \"Michel\",\n lastName: \"Weststrate\"\n})\n\nautorun(() => {\n console.log(\n person.lastName,\n \",\",\n // This untracked block will return the person's\n // firstName without establishing a dependency.\n untracked(() => person.firstName)\n )\n})\n// Prints: 'Weststrate, Michel'\n\nperson.firstName = \"G.K.\"\n// Doesn't print!\n\nperson.lastName = \"Chesterton\"\n// Prints: 'Chesterton, G.K.'\n```\n","frontmatter":{"title":"MobX API Reference","sidebar_label":"API","hide_title":true},"isInternal":false,"tokens":4806,"sizeBytes":20199},{"name":"README.md","path":"packages/eslint-plugin-mobx/README.md","rawUrl":"https://raw.githubusercontent.com/mobxjs/mobx/HEAD/packages/eslint-plugin-mobx/README.md","title":"eslint-plugin-mobx Documentation","category":"plugin-manifest","format":"markdown","content":"# eslint-plugin-mobx\n\nMobx specific linting rules for `eslint`.\n\n## Installation\n\n```\nnpm install --save-dev eslint @typescript-eslint/parser eslint-plugin-mobx\n```\n\n## Configuration\n\n### Legacy Config\n\n```javascript\n// .eslintrc.js\nmodule.exports = {\n parser: \"@typescript-eslint/parser\",\n // Include \"mobx\" in plugins array:\n plugins: [\"mobx\"],\n // Either extend our recommended configuration:\n extends: \"plugin:mobx/recommended\",\n // ...or specify and customize individual rules:\n rules: {\n // these values are the same as recommended\n \"mobx/exhaustive-make-observable\": \"warn\",\n \"mobx/unconditional-make-observable\": \"error\",\n \"mobx/missing-make-observable\": \"error\",\n \"mobx/missing-observer\": \"warn\"\n }\n}\n```\n\n### Flat Config\n\n```javascript\n// eslint.config.js\nimport pluginMobx from \"eslint-plugin-mobx\"\n\nexport default [\n // ...\n\n // Either extend our recommended configuration:\n pluginMobx.flatConfigs.recommended,\n\n // ...or specify and customize individual rules:\n {\n plugins: { mobx: pluginMobx },\n rules: {\n // these values are the same as recommended\n \"mobx/exhaustive-make-observable\": \"warn\",\n \"mobx/unconditional-make-observable\": \"error\",\n \"mobx/missing-make-observable\": \"error\",\n \"mobx/missing-observer\": \"warn\"\n }\n }\n]\n```\n\n## Rules\n\n### mobx/exhaustive-make-observable\n\nMakes sure that `makeObservable` annotates all fields defined on class or object literal.
\nTo exclude a field, annotate it using `field: false`.
\nDoes not support fields introduced by constructor (`this.foo = 5`).
\nDoes not warn about annotated non-existing fields (there is a runtime check, but the autofix removing the field could be handy...).
\n**Autofix** adds `field: true` for each missing field by default. You can change this behaviour by specifying options in your eslint config:\n\n```json\n{\n \"rules\": {\n \"mobx/exhaustive-make-observable\": [\"error\", { \"autofixAnnotation\": false }]\n }\n}\n```\n\nThis is a boolean value that controls if the field is annotated with `true` or `false`.\nIf you are migrating an existing project using `makeObservable` and do not want this rule to override\nyour current usage (even if it may be wrong), you should run the autofix with the annotation set to `false` to maintain existing behaviour: `eslint --no-eslintrc --fix --rule='mobx/exhaustive-make-observable: [2, { \"autofixAnnotation\": false }]' .`\n\n### mobx/missing-make-observable\n\n_When using decorators (eg `@observable foo = 5`)_, makes sure that `makeObservable(this)` is called in a constructor.
\n**Autofix** creates a constructor if necessary and adds `makeObservable(this)` at it's end.\n\n### mobx/unconditional-make-observable\n\nMakes sure the `make(Auto)Observable(this)` is called unconditionally inside a constructor.\n\n### mobx/missing-observer\n\nMakes sure every React component is wrapped with `observer`. A React component is considered to be any _class_ extending from `Component` or `React.Component` and any _function_ which name has the first letter capitalized (for anonymous functions the name is inferred from variable). These are all considered components:\n\n```javascript\nclass Cmp extends React.Component { }\nclass Cmp extends Component { }\nconst Cmp = class extends React.Component { }\nconst Cmp = class extends Component { }\nclass extends Component { }\nclass extends React.Component { }\n\nfunction Named() { }\nconst foo = function Named() { }\nconst Anonym = function () { };\nconst Arrow = () => { };\n```\n\n**Autofix** wraps the component with `observer` and if necessary declares a constant of the same name: `const Name = observer(function Name() {})`.\nIt's a bit opinionated and can lead to a lot of false positives depending on your conventions. You will probably want to combine this rule with `overrides` option, eg:\n\n```javascript\n// .eslintrc.js\n\"overrides\": [\n {\n \"files\": [\"*.jsx\"],\n \"rules\": {\n \"mobx/missing-observer\": \"error\"\n }\n }\n]\n```\n\n### mobx/no-anonymous-observer (deprecated)\n\n_Deprecated in favor of [react/display-name](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/display-name.md) + [componentWrapperFunctions](https://github.com/jsx-eslint/eslint-plugin-react). Example of **.eslintrc**:_\n\n```\n{\n \"rules\": {\n \"react/display-name\": \"warn\"\n },\n \"settings\": {\n \"componentWrapperFunctions\": [\n \"observer\"\n ]\n }\n}\n```\n\n---\n\nForbids anonymous functions or classes as `observer` components.\nImproves debugging experience and [avoids problem with inability to customize `displayName`](https://github.com/mobxjs/mobx/issues/2721).\nPlays nice with `eslint-plugin-react-hooks` and `mobx/missing-observer` as both of these don't recognize anonymous function as component.\n**Autofix** infers the name from variable if possible.\n","isInternal":false,"tokens":1145,"sizeBytes":4884},{"name":"README.md","path":"packages/mobx-react-lite/README.md","rawUrl":"https://raw.githubusercontent.com/mobxjs/mobx/HEAD/packages/mobx-react-lite/README.md","title":"mobx-react-lite Documentation","category":"plugin-manifest","format":"markdown","content":"# mobx-react-lite\n\n[](https://circleci.com/gh/mobxjs/mobx-react-lite)\n[](https://coveralls.io/github/mobxjs/mobx-react-lite)\n[](https://npmjs.com/package/mobx-react-lite)[](https://bundlephobia.com/result?p=mobx-react-lite)\n[](https://github.com/mobxjs/mobx/discussions)\n[](https://changelogs.xyz/mobx-react-lite)\n\nThis package supports React **function components only**. Use [mobx-react](https://github.com/mobxjs/mobx/tree/main/packages/mobx-react) if you also need class component support. It is still possible to use `` inside the render of class components.\n\n## Compatibility table (major versions)\n\n| mobx | mobx-react-lite | Browser |\n| ---- | --------------- | ---------------------------------------------- |\n| 7 | 5 | Modern browsers with native Proxy support |\n| 6 | 3 | Modern browsers (IE 11+ in compatibility mode) |\n| 5 | 2 | Modern browsers |\n| 4 | 2 | IE 11+, RN w/o Proxy support |\n\n`mobx-react-lite` version 5 requires React 18 or higher.\n\n## User Guide 👉 https://mobx.js.org/react-integration.html\n\n---\n\n## API reference ⚒\n\n### **`observer(baseComponent: FunctionComponent
): FunctionComponent
`**\n\nThe observer converts a component into a reactive component, which tracks which observables are used automatically and re-renders the component when one of these values changes.\nCan only be used for function components. For class component support see the `mobx-react` package.\n\n### **`{renderFn}`**\n\nIs a React component, which applies observer to an anonymous region in your component. `` can be used both inside class and function components.\n\n### **`useLocalObservable(initializer: () => T, annotations?: AnnotationsMap): T`**\n\nCreates an observable object with the given properties, methods and computed values.\n\nNote that computed values cannot directly depend on non-observable values, but only on observable values, so it might be needed to sync properties into the observable using `useEffect`.\n\n`useLocalObservable` is a short-hand for:\n\n`const [state] = useState(() => observable(initializer(), annotations, { autoBind: true }))`\n\n### **`enableStaticRendering(enable: true)`**\n\nCall `enableStaticRendering(true)` when running in an SSR environment, in which `observer` wrapped components should never re-render, but cleanup after the first rendering automatically. Use `isUsingStaticRendering()` to inspect the current setting.\n\n---\n\n## Removed APIs in version 5\n\n`useObserver`, `useLocalStore`, `useAsObservableSource`, `useStaticRendering`, batching imports, `observerBatching`, and `isObserverBatched` have been removed. Use `observer`, ``, `useLocalObservable`, and `enableStaticRendering`; React 18 renderers handle batching.\n\n## Testing\n\nRunning the full test suite now requires node 14+\nBut the library itself does not have this limitation\n\nTo avoid memory leaks from abandoned or suspended renders, this library uses timers\nto dispose reactions that never subscribe. When\n[FinalizationRegistry](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/FinalizationRegistry)\nis available, it can dispose these reactions earlier. Timers remain active for pending\nreactions because native finalization cannot clean up targets that are still reachable.\n\nThis can cause issues with test frameworks such as Jest\nwhich require that timers be cleaned up before the tests\ncan exit.\n\n### **`clearTimers()`**\n\nCall `clearTimers()` in the `afterEach` of your tests to ensure\nthat `mobx-react-lite` cleans up immediately and allows tests\nto exit.\n","isInternal":false,"tokens":970,"sizeBytes":4216},{"name":"README.md","path":"packages/mobx-react/README.md","rawUrl":"https://raw.githubusercontent.com/mobxjs/mobx/HEAD/packages/mobx-react/README.md","title":"mobx-react Documentation","category":"plugin-manifest","format":"markdown","content":"# mobx-react\n\n[](https://circleci.com/gh/mobxjs/mobx-react)\n[](https://cdnjs.com/libraries/mobx-react)\n[](https://bundlephobia.com/result?p=mobx-react)\n[](https://github.com/mobxjs/mobx/discussions)\n[](https://changelogs.xyz/mobx-react)\n\nPackage with React component wrapper for combining React with MobX.\nExports the `observer` decorator and other utilities.\nFor documentation, see the [MobX](https://mobx.js.org) project.\nThis package supports both React and React Native.\n\n## Compatibility matrix\n\nOnly the latest version is actively maintained. If you're missing a fix or a feature in older version, consider upgrading or using [patch-package](https://www.npmjs.com/package/patch-package)\n\n| NPM Version | Support MobX version | Supported React versions | Added support for: |\n| ----------- | -------------------- | ------------------------ | -------------------------------------------------------------------------------- |\n| v10 | 7.\\* | >=18 | MobX 7, Hooks, React 18 strict mode |\n| v9 | 6.\\* | >16.8 | Hooks, React 18.2 in strict mode |\n| v7 | 6.\\* | >16.8 < 18.2 | Hooks |\n| v6 | 4.\\* / 5.\\* | >16.8 <17 | Hooks |\n| v5 | 4.\\* / 5.\\* | >0.13 <17 | No, but it is possible to use `` sections inside hook based components |\n\n`mobx-react` is a wrapper around `mobx-react-lite` for applications that also need class component support:\n\n- Support for function components through `mobx-react-lite`\n- Support for class based components for `observer` and `@observer`\n\n## Installation\n\n`npm install mobx-react`\n\nOr CDN: https://unpkg.com/mobx-react (UMD namespace: `mobxReact`)\n\n```javascript\nimport { observer } from \"mobx-react\"\n```\n\nThis package provides the bindings for MobX and React.\nSee the [official documentation](https://mobx.js.org/react-integration.html) for how to get started.\n\nUse `React.createContext` to pass stores around.\n\n## API documentation\n\nPlease check [mobx.js.org](https://mobx.js.org/) for the general documentation. The documentation below highlights some specifics.\n\n### `observer(component)`\n\nFunction (and decorator) that converts a React component definition, React component class, or stand-alone render function, into a reactive component. A converted component will track which observables are used by its effective `render` and automatically re-render the component when one of these values changes.\n\n#### Functional Components\n\n`React.memo` is automatically applied to functional components provided to `observer`. `observer` does not accept a functional component already wrapped in `React.memo`, or an `observer`, in order to avoid consequences that might arise as a result of wrapping it twice.\n\n#### Class Components\n\n`shouldComponentUpdate` is not supported. As such, it is recommended that class components extend `React.PureComponent`. The `observer` will automatically patch non-pure class components with an internal implementation of `React.PureComponent` if necessary.\n\nExtending `observer` class components is not supported. Always apply `observer` only on the last class in the inheritance chain.\n\nSee the [MobX](https://mobx.js.org/react-integration.html#react-integration) documentation for more details.\n\n```javascript\nimport { observer } from \"mobx-react\"\n\n// ---- ES6 syntax ----\nconst TodoView = observer(\n class TodoView extends React.Component {\n render() {\n return {this.props.todo.title}
\n }\n }\n)\n\n// ---- ESNext syntax with decorator syntax enabled ----\n@observer\nclass TodoView extends React.Component {\n render() {\n return {this.props.todo.title}
\n }\n}\n\n// ---- or just use function components: ----\nconst TodoView = observer(({ todo }) => {todo.title}
)\n```\n\n##### Note on using props and state in derivations\n\n`mobx-react` version 6 and lower would automatically turn `this.state` and `this.props` into observables.\nThis has the benefit that computed properties and reactions were able to observe those.\nHowever, since this pattern is fundamentally incompatible with `StrictMode` in React 18.2 and higher, this behavior has been removed in React 18.\n\nAs a result, we recommend to no longer mark properties as `@computed` in observer components if they depend on `this.state` or `this.props`.\n\n```javascript\n@observer\nclass Doubler extends React.Component<{ counter: number }> {\n @computed // BROKEN! <-- @computed should be removed in mobx-react > 7\n get doubleValue() {\n // Changes to this.props will no longer be detected properly, to fix it,\n // remove the @computed annotation.\n return this.props * 2\n }\n\n render() {\n return {this.doubleValue}
\n }\n}\n```\n\nSimilarly, reactions will no longer respond to `this.state` / `this.props`. This can be overcome by creating an observable copy:\n\n```javascript\n@observer\nclass Alerter extends React.Component<{ counter: number }> {\n @observable observableCounter: number\n reactionDisposer\n\n constructor(props) {\n this.observableCounter = counter\n }\n\n componentDidMount() {\n // set up a reaction, by observing the observable,\n // rather than the prop which is non-reactive:\n this.reactionDisposer = autorun(() => {\n if (this.observableCounter > 10) {\n alert(\"Reached 10!\")\n }\n })\n }\n\n componentDidUpdate() {\n // sync the observable from props\n this.observableCounter = this.props.counter\n }\n\n componentWillUnmount() {\n this.reactionDisposer()\n }\n\n render() {\n return {this.props.counter}
\n }\n}\n```\n\nMobX-react will try to detect cases where `this.props`, `this.state` or `this.context` are used by any other derivation than the `render` method of the owning component and throw.\nThis is to make sure that neither computed properties, nor reactions, nor other components accidentally rely on those fields to be reactive.\n\nThis includes cases where a render callback is passed to a child, that will read from the props or state of a parent component.\nAs a result, passing a function that might later read a property of a parent in a reactive context will throw as well.\nInstead, when using a callback function that is being passed to an `observer` based child, the capture should be captured locally first:\n\n```javascript\n@observer\nclass ChildWrapper extends React.Component<{ counter: number }> {\n render() {\n // Collapsible is an observer component that should respond to this.counter,\n // if it is expanded\n\n // BAD:\n return {this.props.counter}
} />\n\n // GOOD: (causes to pass down a fresh callback whenever counter changes,\n // that doesn't depend on its parents props)\n const counter = this.props.counter\n return {counter}
} />\n }\n}\n```\n\n### `Observer`\n\n`Observer` is a React component, which applies `observer` to an anonymous region in your component.\nIt takes as children a single, argumentless function which should return exactly one React component.\nThe rendering in the function will be tracked and automatically re-rendered when needed.\nThis can come in handy when needing to pass render function to external components (for example the React Native listview), or if you\ndislike the `observer` decorator / function.\n\n```javascript\nclass App extends React.Component {\n render() {\n return (\n \n {this.props.person.name}\n
{() => {this.props.person.name}
}\n
\n {this.props.person.name}\n
{this.props.person.name}
} />\n \n {todo.title} {todo.done ? \"[DONE]\" : \"[OPEN]\"}\n
\n )}\n \n )\n}\n```\n\nWhen using `useLocalObservable`, all properties of the returned object will be made observable automatically, getters will be turned into computed properties, and methods will be bound to the store and apply mobx transactions automatically. If new class instances are returned from the initializer, they will be kept as is.\n\nIt is important to realize that the store is created only once! It is not possible to specify dependencies to force re-creation, _nor should you directly be referring to props for the initializer function_, as changes in those won't propagate.\n\nInstead, if your store needs to refer to props (or `useState` based local state), sync those values into the store with `useEffect`.\n\nNote that in many cases it is possible to extract the initializer function to a function outside the component definition. Which makes it possible to test the store itself in a more straight-forward manner, and avoids creating the initializer closure on each re-render.\n\n_Note: using `useLocalObservable` is mostly beneficial for really complex local state, or to obtain more uniform code base. Note that using a local store might conflict with future React features like concurrent rendering._\n\n### Server Side Rendering with `enableStaticRendering`\n\nWhen using server side rendering, normal lifecycle hooks of React components are not fired, as the components are rendered only once.\nSince components are never unmounted, `observer` components would in this case leak memory when being rendered server side.\nTo avoid leaking memory, call `enableStaticRendering(true)` when using server side rendering.\n\n```javascript\nimport { enableStaticRendering } from \"mobx-react\"\n\nenableStaticRendering(true)\n```\n\nThis makes sure the component won't try to react to any future data changes.\n\n### Which components should be marked with `observer`?\n\nThe simple rule of thumb is: _all components that render observable data_.\nIf you don't want to mark a component as observer, for example to reduce the dependencies of a generic component package, make sure you only pass it plain data.\n\n### Enabling decorators (optional)\n\nDecorators are currently a stage-2 ESNext feature. How to enable them is documented [here](https://mobx.js.org/enabling-decorators.html#enabling-decorators-).\n\n### Should I still use smart and dumb components?\n\nSee this [thread](https://www.reddit.com/r/reactjs/comments/4vnxg5/free_eggheadio_course_learn_mobx_react_in_30/d61oh0l).\nTL;DR: the conceptual distinction makes a lot of sense when using MobX as well, but use `observer` on all components.\n\n## DevTools\n\n`mobx-react@6` and higher are no longer compatible with the mobx-react-devtools.\nThat is, the MobX react devtools will no longer show render timings or dependency trees of the component.\nThe reason is that the standard React devtools are also capable of highlighting re-rendering components.\nAnd the dependency tree of a component can now be inspected by the standard devtools as well, as shown in the image below:\n\n\n\n## FAQ\n\n**Should I use `observer` for each component?**\n\nYou should use `observer` on every component that displays observable data.\nEven the small ones. `observer` allows components to render independently from their parent and in general this means that\nthe more you use `observer`, the better the performance become.\nThe overhead of `observer` itself is negligible.\nSee also [Do child components need `@observer`?](https://github.com/mobxjs/mobx/issues/101)\n\n**I see React warnings about `forceUpdate` / `setState` from React**\n\nThe following warning will appear if you trigger a re-rendering between instantiating and rendering a component:\n\n```\n\nWarning: forceUpdate(...): Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.`\n\n```\n\n-- or --\n\n```\n\nWarning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.\n\n```\n\nUsually this means that (another) component is trying to modify observables used by this components in their `constructor` or `getInitialState` methods.\nThis violates the React Lifecycle, `componentWillMount` should be used instead if state needs to be modified before mounting.\n","isInternal":false,"tokens":3063,"sizeBytes":14380},{"name":"README.md","path":"packages/mobx-undecorate/README.md","rawUrl":"https://raw.githubusercontent.com/mobxjs/mobx/HEAD/packages/mobx-undecorate/README.md","title":"mobx-undecorate Documentation","category":"plugin-manifest","format":"markdown","content":"# mobx-undecorate\n\nUpdate MobX 4/5 code to be conformant to MobX 6.\n\nTo run this codemod:\n\n- Go to your source files directory\n- Run `npx mobx-undecorate`\n\nThe following MobX 4/5 APIs will be converted to their MobX 6 equivalents:\n\n- `@computed`\n- `@action`\n- `@observable`\n- `@observer`\n- `@inject`\n- `decorate`\n\n### Options\n\nThe following flags are accepted:\n\n- `--ignoreImports`: normally the codemod will only convert decorators if they are imported from a MobX package, using import statements like `import {observable} from \"mobx\"`. This flag ignores checking for imports statements and converts all `@computed`, `@action`, `@observable`, `@observer` and `@inject` calls.\n- `--keepDecorators`: don't rewrite decorators but keep them as they are, and generate the required `makeObservable` calls. Use this option if you intend to keep using decorators after updating to MobX 6.\n- `--decoratorsAfterExport`: set this flag only if you have `decoratorsBeforeExport: false` in your Babel configuration, otherwise you will get an error like: `SyntaxError: Decorators must be placed *before* the 'export' keyword. You can set the 'decoratorsBeforeExport' option to false`.\n- `--parseTsAsNonJsx`: parse ts file as non-jsx, and other file as same as before. see more details -> [mobxjs/mobx#issues2754](https://github.com/mobxjs/mobx/issues/2754)\n","isInternal":false,"tokens":364,"sizeBytes":1368},{"name":".cursorrules","path":".cursorrules (react-mobx-cursorrules-prompt-file.mdc)","rawUrl":"https://raw.githubusercontent.com/PatrickJS/awesome-cursorrules/main/rules/react-mobx-cursorrules-prompt-file.mdc","title":"Awesome Cursorrules: react mobx","category":"cursor-rule","format":"markdown","content":"---\ndescription: \"Cursor rules for React development with MobX integration.\"\nglobs: **/*\nalwaysApply: false\n---\n// React + MobX .cursorrules\n\n// Prefer functional components with hooks\n\nconst preferFunctionalComponents = true;\n\n// MobX best practices\n\nconst mobxBestPractices = [\n \"Use MobX-react-lite for optimal performance with functional components\",\n \"Implement stores for managing application state\",\n \"Utilize computed values for derived state\",\n \"Use actions for modifying observable state\",\n \"Implement proper error handling in asynchronous actions\",\n];\n\n// Folder structure\n\nconst folderStructure = `\nsrc/\n components/\n stores/\n hooks/\n pages/\n utils/\n`;\n\n// Additional instructions\n\nconst additionalInstructions = `\n1. Use TypeScript for type safety with MobX\n2. Implement strict mode for MobX for better debugging\n3. Use observer HOC or useObserver hook for reactive components\n4. Implement proper dependency injection for stores\n5. Use reaction for side-effects based on observable changes\n6. Utilize MobX DevTools for debugging\n7. Follow MobX best practices for scalable state management\n`;\n","tokens":233,"sizeBytes":1115}],"systemPromptSnippet":"\n\n---\ntitle: MobX API Reference\nsidebar_label: API\nhide_title: true\n---\n\n\n\n# MobX API Reference\n\nFunctions marked with {🚀} are considered advanced, and should typically not be needed.\nConsider downloading our handy cheat sheet that explains all important APIs on a single page:\n\n\n\n## Core APIs\n\n_These are the most important MobX APIs._\n\n> Understanding [`observable`](#observable), [`computed`](#computed), [`reaction`](#reaction) and [`action`](#action) is enough to master and use MobX in your applications!\n\n## Creating observables\n\n_Making things observable._\n\n### `makeObservable`\n\nUsage: `makeObservable(target, annotations, options?)`\n([further information](observable-state.md#makeobservable))\n\nProperties, entire objects, arrays, Maps and Sets can all be made observable.\n\n### `makeAutoObservable`\n\nUsage: `makeAutoObservable(target, overrides?, options?)`\n([further information](observable-state.md#makeautoobservable))\n\nAutomatically make properties, objects, arrays, Maps and Sets observable.\n\n### `extendObservable`\n\n{🚀} Usage: `extendObservable(target, properties, overrides?, options?)`\n\nCan be used to introduce new properties on the `target` object and make them observable immediately. Basically a shorthand for `Object.assign(target, properties); makeAutoObservable(target, overrides, options);`. However, existing properties on `target` won't be touched.\n\nOld-fashioned constructor functions can nicely leverage `extendObservable`:\n\n```javascript\nfunction Person(firstName, lastName) {\n extendObservable(this, { firstName, lastName })\n}\n\nconst person = new Person(\"Michel\", \"Weststrate\")\n```\n\nIt is possible to use `extendObservable` to add observable fields to an existing object after instantiation, but be careful that adding an observable property this way is in itself not a fact that can be observed.\n\n### `observable`\n\nUsage: `observable(source, overrides?, options?)`, `observable` _(annotation)_ or `@observable accessor` _(field decorator)_.\n([further information](observable-state.md#observable))\n\nClones an object and makes it observable. Source can be a plain object, array, Map or Set. By default, `observable` is applied recursively. If one of the encountered values is an object or array, that value will be passed through `observable` as well.\n\n### `observable.object`\n\n{🚀} Usage: `observable.object(source, overrides?, options?)`\n([further information](observable-state.md#observable))\n\nAlias for `observable(source, overrides?, options?)`. Creates a clone of the provided object and makes all of its properties observable.\n\n### `observable.array`\n\n{🚀} Usage: `observable.array(initialValues?, options?)`\n\nCreates a new observable array based on the provided `initialValues`.\nTo convert observable arrays back to plain arrays, use the `.slice()` method, or check out [toJS](#tojs) to convert them recursively.\nBesides all the language built-in array functions, the following goodies are available on observable arrays as well:\n\n- `clear()` removes all current entries from the array.\n- `replace(newItems)` replaces all existing entries in the array with new ones.\n- `remove(value)` removes a single item by value from the array and returns `true` if the item was found and removed.\n\nIf the values in the array should not be turned into observables automatically, use the `{ deep: false }` option to make the array shallowly observable.\n\n### `observable.map`\n\n{🚀} Usage: `observable.map(initialMap?, options?)`\n\nCreates a new observable [ES6 Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) based on the provided `initialMap`.\nThey are very useful if you don't want to react just to the change of a specific entry, but also to their addition and removal.\nCreating observable Maps is the recommended approach for creating dynamically keyed collections.\n\nBesides all the language built-in Map functions, the following goodies are available on observable Maps as well:\n\n- `toJSON()` returns a shallow plain object representation of this Map (use [toJS](#tojs) for a deep copy).\n- `merge(values)` copies all entries from the provided `values` (plain object, array of entries or a string-keyed ES6 Map) into this Map.\n- `replace(values)` replaces the entire contents of this Map with the provided `values`.\n\nIf the values in the Map should not be turned into observables automatically, use the `{ deep: false }` option to make the Map shallowly observable.\n\n### `observable.set`\n\n{🚀} Usage: `observable.set(initialSet?, options?)`\n\nCreates a new observable [ES6 Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) based on the provided `initialSet`. Use it whenever you want to create a dynamic set where the addition and removal of values needs to be observed, but where values can appear only once in the entire collection.\n\nIf the values in the Set should not be turned into observables automatically, use the `{ deep: false }` option to make the Set shallowly observable.\n\nUnlike Map keys, Set values are [not tracked individually](https://github.com/mobxjs/mobx/issues/2336#issuecomment-616128089).\n\n### `observable.ref`\n\nUsage: `observable.ref` _(annotation)_\n([further information](observable-state.md#available-annotations))\n\nLike the `observable` annotation, but only reassignments will be tracked. The assigned values themselves won't be made observable automatically. For example, use this if you intend to store immutable data in an observable field.\n\n### `observable.shallow`\n\nUsage: `observable.shallow` _(annotation)_\n([further information](observable-state.md#available-annotations))\n\nLike the `observable.ref` annotation, but for collections. Any collection assigned will be made observable, but the contents of the collection itself won't become observable.\n\n### `observable.struct`\n\n{🚀} Usage: `observable.struct` _(annotation)_\n([further information](observable-state.md#available-annotations))\n\nLike the `observable` annotation, except that any assigned value that is structurally equal to the current value will be ignored.\n\n### `observable.deep`\n\n{🚀} Usage: `observable.deep` _(annotation)_\n([further information](observable-state.md#available-annotations))\n\nAlias for the [`observable`](#observable) annotation.\n\n### `observable.box`\n\n{🚀} Usage: `observable.box(value, options?)`\n\nAll primitive values in JavaScript are immutable and hence per definition not observable.\nUsually that is fine, as MobX can just make the _property_ that contains the value observable.\nIn rare cases, it can be convenient to have an observable _primitive_ that is not owned by an object.\nFor such cases, it is possible to create an observable _box_ that manages such a _primitive_.\n\n`observable.box(value)` accepts any value and stores it inside a box. The current value can be accessed through `.get()` and updated using `.set(newValue)`.\n\n```javascript\nimport { observable, autorun } from \"mobx\"\n\nconst cityName = observable.box(\"Vienna\")\n\nautorun(() => {\n console.log(cityName.get())\n})\n// Prints: 'Vienna'\n\ncityName.set(\"Amsterdam\")\n// Prints: 'Amsterdam'\n```\n\nIf the values in the box should not be turned into observables automatically, use the `{ deep: false }` option to make the box shallowly observable.\n\n---\n\n## Actions\n\n_An action is any piece of code that modifies the state._\n\n### `action`\n\nUsage: `action(fn)`, `action` _(annotation)_ or `@action` _(method / field decorator)_\n([further information](actions.md))\n\nUse on functions that intend to modify the state.\n\n### `runInAction`\n\n{🚀} Usage: `runInAction(fn)`\n([further information](actions.md#runinaction))\n\nCreate a one-time action that is immediately invoked.\n\n### `flow`\n\nUsage: `flow(fn)`, `flow` _(annotation)_ or `@flow` _(generator method decorator)_\n([further information](actions.md#using-flow-instead-of-async--await-))\n\nMobX friendly replacement for `async` / `await` that supports cancellation.\n\n### `flowResult`\n\nUsage: `flowResult(flowFunctionResult)`\n([further information](actions.md#using-flow-instead-of-async--await-))\n\nFor TypeScript users only. Utility that casts the output of the generator to a promise.\nThis is just a type-wise correction for the promise wrapping done by `flow`. At runtime it directly returns the inputted value.\n\n---\n\n## Computeds\n\n_Computed values can be used to derive information from other observables._\n\n### `computed`\n\nUsage: `computed(fn, options?)`, `computed(options?)` _(annotation)_ or `@computed` _(getter decorator)_\n([further information](computeds.md))\n\nCreates an observable value that is derived from other observables, but won't be recomputed unless one of the underlying observables changes.\n\n---\n\n## React integration\n\n_From `mobx-react-lite` for function components, or `mobx-react` for class component support._\n\n### `observer`\n\nUsage: `observer(component)`\n([further information](react-integration.md))\n\nA higher order component you can use to make a functional or class based React component re-render when observables change.\n\n### `Observer`\n\nUsage: `{() => rendering}`\n([further information](react-integration.md#callback-components-might-require-observer))\n\nRenders the given render function, and automatically re-renders it once one of the observables used in the render function changes.\n\n### `useLocalObservable`\n\nUsage: `useLocalObservable(() => source, annotations?)`\n([further information](react-integration.md#using-local-observable-state-in-observer-components))\n\nCreates a new observable object using `makeObservable`, and keeps it around in the component for the entire life-cycle of the component.\n\n---\n\n## Reactions\n\n_The goal of reactions is to model side effects that happen automatically._\n\n### `autorun`\n\nUsage: `autorun(() => effect, options?)`\n([further information](reactions.md#autorun))\n\nReruns a function every time anything it observes changes.\n\n### `reaction`\n\nUsage: `reaction(() => data, data => effect, options?)`\n([further information](reactions.md#reaction))\n\nReruns a side effect when any selected data changes.\n\n### `when`\n\nUsage: `when(() => condition, () => effect, options?)` or `await when(() => condition, options?)`\n([further information](reactions.md#when))\n\nExecutes a side effect once when a observable condition becomes true.\n\n---\n\n## Utilities\n\n_Utilities that might make working with observable objects or computed values more convenient. Less trivial utilities can also be found in the [mobx-utils](https://github.com/mobxjs/mobx-utils) package._\n\n### `onReactionError`\n\n{🚀} Usage: `onReactionError(handler: (error: any, derivation) => void)`\n\nAttaches a global error listener, which is invoked for every error that is thrown from a _reaction_. This can be used for monitoring or test purposes.\n\n### `intercept`\n\n{🚀} Usage: `intercept(propertyName|array|object|Set|Map, listener)`\n([further information](intercept-and-observe.md#intercept))\n\nIntercepts changes before they are applied to an observable API. Returns a disposer function that stops the interception.\n\n### `observe`\n\n{🚀} Usage: `observe(propertyName|array|object|Set|Map, listener)`\n([further information](intercept-and-observe.md#observe))\n\nLow-level API that can be used to observe a single observable value. Returns a disposer function that stops the interception.\n\n### `onBecomeObserved`\n\n{🚀} Usage: `onBecomeObserved(observable, property?, listener: () => void)`\n([further information](lazy-observables.md))\n\nHook for when something becomes observed.\n\n### `onBecomeUnobserved`\n\n{🚀} Usage: `onBecomeUnobserved(observable, property?, listener: () => void)`\n([further information](lazy-observables.md))\n\nHook for when something stops being observed.\n\n### `toJS`\n\nUsage: `toJS(value)`\n([further information](observable-state.md#converting-observables-back-to-vanilla-javascript-collections))\n\nRecursively converts an observable object to a JavaScript _object_. Supports observable arrays, objects, Maps and primitives.\n\nIt does NOT recurse into non-observables, these are left as they are, even if they contain observables.\nComputed and other non-enumerable properties are completely ignored and won't be returned. `@observable accessor` fields are the exception: they are not enumerable, but they are returned.\n\nFor more complex (de)serialization scenarios, it is recommended to give classes a (computed) `toJSON` method, or use a serialization library like [serializr](https://github.com/mobxjs/serializr).\n\n```javascript\nconst obj = mobx.observable({\n x: 1\n})\n\nconst clone = mobx.toJS(obj)\n\nconsole.log(mobx.isObservableObject(obj)) // true\nconsole.log(mobx.isObservableObject(clone)) // false\n```\n\n---\n\n## Configuration\n\n_Fine-tuning your MobX instance._\n\n### `configure`\n\nUsage: sets global behavior settings on the active MobX instance.\n([further information](configuration.md))\nUse it to change how MobX behaves as a whole.\n\n---\n\n## Collection utilities {🚀}\n\n_They enable manipulating observable arrays, objects and Maps with the same generic API._\n\n### `values`\n\n{🚀} Usage: `values(array|object|Set|Map)`\n([further information](collection-utilities.md))\n\nReturns all values in the collection as an array.\n\n### `keys`\n\n{🚀} Usage: `keys(array|object|Set|Map)`\n([further information](collection-utilities.md))\n\nReturns all keys / indices in the collection as an array.\n\n### `entries`\n\n{🚀} Usage: `entries(array|object|Set|Map)`\n([further information](collection-utilities.md))\n\nReturns a `[key, value]` pair of every entry in the collection as an array.\n\n### `set`\n\n{🚀} Usage: `set(array|object|Map, key, value)`\n([further information](collection-utilities.md))\n\nUpdates the collection.\n\n### `remove`\n\n{🚀} Usage: `remove(array|object|Map, key)`\n([further information](collection-utilities.md))\n\nRemoves item from the collection.\n\n### `has`\n\n{🚀} Usage: `has(array|object|Map, key)`\n([further information](collection-utilities.md))\n\nChecks for membership in the collection.\n\n### `get`\n\n{🚀} Usage: `get(array|object|Map, key)`\n([further information](collection-utilities.md))\n\nGets value from the collection with key.\n\n---\n\n## Introspection utilities {🚀}\n\n_Utilities that might come in handy if you want to inspect the internal state of MobX, or want to build cool tools on top of MobX._\n\n### `isObservable`\n\n{🚀} Usage: `isObservable(array|object|Set|Map)`\n\nIs the object / collection made observable by MobX?\n\n### `isObservableProp`\n\n{🚀} Usage: `isObservableProp(object, propertyName)`\n\nIs the property observable?\n\n### `isObservableArray`\n\n{🚀} Usage: `isObservableArray(array)`\n\nIs the value an observable array?\n\n### `isObservableObject`\n\n{🚀} Usage: `isObservableObject(object)`\n\nIs the value an observable object?\n\n### `isObservableSet`\n\n{🚀} Usage: `isObservableSet(set)`\n\nIs the value an observable Set?\n\n### `isObservableMap`\n\n{🚀} Usage: `isObservableMap(map)`\n\nIs the value an observable Map?\n\n### `isBoxedObservable`\n\n{🚀} Usage: `isBoxedObservable(value)`\n\nIs the value an observable box, created using `observable.box`?\n\n### `isAction`\n\n{🚀} Usage: `isAction(func)`\n\nIs the function marked as an `action`?\n\n### `isComputed`\n\n{🚀} Usage: `isComputed(boxedComputed)`\n\nIs this a boxed computed value, created using `computed(() => expr)`?\n\n### `isComputedProp`\n\n{🚀} Usage: `isComputedProp(object, propertyName)`\n\nIs this a computed property?\n\n### `spy`\n\n{🚀} Usage: `spy(eventListener)`\n([further information](analyzing-reactivity.md#spy))\n\nRegisters a global spy listener that listens to all events that happen in MobX.\n\n### `getDebugName`\n\n{🚀} Usage: `getDebugName(reaction|array|Set|Map)` or `getDebugName(object|Map, propertyName)`\n([further information](analyzing-reactivity.md#getdebugname))\n\nReturns the (generated) friendly debug name for an observable or reaction.\n\n### `getDependencyTree`\n\n{🚀} Usage: `getDependencyTree(object, computedPropertyName)`\n([further information](analyzing-reactivity.md#getdependencytree))\n\nReturns a tree structure with all observables the given reaction / computation currently depends upon.\n\n### `getObserverTree`\n\n{🚀} Usage: `getObserverTree(array|Set|Map)` or `getObserverTree(object|Map, propertyName)`\n([further information](analyzing-reactivity.md#getobservertree))\n\nReturns a tree structure with all reactions / computations that are observing the given observable.\n\n---\n\n## Extending MobX {🚀}\n\n_In the rare case you want to extend MobX itself._\n\n### `createAtom`\n\n{🚀} Usage: `createAtom(name, onBecomeObserved?, onBecomeUnobserved?)`\n([further information](custom-observables.md))\n\nCreates your own observable data structure and hooks it up to MobX. Used internally by all observable data types. Atom exposes two _report_ methods to notify MobX with when:\n\n- `reportObserved()`: the atom has become observed, and should be considered part of the dependency tree of the current derivation.\n- `reportChanged()`: the atom has changed, and all derivations depending on it should be invalidated.\n\n### `getAtom`\n\n{🚀} Usage: `getAtom(thing, property?)`\n([further information](analyzing-reactivity.md#getatom))\n\nReturns the backing atom.\n\n### `transaction`\n\n{🚀} Usage: `transaction(worker: () => any)`\n\n_Transaction is a low-level API. It is recommended to use [`action`](#action) or [`runInAction`](#runinaction) instead._\n\nUsed to batch a bunch of updates without running any reactions until the end of the transaction. Like [`untracked`](#untracked), it is automatically applied by `action`, so usually it makes more sense to use actions than to use `transaction` directly.\n\nIt takes a single, parameterless `worker` function as an argument, and returns any value that was returned by it.\nNote that `transaction` runs completely synchronously and can be nested. Only after completing the outermost `transaction`, the pending reactions will be run.\n\n```javascript\nimport { observable, transaction, autorun } from \"mobx\"\n\nconst numbers = observable([])\n\nautorun(() => console.log(numbers.length, \"numbers!\"))\n// Prints: '0 numbers!'\n\ntransaction(() => {\n transaction(() => {\n numbers.push(1)\n numbers.push(2)\n })\n numbers.push(3)\n})\n// Prints: '3 numbers!'\n```\n\n### `untracked`\n\n{🚀} Usage: `untracked(worker: () => any)`\n\n_Untracked is a low-level API. It is recommended to use [`reaction`](#reaction), [`action`](#action) or [`runInAction`](#runinaction) instead._\n\nRuns a piece of code without establishing observers. Like `transaction`, `untracked` is automatically applied by `action`, so usually it makes more sense to use actions than to use `untracked` directly.\n\n```javascript\nconst person = observable({\n firstName: \"Michel\",\n lastName: \"Weststrate\"\n})\n\nautorun(() => {\n console.log(\n person.lastName,\n \",\",\n // This untracked block will return the person's\n // firstName without establishing a dependency.\n untracked(() => person.firstName)\n )\n})\n// Prints: 'Weststrate, Michel'\n\nperson.firstName = \"G.K.\"\n// Doesn't print!\n\nperson.lastName = \"Chesterton\"\n// Prints: 'Chesterton, G.K.'\n```\n\n\n# eslint-plugin-mobx\n\nMobx specific linting rules for `eslint`.\n\n## Installation\n\n```\nnpm install --save-dev eslint @typescript-eslint/parser eslint-plugin-mobx\n```\n\n## Configuration\n\n### Legacy Config\n\n```javascript\n// .eslintrc.js\nmodule.exports = {\n parser: \"@typescript-eslint/parser\",\n // Include \"mobx\" in plugins array:\n plugins: [\"mobx\"],\n // Either extend our recommended configuration:\n extends: \"plugin:mobx/recommended\",\n // ...or specify and customize individual rules:\n rules: {\n // these values are the same as recommended\n \"mobx/exhaustive-make-observable\": \"warn\",\n \"mobx/unconditional-make-observable\": \"error\",\n \"mobx/missing-make-observable\": \"error\",\n \"mobx/missing-observer\": \"warn\"\n }\n}\n```\n\n### Flat Config\n\n```javascript\n// eslint.config.js\nimport pluginMobx from \"eslint-plugin-mobx\"\n\nexport default [\n // ...\n\n // Either extend our recommended configuration:\n pluginMobx.flatConfigs.recommended,\n\n // ...or specify and customize individual rules:\n {\n plugins: { mobx: pluginMobx },\n rules: {\n // these values are the same as recommended\n \"mobx/exhaustive-make-observable\": \"warn\",\n \"mobx/unconditional-make-observable\": \"error\",\n \"mobx/missing-make-observable\": \"error\",\n \"mobx/missing-observer\": \"warn\"\n }\n }\n]\n```\n\n## Rules\n\n### mobx/exhaustive-make-observable\n\nMakes sure that `makeObservable` annotates all fields defined on class or object literal.
\nTo exclude a field, annotate it using `field: false`.
\nDoes not support fields introduced by constructor (`this.foo = 5`).
\nDoes not warn about annotated non-existing fields (there is a runtime check, but the autofix removing the field could be handy...).
\n**Autofix** adds `field: true` for each missing field by default. You can change this behaviour by specifying options in your eslint config:\n\n```json\n{\n \"rules\": {\n \"mobx/exhaustive-make-observable\": [\"error\", { \"autofixAnnotation\": false }]\n }\n}\n```\n\nThis is a boolean value that controls if the field is annotated with `true` or `false`.\nIf you are migrating an existing project using `makeObservable` and do not want this rule to override\nyour current usage (even if it may be wrong), you should run the autofix with the annotation set to `false` to maintain existing behaviour: `eslint --no-eslintrc --fix --rule='mobx/exhaustive-make-observable: [2, { \"autofixAnnotation\": false }]' .`\n\n### mobx/missing-make-observable\n\n_When using decorators (eg `@observable foo = 5`)_, makes sure that `makeObservable(this)` is called in a constructor.
\n**Autofix** creates a constructor if necessary and adds `makeObservable(this)` at it's end.\n\n### mobx/unconditional-make-observable\n\nMakes sure the `make(Auto)Observable(this)` is called unconditionally inside a constructor.\n\n### mobx/missing-observer\n\nMakes sure every React component is wrapped with `observer`. A React component is considered to be any _class_ extending from `Component` or `React.Component` and any _function_ which name has the first letter capitalized (for anonymous functions the name is inferred from variable). These are all considered components:\n\n```javascript\nclass Cmp extends React.Component { }\nclass Cmp extends Component { }\nconst Cmp = class extends React.Component { }\nconst Cmp = class extends Component { }\nclass extends Component { }\nclass extends React.Component { }\n\nfunction Named() { }\nconst foo = function Named() { }\nconst Anonym = function () { };\nconst Arrow = () => { };\n```\n\n**Autofix** wraps the component with `observer` and if necessary declares a constant of the same name: `const Name = observer(function Name() {})`.\nIt's a bit opinionated and can lead to a lot of false positives depending on your conventions. You will probably want to combine this rule with `overrides` option, eg:\n\n```javascript\n// .eslintrc.js\n\"overrides\": [\n {\n \"files\": [\"*.jsx\"],\n \"rules\": {\n \"mobx/missing-observer\": \"error\"\n }\n }\n]\n```\n\n### mobx/no-anonymous-observer (deprecated)\n\n_Deprecated in favor of [react/display-name](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/display-name.md) + [componentWrapperFunctions](https://github.com/jsx-eslint/eslint-plugin-react). Example of **.eslintrc**:_\n\n```\n{\n \"rules\": {\n \"react/display-name\": \"warn\"\n },\n \"settings\": {\n \"componentWrapperFunctions\": [\n \"observer\"\n ]\n }\n}\n```\n\n---\n\nForbids anonymous functions or classes as `observer` components.\nImproves debugging experience and [avoids problem with inability to customize `displayName`](https://github.com/mobxjs/mobx/issues/2721).\nPlays nice with `eslint-plugin-react-hooks` and `mobx/missing-observer` as both of these don't recognize anonymous function as component.\n**Autofix** infers the name from variable if possible.\n\n\n# mobx-react-lite\n\n[](https://circleci.com/gh/mobxjs/mobx-react-lite)\n[](https://coveralls.io/github/mobxjs/mobx-react-lite)\n[](https://npmjs.com/package/mobx-react-lite)[](https://bundlephobia.com/result?p=mobx-react-lite)\n[](https://github.com/mobxjs/mobx/discussions)\n[](https://changelogs.xyz/mobx-react-lite)\n\nThis package supports React **function components only**. Use [mobx-react](https://github.com/mobxjs/mobx/tree/main/packages/mobx-react) if you also need class component support. It is still possible to use `` inside the render of class components.\n\n## Compatibility table (major versions)\n\n| mobx | mobx-react-lite | Browser |\n| ---- | --------------- | ---------------------------------------------- |\n| 7 | 5 | Modern browsers with native Proxy support |\n| 6 | 3 | Modern browsers (IE 11+ in compatibility mode) |\n| 5 | 2 | Modern browsers |\n| 4 | 2 | IE 11+, RN w/o Proxy support |\n\n`mobx-react-lite` version 5 requires React 18 or higher.\n\n## User Guide 👉 https://mobx.js.org/react-integration.html\n\n---\n\n## API reference ⚒\n\n### **`observer(baseComponent: FunctionComponent
): FunctionComponent
`**\n\nThe observer converts a component into a reactive component, which tracks which observables are used automatically and re-renders the component when one of these values changes.\nCan only be used for function components. For class component support see the `mobx-react` package.\n\n### **`{renderFn}`**\n\nIs a React component, which applies observer to an anonymous region in your component. `` can be used both inside class and function components.\n\n### **`useLocalObservable(initializer: () => T, annotations?: AnnotationsMap): T`**\n\nCreates an observable object with the given properties, methods and computed values.\n\nNote that computed values cannot directly depend on non-observable values, but only on observable values, so it might be needed to sync properties into the observable using `useEffect`.\n\n`useLocalObservable` is a short-hand for:\n\n`const [state] = useState(() => observable(initializer(), annotations, { autoBind: true }))`\n\n### **`enableStaticRendering(enable: true)`**\n\nCall `enableStaticRendering(true)` when running in an SSR environment, in which `observer` wrapped components should never re-render, but cleanup after the first rendering automatically. Use `isUsingStaticRendering()` to inspect the current setting.\n\n---\n\n## Removed APIs in version 5\n\n`useObserver`, `useLocalStore`, `useAsObservableSource`, `useStaticRendering`, batching imports, `observerBatching`, and `isObserverBatched` have been removed. Use `observer`, ``, `useLocalObservable`, and `enableStaticRendering`; React 18 renderers handle batching.\n\n## Testing\n\nRunning the full test suite now requires node 14+\nBut the library itself does not have this limitation\n\nTo avoid memory leaks from abandoned or suspended renders, this library uses timers\nto dispose reactions that never subscribe. When\n[FinalizationRegistry](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/FinalizationRegistry)\nis available, it can dispose these reactions earlier. Timers remain active for pending\nreactions because native finalization cannot clean up targets that are still reachable.\n\nThis can cause issues with test frameworks such as Jest\nwhich require that timers be cleaned up before the tests\ncan exit.\n\n### **`clearTimers()`**\n\nCall `clearTimers()` in the `afterEach` of your tests to ensure\nthat `mobx-react-lite` cleans up immediately and allows tests\nto exit.\n\n\n# mobx-react\n\n[](https://circleci.com/gh/mobxjs/mobx-react)\n[](https://cdnjs.com/libraries/mobx-react)\n[](https://bundlephobia.com/result?p=mobx-react)\n[](https://github.com/mobxjs/mobx/discussions)\n[](https://changelogs.xyz/mobx-react)\n\nPackage with React component wrapper for combining React with MobX.\nExports the `observer` decorator and other utilities.\nFor documentation, see the [MobX](https://mobx.js.org) project.\nThis package supports both React and React Native.\n\n## Compatibility matrix\n\nOnly the latest version is actively maintained. If you're missing a fix or a feature in older version, consider upgrading or using [patch-package](https://www.npmjs.com/package/patch-package)\n\n| NPM Version | Support MobX version | Supported React versions | Added support for: |\n| ----------- | -------------------- | ------------------------ | -------------------------------------------------------------------------------- |\n| v10 | 7.\\* | >=18 | MobX 7, Hooks, React 18 strict mode |\n| v9 | 6.\\* | >16.8 | Hooks, React 18.2 in strict mode |\n| v7 | 6.\\* | >16.8 < 18.2 | Hooks |\n| v6 | 4.\\* / 5.\\* | >16.8 <17 | Hooks |\n| v5 | 4.\\* / 5.\\* | >0.13 <17 | No, but it is possible to use `` sections inside hook based components |\n\n`mobx-react` is a wrapper around `mobx-react-lite` for applications that also need class component support:\n\n- Support for function components through `mobx-react-lite`\n- Support for class based components for `observer` and `@observer`\n\n## Installation\n\n`npm install mobx-react`\n\nOr CDN: https://unpkg.com/mobx-react (UMD namespace: `mobxReact`)\n\n```javascript\nimport { observer } from \"mobx-react\"\n```\n\nThis package provides the bindings for MobX and React.\nSee the [official documentation](https://mobx.js.org/react-integration.html) for how to get started.\n\nUse `React.createContext` to pass stores around.\n\n## API documentation\n\nPlease check [mobx.js.org](https://mobx.js.org/) for the general documentation. The documentation below highlights some specifics.\n\n### `observer(component)`\n\nFunction (and decorator) that converts a React component definition, React component class, or stand-alone render function, into a reactive component. A converted component will track which observables are used by its effective `render` and automatically re-render the component when one of these values changes.\n\n#### Functional Components\n\n`React.memo` is automatically applied to functional components provided to `observer`. `observer` does not accept a functional component already wrapped in `React.memo`, or an `observer`, in order to avoid consequences that might arise as a result of wrapping it twice.\n\n#### Class Components\n\n`shouldComponentUpdate` is not supported. As such, it is recommended that class components extend `React.PureComponent`. The `observer` will automatically patch non-pure class components with an internal implementation of `React.PureComponent` if necessary.\n\nExtending `observer` class components is not supported. Always apply `observer` only on the last class in the inheritance chain.\n\nSee the [MobX](https://mobx.js.org/react-integration.html#react-integration) documentation for more details.\n\n```javascript\nimport { observer } from \"mobx-react\"\n\n// ---- ES6 syntax ----\nconst TodoView = observer(\n class TodoView extends React.Component {\n render() {\n return {this.props.todo.title}
\n }\n }\n)\n\n// ---- ESNext syntax with decorator syntax enabled ----\n@observer\nclass TodoView extends React.Component {\n render() {\n return {this.props.todo.title}
\n }\n}\n\n// ---- or just use function components: ----\nconst TodoView = observer(({ todo }) => {todo.title}
)\n```\n\n##### Note on using props and state in derivations\n\n`mobx-react` version 6 and lower would automatically turn `this.state` and `this.props` into observables.\nThis has the benefit that computed properties and reactions were able to observe those.\nHowever, since this pattern is fundamentally incompatible with `StrictMode` in React 18.2 and higher, this behavior has been removed in React 18.\n\nAs a result, we recommend to no longer mark properties as `@computed` in observer components if they depend on `this.state` or `this.props`.\n\n```javascript\n@observer\nclass Doubler extends React.Component<{ counter: number }> {\n @computed // BROKEN! <-- @computed should be removed in mobx-react > 7\n get doubleValue() {\n // Changes to this.props will no longer be detected properly, to fix it,\n // remove the @computed annotation.\n return this.props * 2\n }\n\n render() {\n return {this.doubleValue}
\n }\n}\n```\n\nSimilarly, reactions will no longer respond to `this.state` / `this.props`. This can be overcome by creating an observable copy:\n\n```javascript\n@observer\nclass Alerter extends React.Component<{ counter: number }> {\n @observable observableCounter: number\n reactionDisposer\n\n constructor(props) {\n this.observableCounter = counter\n }\n\n componentDidMount() {\n // set up a reaction, by observing the observable,\n // rather than the prop which is non-reactive:\n this.reactionDisposer = autorun(() => {\n if (this.observableCounter > 10) {\n alert(\"Reached 10!\")\n }\n })\n }\n\n componentDidUpdate() {\n // sync the observable from props\n this.observableCounter = this.props.counter\n }\n\n componentWillUnmount() {\n this.reactionDisposer()\n }\n\n render() {\n return {this.props.counter}
\n }\n}\n```\n\nMobX-react will try to detect cases where `this.props`, `this.state` or `this.context` are used by any other derivation than the `render` method of the owning component and throw.\nThis is to make sure that neither computed properties, nor reactions, nor other components accidentally rely on those fields to be reactive.\n\nThis includes cases where a render callback is passed to a child, that will read from the props or state of a parent component.\nAs a result, passing a function that might later read a property of a parent in a reactive context will throw as well.\nInstead, when using a callback function that is being passed to an `observer` based child, the capture should be captured locally first:\n\n```javascript\n@observer\nclass ChildWrapper extends React.Component<{ counter: number }> {\n render() {\n // Collapsible is an observer component that should respond to this.counter,\n // if it is expanded\n\n // BAD:\n return {this.props.counter}
} />\n\n // GOOD: (causes to pass down a fresh callback whenever counter changes,\n // that doesn't depend on its parents props)\n const counter = this.props.counter\n return {counter}
} />\n }\n}\n```\n\n### `Observer`\n\n`Observer` is a React component, which applies `observer` to an anonymous region in your component.\nIt takes as children a single, argumentless function which should return exactly one React component.\nThe rendering in the function will be tracked and automatically re-rendered when needed.\nThis can come in handy when needing to pass render function to external components (for example the React Native listview), or if you\ndislike the `observer` decorator / function.\n\n```javascript\nclass App extends React.Component {\n render() {\n return (\n \n {this.props.person.name}\n
{() => {this.props.person.name}
}\n
\n {this.props.person.name}\n
{this.props.person.name}
} />\n \n {todo.title} {todo.done ? \"[DONE]\" : \"[OPEN]\"}\n
\n )}\n \n )\n}\n```\n\nWhen using `useLocalObservable`, all properties of the returned object will be made observable automatically, getters will be turned into computed properties, and methods will be bound to the store and apply mobx transactions automatically. If new class instances are returned from the initializer, they will be kept as is.\n\nIt is important to realize that the store is created only once! It is not possible to specify dependencies to force re-creation, _nor should you directly be referring to props for the initializer function_, as changes in those won't propagate.\n\nInstead, if your store needs to refer to props (or `useState` based local state), sync those values into the store with `useEffect`.\n\nNote that in many cases it is possible to extract the initializer function to a function outside the component definition. Which makes it possible to test the store itself in a more straight-forward manner, and avoids creating the initializer closure on each re-render.\n\n_Note: using `useLocalObservable` is mostly beneficial for really complex local state, or to obtain more uniform code base. Note that using a local store might conflict with future React features like concurrent rendering._\n\n### Server Side Rendering with `enableStaticRendering`\n\nWhen using server side rendering, normal lifecycle hooks of React components are not fired, as the components are rendered only once.\nSince components are never unmounted, `observer` components would in this case leak memory when being rendered server side.\nTo avoid leaking memory, call `enableStaticRendering(true)` when using server side rendering.\n\n```javascript\nimport { enableStaticRendering } from \"mobx-react\"\n\nenableStaticRendering(true)\n```\n\nThis makes sure the component won't try to react to any future data changes.\n\n### Which components should be marked with `observer`?\n\nThe simple rule of thumb is: _all components that render observable data_.\nIf you don't want to mark a component as observer, for example to reduce the dependencies of a generic component package, make sure you only pass it plain data.\n\n### Enabling decorators (optional)\n\nDecorators are currently a stage-2 ESNext feature. How to enable them is documented [here](https://mobx.js.org/enabling-decorators.html#enabling-decorators-).\n\n### Should I still use smart and dumb components?\n\nSee this [thread](https://www.reddit.com/r/reactjs/comments/4vnxg5/free_eggheadio_course_learn_mobx_react_in_30/d61oh0l).\nTL;DR: the conceptual distinction makes a lot of sense when using MobX as well, but use `observer` on all components.\n\n## DevTools\n\n`mobx-react@6` and higher are no longer compatible with the mobx-react-devtools.\nThat is, the MobX react devtools will no longer show render timings or dependency trees of the component.\nThe reason is that the standard React devtools are also capable of highlighting re-rendering components.\nAnd the dependency tree of a component can now be inspected by the standard devtools as well, as shown in the image below:\n\n\n\n## FAQ\n\n**Should I use `observer` for each component?**\n\nYou should use `observer` on every component that displays observable data.\nEven the small ones. `observer` allows components to render independently from their parent and in general this means that\nthe more you use `observer`, the better the performance become.\nThe overhead of `observer` itself is negligible.\nSee also [Do child components need `@observer`?](https://github.com/mobxjs/mobx/issues/101)\n\n**I see React warnings about `forceUpdate` / `setState` from React**\n\nThe following warning will appear if you trigger a re-rendering between instantiating and rendering a component:\n\n```\n\nWarning: forceUpdate(...): Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.`\n\n```\n\n-- or --\n\n```\n\nWarning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.\n\n```\n\nUsually this means that (another) component is trying to modify observables used by this components in their `constructor` or `getInitialState` methods.\nThis violates the React Lifecycle, `componentWillMount` should be used instead if state needs to be modified before mounting.\n\n\n# mobx-undecorate\n\nUpdate MobX 4/5 code to be conformant to MobX 6.\n\nTo run this codemod:\n\n- Go to your source files directory\n- Run `npx mobx-undecorate`\n\nThe following MobX 4/5 APIs will be converted to their MobX 6 equivalents:\n\n- `@computed`\n- `@action`\n- `@observable`\n- `@observer`\n- `@inject`\n- `decorate`\n\n### Options\n\nThe following flags are accepted:\n\n- `--ignoreImports`: normally the codemod will only convert decorators if they are imported from a MobX package, using import statements like `import {observable} from \"mobx\"`. This flag ignores checking for imports statements and converts all `@computed`, `@action`, `@observable`, `@observer` and `@inject` calls.\n- `--keepDecorators`: don't rewrite decorators but keep them as they are, and generate the required `makeObservable` calls. Use this option if you intend to keep using decorators after updating to MobX 6.\n- `--decoratorsAfterExport`: set this flag only if you have `decoratorsBeforeExport: false` in your Babel configuration, otherwise you will get an error like: `SyntaxError: Decorators must be placed *before* the 'export' keyword. You can set the 'decoratorsBeforeExport' option to false`.\n- `--parseTsAsNonJsx`: parse ts file as non-jsx, and other file as same as before. see more details -> [mobxjs/mobx#issues2754](https://github.com/mobxjs/mobx/issues/2754)\n\n\n---\ndescription: \"Cursor rules for React development with MobX integration.\"\nglobs: **/*\nalwaysApply: false\n---\n// React + MobX .cursorrules\n\n// Prefer functional components with hooks\n\nconst preferFunctionalComponents = true;\n\n// MobX best practices\n\nconst mobxBestPractices = [\n \"Use MobX-react-lite for optimal performance with functional components\",\n \"Implement stores for managing application state\",\n \"Utilize computed values for derived state\",\n \"Use actions for modifying observable state\",\n \"Implement proper error handling in asynchronous actions\",\n];\n\n// Folder structure\n\nconst folderStructure = `\nsrc/\n components/\n stores/\n hooks/\n pages/\n utils/\n`;\n\n// Additional instructions\n\nconst additionalInstructions = `\n1. Use TypeScript for type safety with MobX\n2. Implement strict mode for MobX for better debugging\n3. Use observer HOC or useObserver hook for reactive components\n4. Implement proper dependency injection for stores\n5. Use reaction for side-effects based on observable changes\n6. Utilize MobX DevTools for debugging\n7. Follow MobX best practices for scalable state management\n`;\n
"}