mobx-react-lite

Patch Changes

• ec1b708026c1578e1c1f6c7bd90be18b26f7ce85 #4695 Thanks @gesposito! - perf: evaluate NODE_ENV once at module scope in the env-agnostic esm bundles (dist/<pkg>.esm.js and dist/<pkg>.mjs) instead of at every __DEV__ call site. process.env is an exotic object in Node, so each check performed a real environment lookup on hot paths; consumers that execute these files as-is (Node ESM, vitest, SSR) see roughly 10x faster observable writes in dev mode. All env-set artifacts and bundler output are unchanged.

Patch Changes

• 043850ed96266f8bea42bf643a65e62245a98b3c #4689 Thanks @gesposito! - fix: useObserver no longer retains the element tree returned by a component's first render for the component's whole mounted life. subscribe/getSnapshot were created inside useObserver's first invocation and therefore shared that invocation's closure context with the reaction.track callback's captures (render, renderResult); since React's useSyncExternalStore holds subscribe while the component is mounted, the first render result (and every fiber and DOM node reachable from it) could never be garbage collected. The administration object is now created by a module-level factory whose scope contains nothing render-related.

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 API	Replacement
  observable.ref	observableRef
  observable.shallow	observableShallow
  observable.deep	observableDeep
  observable.struct	observableStruct
  computed.struct	computedStruct
  action.bound	actionBound
  flow.bound	flowBound
  comparer.identity	compareIdentity
  comparer.default	compareDefault
  comparer.structural	compareStructural
  comparer.shallow	compareShallow

  • 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

• 2e703388eda4ba3eefed2bf1f5ca3958980978c3 #4584 Thanks @mweststrate! - Fix type definition of observer, when used in combination with a Higher Order Component. By @mbest in #4576

Minor Changes

• 2587df31a1a967a6b385b7ab2d9f0d42fc94e4b0 #3985 Thanks @imjordanxd! - * Added React 19 support, fixes #3986

Patch Changes

• 61abc53f #3852 Thanks @mweststrate! - Patched the release process, forcing release to get everything in pristine state.

• 7bbb523a #3842 Thanks @r0b1n! - Prevent warnings when using mobx-react-lite with Rollup

Patch Changes

• b970cbb4 #3830 Thanks @dmitrytavern! - fix #3826: components make two renders because of the different state of the snapshots

• 1b8ab199 #3831 Thanks @kitsuned! - fix: ensure observer component name is only set when configurable

Patch Changes

• 87e5dfb5 #3763 Thanks @mweststrate! - Switched observer implementation from using global to local state version. Fixes #3728

Patch Changes

• 3ceeb865 #3732 Thanks @urugator! - fix: #3734: isolateGlobalState: true makes observer stop to react to store changes

Patch Changes

• 58bb052c #3670 Thanks @urugator! - fix #3669: SSR: useSyncExternalStore throws due to missing getServerSnapshot

• 473cb3f5 #3718 Thanks @mweststrate! - - Fixed observer in StrictMode #3671
  • [BREAKING CHANGE] Class component's props/state/context are no longer observable. Attempt to use these in any derivation other than component's render throws and error. For details see https://github.com/mobxjs/mobx/blob/main/packages/mobx-react/README.md#note-on-using-props-and-state-in-derivations
  • Extending or applying observer classes is now explicitly forbidden

Patch Changes

• f86df867 #3667 Thanks @tony! - Fix package dependency for use-sync-external-store.

Patch Changes

• 8e58fa95 #3664 Thanks @mweststrate! - (Hopefully) fixed release process for mobx-react-lite

Patch Changes

• dfeb1f5d #3651 Thanks @urugator! - fix #3650 regression clearTimers -> clearTimes

Patch Changes

• 7acaf305 #3645 Thanks @urugator! - fix FinalizationRegistry support check #3643

Patch Changes

• 4ef8ff3f #3598 Thanks @urugator! - refactor reaction tracking

Minor Changes

• 4c5e75cd #3382 Thanks @iChenLei! - replace the deprecated react type definition with recommended type definition

• bd4b70d8 #3387 Thanks @mweststrate! - Added experimental / poor man's support for React 18. Fixes #3363, #2526. Supersedes #3005

  • Updated tests, test / build infra, peerDependencies to React 18
  • [breaking icmw upgrading to React 18] Already deprecated hooks like useMutableSource will trigger warnings in React 18, which is correct and those shouldn't be used anymore.
  • [breaking icmw upgrading to React 18] When using React 18, it is important that act is used in unit tests around every programmatic mutation. Without it, changes won't propagate!
  • The React 18 support is poor man's support; that is, we don't do anything yet to play nicely with Suspense features. Although e.g. startTransition basically works, MobX as is doesn't respect the Suspense model and will always reflect the latest state that is being rendered with, so tearing might occur. I think this is in theoretically addressable by using useSyncExternalStore and capturing the current values together with the dependency tree of every component instance. However that isn't included in this pull request 1) it would be a breaking change, whereas the current change is still compatible with React 16 and 17. 2) I want to collect use cases where the tearing leads to problems first to build a better problem understanding. If you run into the problem, please submit an issue describing your scenario, and a PR with a unit tests demonstrating the problem in simplified form. For further discussion see #2526, #3005

Minor Changes

• 59b42c28 #3282 Thanks @urugator! - support observable(forwardRef(fn)), deprecate observable(fn, { forwardRef: true }), solve #2527, #3267

Patch Changes

• 4887d200 #3192 Thanks @urugator! - Support customizing displayName on anonymous components #2721.

Patch Changes

• 2dcfec09 #3172 Thanks @urugator! - support legacy context

Patch Changes

• 320544a5 #2983 Thanks @urugator! - Allow force update to be called infinitely times

• 10c762cc #2995 Thanks @Bnaya! - Reduce useObserver gc pressure

Patch Changes

• Updated dependencies [28f8a11d]:
  • mobx@6.1.0

Patch Changes

• 592e6e99 #2743 Thanks @vkrol! - Remove sideEffects section in mobx-react-lite package.json

• Updated dependencies [6b304232, 83b84fd3, 65c7b73b, 989390d4, dea1cf18, 592e6e99]:

  • mobx@6.0.5

Patch Changes

• 2f3dcb27 Thanks @FredyC! - Fix names of UMD exports #2517

• Updated dependencies [79a09f49]:

  • mobx@6.0.4

Patch Changes

• 01a050f7 Thanks @FredyC! - Fix use of react-dom vs react-native

  The es folder content is compiled only without transpilation to keep utils/reactBatchedUpdates which exists in DOM and RN versions. The bundled esm is still kept around too, especially the prod/dev ones that should be utilized in modern browser environments.

Patch Changes

• 8bbbc7c0 Thanks @FredyC! - Fix names of dist files (for real now). Third time is the charm 😅

Patch Changes

• b7aa9d35 Thanks @FredyC! - Fixed wrong package name for dist files

Patch Changes

• 5239db80 Thanks @FredyC! - Fixed release with missing dist files

Patch Changes

• 81a2f865 Thanks @FredyC! - ESM bundles without NODE_ENV present are available in dist folder. This useful for consumption in browser environment that supports ESM Choose either esm.production.min.js or esm.development.js from dist folder.

Minor Changes

• a0e5fea #329 Thanks @RoystonS! - expose clearTimers function to tidy up background timers, allowing test frameworks such as Jest to exit immediately

Patch Changes

• fafb136 #332 Thanks @Bnaya! - Introduce alternative way for managing cleanup of reactions. This is internal change and shouldn't affect functionality of the library.

Patch Changes

• 570e8d5 #328 Thanks @mweststrate! - If observable data changed between mount and useEffect, the render reaction would incorrectly be disposed causing incorrect suspension of upstream computed values

• 1d6f0a8 #326 Thanks @FredyC! - No important changes, just checking new setup for releases.

Prior 3.0.0 see GitHub releases for changelog