MobX 7.0.0

7.0.0
Changed 3
  • 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
Removed 16
  • 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
Deprecated 1
  • 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-lite for function components and mobx-react for 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 for observable, observable.object, and observable.array are no longer supported.
    • Legacy decorators are no longer supported.
    • Namespaced annotation and comparer properties now use named exports to reduce bundle size:
    Removed APIReplacement
    observable.refobservableRef
    observable.shallowobservableShallow
    observable.deepobservableDeep
    observable.structobservableStruct
    computed.structcomputedStruct
    action.boundactionBound
    flow.boundflowBound
    comparer.identitycompareIdentity
    comparer.defaultcompareDefault
    comparer.structuralcompareStructural
    comparer.shallowcompareShallow
    • The public trace API and its related runtime support have been removed. Use toJS, getDependencyTree, getObserverTree, spy or mobx-log package 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-lite remains the function-component package. mobx-react remains a thin wrapper around mobx-react-lite that adds class component and Stage 3 @observer class decorator support.

    • Keep function-component imports on mobx-react-lite if you do not need class component support.
    • Use mobx-react when you need class components or @observer class decorators.
    • mobx-react-lite supports function components and forwardRef; mobx-react delegates function components to mobx-react-lite and 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:

    • observer
    • Observer
    • useLocalObservable
    • enableStaticRendering
    • isUsingStaticRendering

    The following APIs have been removed from the React binding packages:

    • Provider, inject, and MobXProviderContext; use React.createContext directly.
    • disposeOnUnmount; dispose reactions in componentWillUnmount or return cleanup functions from useEffect.
    • PropTypes; use TypeScript or the regular prop-types package.
    • useObserver; wrap components with observer or use <Observer>.
    • useLocalStore; use useLocalObservable.
    • useAsObservableSource; synchronize values from props into local observable state explicitly.
    • useStaticRendering; use enableStaticRendering.
    • observerBatching, isObserverBatched, batchingForReactDom, batchingOptOut, and batchingForReactNative; remove these imports because React 18+ renderers handle batching.
    • Deprecated observer(fn, { forwardRef: true }); pass an already-created React.forwardRef(...) component to observer instead.
    • Legacy function-component contextTypes handling.
Patch Changes
View original

Upgraded? How did it go?

Discussion