mobxreact

MobX-React, commonly referred to as mobx-react, is a binding library that connects MobX state management with React applications. It enables React components to react to changes in MobX observables by re-rendering automatically when observed data changes. The core feature is the observer function, which wraps a component so that it tracks the observable values used during rendering and re-renders when those values change. The library also provides a Provider component to pass MobX stores through React context, allowing components to access stores without prop drilling.

MobX-React supports both class-based and function components. Historically, it offered an inject higher-order component to supply stores as props, but inject is discouraged in favor of explicit context or hooks. For function components, the ecosystem also includes mobx-react-lite, a lighter binding focused on React hooks, exposing features like observer and useLocalObservable for local state.

Typical usage involves creating one or more MobX stores with observable properties and actions, wrapping the React component tree with a Provider at the top level, and using an observer-wrapped component to render observable data. Access to stores is commonly achieved via React context or, in older patterns, via inject, though modern patterns favor explicit context consumption.

Reactivity in mobx-react is driven by MobX observables and computed values. State mutations should occur inside actions to preserve predictable updates, particularly during render phases. The library continues to be maintained by the MobX team, and its ecosystem encourages using mobx-react-lite for functional components in modern React applications, while mobx-react remains relevant for class components or older codebases.