- Updated mobx-react-lite to 2.2.0 which removes the need to manually configure batching. Fixes #859
- Fix error thrown in the already defined observer class component warning message when attempting to get the components display name. #887
- Log warning if class component is already an observer to prevent memory leaks. #839
- Fix disposeOnUnmount when using react-hot-loader. #725
- Observer batching imports are kept in production builds as side effects (see issue)
- Remove auto configured observer batching using react-dom. Fixes: #852.
- Updated to latest mobx-react-lite V2 for compatibility with
React.StrictMode
. - Observer batching (see more in the docs).
- Possibly breaking change, the
dist/mobxreact.rn.module.js
is no longer available, usedist/mobxreact.esm.js
instead.
- Fix an issue with class components & observableRequiresReaction. #806 through #829
- Use TSDX for building to mitigate issues with accessing
process.env
#821
- Added check if
process.env
is available, fixes #801 through #812 by @ynejati - Added warning if component's
render
method is accidentally overwritten. #799 by @Venryx. Helps prevent memory leaks as in: #797
- Update dependency [email protected] which includes fix for RN Fast Refresh
- Add reexport of
useObserver
frommobx-react-lite
#734 - Add the ability to pass multiple children to Provider
- Fixed #717. Now
inject
works correctly with components that useReact.forwardRef
- Observer checks for use of React.memo #720
- Get rid of the redundant Injector wrapper #716
- Fixed issue where combining
@disposeOnUnmount
withdisposeOnUnmount
didn't clean up everything. Fixes #666 trough #671 by @JabX
- Restored the classic implementation of
observer
: class based components are patched again, rather than wrapping them in<Observer>
, see #703. Fixes:componentDidUpdate
not being triggered after a reactive render #692- The appearance of an additional
<Observer>
component in the component tree, which complicates shallow testing #699 - Some regressions in
disposeOnUnmount
#702 - Note that dev tool support, and other constraints mentioned in the 6.0.0 release notes have not been restored.
- The function
useStaticRendering(value: boolean): void
from mobx-react-lite is now exposed
- Fixed IE 11 compatibility which was accidentally broken. Fixes #698
disposeOnUnmount
now supports initializing it with an array of disposers. Fixes #637 through #641 by @Amareis- Fixed hoisting of statically declared members. Fixes #678 through #682 by @meabed
- Added missing types for
MobXProviderContext
,useLocalStore
anduseAsObservableSource
. Fixes #679.
Breaking changes
- The minimal supported version of React is 16.8.0
- Killed the possibility to directly pass store names to
observer
. Always useinject
instead. (This was deprecated for a long time already).observer(["a", "b"], component)
should now be written asinject("a", "b")(component)
. observer
components no longer automatically recover from errors (to prevent potential memory leaks). Instead, this is the responsibility of error boundaries.inject
now supports ref forwarding. As such, the.wrappedInstance
property has been removed since refs can be used instead. (Fixes #616 (See also #619 by 42shadow42)- Changing the set of stores in
Provider
is no longer supported and while throw a hard error (this was a warning before), as the model ofProvider
/inject
has always been designed to inject final values into the tree. (That is, constanted references, the injected objects themselves can be stateful without problem). If you want to dynamically swap what is provided into the tree, useReact.createContext
instead ofProvider
/inject
. The suppressChangedStoreWarningflag for
Provider` has been dropped. - The third argument of custom
storesToProps
functions passed toinject
is no longer available. <Observer>
no longer supports the deprecatedinject
property.- Defining
shouldComponentUpdate
onobserver
based components is no longer supported propTypes
is no longer exposed, usePropTypes
insteaddisposeOnUnmount
now only supports direct subclasses ofReact.Component
andReact.PureComponent
. This prevents several unreliable edge cases that silently leaked memory before. Either only extend React.(Pure)Component when usingdisposeOnUnmount
, or manually clean up stuff incomponentWillUnmount
.- The
onError
global error handler has been removed. Use error boundaries instead. - Improved dev tool names for
inject
wrapped components, see #472 by SimeonC. Fixes #466 - Dropped support for a build of mobx-react that doesn't target either
react-dom
orreact-native
. mobx-react doesn't needreact-dom
to be present, but to make sure your build tools don't fail, you might want to stubreact-dom
as an empty module. - The
componentWillReact
has been dropped - The MobX-react devtools (either as package or browser plugin) are no longer supported. Instead, the following tools can be analyzed to analyze your mobx-react application:
- Visualizing re-rendering of components is now part of the standard React devtools
- The dependency tree of a compent tree can be inspected by showing the state of the
useObserver
hook in the React devtools (at the time of this release it displays as justObject
, but the next iteration of the React devtools will support those properly) - Spying on events can still be done with the MobX-react browser plugin, through the mobx-logger package or manually by using the
spy
ortrace
utility from the mobx package.
Improvements
- Hook based components are now supported by mobx-react (in fact, the package is now implemented using hooks)
- Class based
observer
components are now recommended to extendReact.PureComponent
. Functionalobserver
components are now automatically wrapped inReact.memo
internally. See section in README for more details. - For
observer
based components, there will now be an additionalObserver
component in the tree. - Two new hooks have been exposed, in case you want to manage local state in observable:
useLocalStore
anduseAsObservableSource
. MobXProviderContext
is now exposed from the package, in case you want to consume the context used byProvider
with auseContext
hook.
- Fixed #612,
contextType
was hoisted byinject
, which shouldn't the case.
- Fixed issue where
react-is
wasn't properly rolled-up into the package. Fixes #608
- Added support for forward refs, fixes #602
- Fixed some additional issues around life-cycle patching, take 3. See #536 by @xaviergonz. Fixed #579
- Fixed some additional issues around life-cycle patching, see #583 by @xaviergonz. Fixed #581
- Fixed unending recursing as a result of lifecylce patching. Fixes #579 through #582 by @xaviergonz
- Fixed
Cannot read property 'forEach' of undefined
exception ifdisposeOnUnmount
was called conditionally. #578 by Jef Hellemans
- Fixed: "process not defined", #574 through #576 by @xaviergonz
5.3.0 was retracted as files were not generated correctly during publish
- Added
disposeOnUnmount
utility / decorator to call disposable properties (reaction, autorun, etc) automatically oncomponentWillUnmount
- Introduced new method to patch lifecycle methods which should be more compatible with for example arrow functions.
- Make sure
mobx-react
doesn't requireObject.assign
polyfill
- Fixed issue where React 16.5 printed a warning when using
Provider
, fixes #545
- Fixed bug in defining properties (although the bug had no known observable effect). Fixes #540
- Component
props
andstate
properties are now made observable during the instance creation. This restores the behavior from before 5.1.0 whereprops
andstate
could safely be observed during mount. Actually it is now possible to do similar things in constructors as well. Fixes #478. Thanks @Strate for the idea and PR! #496.
- Added backward compatible support for MobX 5.
- Fixed components sometimes being displayed as
undefined
in mobx-devtools. See #470 by @MauricioAndrades - Removed unnecessary warning
@observer
was used both on a sub and super class. See #492 by @skiritsis. N.B. putting@observer
on a super and subclass is still not an supported pattern, use @observer on subclasses only!
- Fixed regression bug in integration with devtools. Fixed through #465 by @le0nik
- Added support for React 16.3, including support for the
getDerivedStateFromProps
life-cycle hook. MobX will no longer usecomponentWillMount
hook internally, so that it can be used inStrictMode
react as well. Fixes #447 - Static properties of a function component are now automatically hoisted when the component is wrapped by
observer
. Implements #427 - Misspelled export
componentByNodeRegistery
is now properly export ascomponentByNodeRegistry
as well, please update consumers, the mispelled version will be dropped in the next major. Fixes #421 - Deprecated the support for the
inject
property onObserver
, it is fundamentally broken and should not be used. Useinject
on the enclosing component instead and grab the necessary stores from the closure. Fixes #423 - Added warning about using
observer
on a React.PureComponent, this will become an exception in the next major. Fixes #309 - Mobx-react will now print a warning when combining
observer
with a customshouldComponentUpdate
implementation. Fixes #417
- Added compatibility with MobX 4.x. This version is not compatible with older Mobx versions
- The exposed React Native build now uses commonjs, to prevent the need of further transpilation. Fixes #428
- Fixed issue with mobx-react not compiling on react-native due to the presence of a
.babelrc
file. Fixes #415 by Ryan Rampersad through #416
- Fixed syntax error in 4.4.0 that escaped
Observer
now supports render props,render
andinject
. See the updated readme. By ZiYingMai through #403- Fixed:
NaN
is now considered to be equal toNaN
when doing reconciliation. Fixes #363, by Andrew Branch through #402 - Improved typings of
Observer
component, by Rafał Filipek through #376 - Fixed incorrect generation of component name, by Andy Kogut through #368
- Lot of internal repo upgrades: Test suite is now in Jest, Prettier is used etc.
Fixed some issues with the typescript typings. See for example #353
Improved typescript typings, including support for strict
mode in TS 2.6. Fixes
Added support for React 16. (No changes)
Killed accidentally exposed default exports.
If you are still using import mobxReact from "mobx-react"
, use import * as mobxReact from "mobx-react"
, or better import { whatYouNeed } from "mobx-react"
instead.
Improved module rollup setup, enabling better tree shaking. See #324 / #328
- Fixed check for stateless components, by @leader22, see #280
Note: Due to pull / rebase issue the release commit is incorrect. This is the released commit
- Reduced module size by 31% (switched to rollup.js). See #244 by @rossipedia
- Skip creation of
.wrappedInstance
reference for stateless components. See #254 by @farwayer - Introduced global
onError
handler hook to be notified on errors thrown by@observer
components. See #262 by @andykog - Improved typescript typings of the exposed
propTypes
, See #263 by @panjiesw
- Same as 4.2.1, but contained build issue and is unpublished
- Undid change introduced in 4.1.4 where the lifecycle hooks were protected, as this breaks react-hot-loader.... Fixes #231
- Added support for React 15.5 (no deprecation warnings) and 16.0 (no proptypes / createClass), by @andykog, see #238. Fixes #233, #237
- Improved typescript typings, fixes #223
- Made lifecycle hooks used by mobx-react read-only to make sure they are not accidentally overwritten in component instances. Fixes, #195, #202. Note that they can still be defined, just make sure to define them on the prototype (
componentWillMount() {}
) instead of the instance (componentWillMount = () => {}
). Which is best practice anyway.
- Fixed
ReactDOM.findDOMNode
exception when using react-test-runner, #216
- Exceptions caught during render are now rethrown with proper stack, fixes #206
- Exposed
wrappedInstance
andwrappedComponent
in typings - Fixed accidental use of
default
import frommobx
package.
- Added support for MobX3. Note that using MobX3 changes the error semantics. If an
observer
component throws, it will no longer crash the app, but just log the exceptions instead.
- Introduced
suppressChangedStoreWarning
to optionally supresss change store warnings, by @dropfen, see #182, #183
- Fixed issue where userland componentWilMount was run before observer componentWillMount
- Fixed order of
inject
overloads, see #169 - Fixed import of
mobx
when using Webpack without commonjs plugin, see: #168
- Improved typings, by @timmolendijk, fixes #164, #166
- Fixed
inject
signature in readme, by @farwayer
observer
used to compare all properties shallow in the built-in shouldComponentUpdate, except when it received
non-observable data structures.
Because mobx-react cannot know whether a non observable has been deeply modified, it took no chances and just re-renders.
However, the downside of this when an unchanged, non-observable object is passed in to an observer component again, it would still cause a re-render. Objects such as styling etc. To fix this mobx-react will now always compare all properties in a pure manner. In general this should cause no trouble, as typically mutable data in mobx based objects is captured in observable objects, which will still cause components to re-render if needed.
If you need to pass in a deeply modified object and still want to make sure to cause a re-render, either
- make sure the object / array is an observable
- do not decorate your component with
observer
, but useObserver
regions instead (see below)
See #160 for more details.
inject(func)
is now reactive as well, that means that transformations in the selector function will be tracked, see #111
const NameDisplayer = ({ name }) => <h1>{name}</h1>
const UserNameDisplayer = inject(stores => ({
name: stores.userStore.name
}))(NameDisplayer)
const user = mobx.observable({
name: "Noa"
})
const App = () => (
<Provider userStore={user}>
<UserNameDisplayer />
</Provider>
)
ReactDOM.render(<App />, document.body)
N.B. note that in this specific case NameDisplayer doesn't have to be an observer
, as it doesn't receive observables, but just plain data from the transformer function.
A common cause of confusion were cases like:
@observer class MyComponent() {
@computed upperCaseName() {
return this.props.user.name.toUpperCase()
}
render() {
return <h1>{this.upperCaseName}</h1>
}
}
This component would re-render if user.name
was modified, but it would still render the previous user's name if a complete new user was received!
The reason for that is that in the above example the only observable tracked by the computed value is user.name
, but not this.props.user
.
So a change to the first would be picked up, but a change in props
itself, assigning a new user, not.
Although this is technically correct, it was a source of confusion.
For that reason this.state
and this.props
are now automatically converted to observables in any observer
based react component.
For more details, see #136 by @Strate
Introduced useStaticRendering(boolean)
to better support server-side rendering scenarios. See #140
This feature is still experimental and might change in the next minor release, or be deprecated
Introduced Observer
. Can be used as alternative to the observer
decorator. Marks a component region as reactive.
See the Readme / #138
Example:
const UserNameDisplayer = ({ user }) => <Observer>{() => <div>{user.name}</div>}</Observer>
The fact that observer
could inject stores as well caused quite some confusion.
Because in some cases observer
would return the original component (when not inject), but it would return a HoC when injecting.
To make this more consistent, you should always use inject
to inject stores into a component. So use:
@inject("store1", "store2") @observer
class MyComponent extends React.Component {
or:
const MyComponent = inject("store1", "store2")(observer(props => rendering))
For more info see the related discussion
- If
mobx
andmobx-react
are used in combination, all reactions are run as part of React's batched updates. This minimizes the work of the reconciler, guarantees optimal rendering order of components (if the rendering was not triggered from within a React event). Tnx @gkaemmer for the suggestion. - It is now possible to directly define
propTypes
anddefaultProps
on components wrapped withinject
(orobserver(["stores"])
) again, see #120, #142. Removed the warnings for this, and instead improved the docs. - Clean up data subscriptions if an error is thrown by an
observer
component, see #134 by @andykog - export
PropTypes
as well in typescript typings, fixes #153 - Add react as a peer dependency
- Added minified browser build:
index.min.js
, fixes #147 - Generate better component names when using
inject
- Print warning when
inject
andobserver
are used in the wrong order, see #146, by @delaetthomas
- Fixed issue where
props
where not passed properly to components in very rare cases. Also fixed #115
- Bundles are no longer minified, fixes #127
- Export
propTypes
asPropTypes
, like React (@andykog, ##117)
- Removed
experimental
status ofinject
/Provider
. Official feature now. - Fixed hot-reloading issue, #101
- Introduced
wrappedInstance
by @rossipedia oninject
decorated HOC's, see mobxjs#90 - print warnings when assign values to
propTypes
,defaultProps
, orcontextTypes
of a HOC. (by @jtraub, see mobxjs#88) - Static properties are now hoisted to HoC components when, #92
- If
inject
is used incombination with a function, the object return from the function will now be merged into thenextProps
instead of replacing them, #80 - Always do propType checking untracked, partially fixes #56, #305
- Fixed error
Cannot read property 'renderReporter' of undefined
(#96)
- Added propTypes.observableArrayOf and propTypes.arrayOrObservableArrayOf (#91)
- Fixed regression #85, changes caused by the constructor results in inconsistent rendering (N.B.: that is un-idiomatic React usage and React will warn about this!)
- Introduced
inject("store1", "store2")(component)
as alternative syntax to inject stores. Should address #77, #70 - Introduced the
wrappedComponent
property on injected higher order components, addresses #70, #72 - Fixed #76: error when no stores are provided through context
- Added typings for devTools related features (@benjamingr).
- Added MobX specific propTypes (@mattruby)
- Merged #44, fixes #73: don't re-render if component was somehow unmounted
- Introduced
Provider
/ context support (#53 / MobX #300) - Fixed issues when using devtools with IE. #66 (By @pvasek)
- Added typescript typings form
mobx-react/native
andmobx-react/custom
- Fixed #63: error when using stateless function components when using babel and typescript
- Upgraded to MobX 2.2.0
- Added support for react-native 0.25 and higher. By @danieldunderfelt.
- Added support for custom renderers (without DOM), use:
mobx-react/custom
as import fixes #42 - Fixed some issues with rollup #43
- Minor optimization
Introduced componentWillReact
The debug name stateless function components of babel transpiled jsx are now properly picked up if the wrapper is applied after defining the component:
const MyComponent = () => <span>hi</span>
export default observer(MyComponent)
Removed peer dependencies, React 15 (and 0.13) are supported as well. By @bkniffler
Removed the warning introduced in 3.0.1. It triggered always when using shallow rendering (when using shallow rendering componentDidMount
won't fire. See facebook/react#4919).
Added warning when changing state in getInitialState
/ constructor
.
Upgraded to MobX 2.0.0
Improved typescript typings overloads of observer
Added empty 'dependencies' section to package.json, fixes #26
Added support for context to stateless components. (by Kosta-Github).
Fixed #12: fixed React warning when a component was unmounted after scheduling a re-render but before executing it.
Upped dependency of mobx to 1.1.1.
It is now possible to define propTypes
and getDefaultProps
on a stateless component:
const myComponent = props => {
// render
}
myComponent.propTypes = {
name: React.PropTypes.string
}
myComponent.defaultProps = {
name: "World"
}
export default observer(myComponent)
All credits to Jiri Spac for this contribution!
Use React 0.14 instead of React 0.13. For React 0.13, use version [email protected]
or higher.
Minor fixes and improvements
Fixed issue with typescript typings. An example project with MobX, React, Typescript, TSX can be found here: https://github.com/mobxjs/mobx-react-typescript
reactiveComponent
has been renamed to observer
Added separte import for react-native: use var reactiveComponent = require('mobx-react/native').reactiveComponent
for native support; webpack clients will refuse to build otherwise.
Added react-native as dependency, so that the package works with either react
or react-native
.
Upgraded to MobX 0.7.0
Fixed issue where Babel generated component classes where not properly picked up.
observer
now accepts a pure render function as argument, besides constructor function. For example:
var TodoItem = observer(function TodoItem(props) {
var todo = props.todo
return <li>{todo.task}</li>
})
observer is now defined in terms of side effects.
Added support for React 0.14(RC) by dropping peer dependency