- mobx-react-lite now requires MobX 7 and React 18 or later
- mobx-react now requires MobX 7 and React 18 or later
- Minified error URLs shortened to reduce production bundle size
- ES5/non-proxy fallback for observable objects and arrays; MobX now always uses Proxy-backed observables
- configure({ useProxies: ... }) option
- { proxy: false } option for observable, observable.object, and observable.array
- Legacy decorators support
- Namespaced annotation properties observable.ref, observable.shallow, observable.deep, and observable.struct in favor of named exports observableRef, observableShallow, observableDeep, and observableStruct
- Namespaced comparer and computed properties comparer.identity, comparer.default, comparer.structural, comparer.shallow, computed.struct, action.bound, and flow.bound in favor of named exports compareIdentity, compareDefault, compareStructural, compareShallow, computedStruct, actionBound, and flowBound
- Public trace API and related runtime support; use toJS, getDependencyTree, getObserverTree, spy or mobx-log package for debugging
- Provider, inject, and MobXProviderContext from React binding packages; use React.createContext directly
- disposeOnUnmount from React binding packages; dispose reactions in componentWillUnmount or return cleanup functions from useEffect
- PropTypes export from React binding packages; use TypeScript or the regular prop-types package
- useObserver from React binding packages; wrap components with observer or use <Observer>
- useLocalStore from React binding packages; use useLocalObservable instead
- useAsObservableSource from React binding packages; synchronize values from props into local observable state explicitly
- useStaticRendering from React binding packages; use enableStaticRendering instead
- observerBatching, isObserverBatched, batchingForReactDom, batchingOptOut, and batchingForReactNative from React binding packages; React 18+ renderers handle batching
- Legacy function-component contextTypes handling from React binding packages
- observer(fn, { forwardRef: true }) syntax; pass an already-created React.forwardRef(...) component to observer instead
Major Changes
-
1926c69f53168619d688f348aa587e8f3ae579ae#4671 Thanks @kubk! - Release MobX 7, mobx-react-lite 5, and mobx-react 10.Bundle sizes are down: ESM prod 17.02 KiB gzip -> 13.96 KiB gzip; a minimal tree-shaken example is 10.32 KiB gzip now.
It removes long-deprecated compatibility paths and keeps the React bindings split between
mobx-react-litefor function components andmobx-reactfor class-component support.MobX 7
MobX 7 is a cleanup release focused on the modern runtime and decorator model.
- MobX now always uses Proxy-backed observable objects and arrays. The ES5/non-proxy fallback has been removed.
configure({ useProxies: ... })is no longer supported.{ proxy: false }options forobservable,observable.object, andobservable.arrayare no longer supported.- Legacy decorators are no longer supported.
- Namespaced annotation and comparer properties now use named exports to reduce bundle size:
Removed API Replacement observable.refobservableRefobservable.shallowobservableShallowobservable.deepobservableDeepobservable.structobservableStructcomputed.structcomputedStructaction.boundactionBoundflow.boundflowBoundcomparer.identitycompareIdentitycomparer.defaultcompareDefaultcomparer.structuralcompareStructuralcomparer.shallowcompareShallow- The public
traceAPI and its related runtime support have been removed. UsetoJS,getDependencyTree,getObserverTree,spyormobx-logpackage for debugging.
mobx-react-lite 5 and mobx-react 10
mobx-react-lite 5 and mobx-react 10 require MobX 7 and React 18 or later.
mobx-react-literemains the function-component package.mobx-reactremains a thin wrapper aroundmobx-react-litethat adds class component and Stage 3@observerclass decorator support.- Keep function-component imports on
mobx-react-liteif you do not need class component support. - Use
mobx-reactwhen you need class components or@observerclass decorators. mobx-react-litesupports function components andforwardRef;mobx-reactdelegates function components tomobx-react-liteand handles classes itself.- Remove React batching imports, including the stale React Native batching deep import. React 18+ renderers handle batching.
The recommended public React binding surface for both packages is:
observerObserveruseLocalObservableenableStaticRenderingisUsingStaticRendering
The following APIs have been removed from the React binding packages:
Provider,inject, andMobXProviderContext; useReact.createContextdirectly.disposeOnUnmount; dispose reactions incomponentWillUnmountor return cleanup functions fromuseEffect.PropTypes; use TypeScript or the regularprop-typespackage.useObserver; wrap components withobserveror use<Observer>.useLocalStore; useuseLocalObservable.useAsObservableSource; synchronize values from props into local observable state explicitly.useStaticRendering; useenableStaticRendering.observerBatching,isObserverBatched,batchingForReactDom,batchingOptOut, andbatchingForReactNative; remove these imports because React 18+ renderers handle batching.- Deprecated
observer(fn, { forwardRef: true }); pass an already-createdReact.forwardRef(...)component toobserverinstead. - Legacy function-component
contextTypeshandling.
Patch Changes
979d267d569734dc3cb969ed1880ed68bb79f1b5#4677 Thanks @kubk! - Shorten minified error URL to reduce production bundle size.