mobx-react 6.1.1 → 6.1.5

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # MobX-React Changelog
 
+### 6.1.5
+
+- Added check if `process.env` is available, fixes [#801](https://github.com/mobxjs/mobx-react/issues/801) through [#812](https://github.com/mobxjs/mobx-react/pull/812) by [@ynejati](https://github.com/ynejati)
+- Added warning if component's `render` method is accidentally overwritten. [#799](https://github.com/mobxjs/mobx-react/pull/799) by [@Venryx](https://github.com/Venryx). Helps prevent memory leaks as in: [#797](https://github.com/mobxjs/mobx-react/issues/797)
+
+### 6.1.4
+
+-   Update dependency mobx-react-lite@1.4.2 which includes fix for [RN Fast Refresh](https://github.com/mobxjs/mobx-react-lite/issues/226)
+
+### 6.1.2 / 6.1.3
+
+-   Add reexport of `useObserver` from `mobx-react-lite` [#734](https://github.com/mobxjs/mobx-react/issues/734)
+-   Add the ability to pass multiple children to Provider
+-   Fixed [#717](https://github.com/mobxjs/mobx-react/issues/717). Now `inject` works correctly with components that use `React.forwardRef`
+-   Observer checks for use of React.memo [#720](https://github.com/mobxjs/mobx-react/issues/720)
+-   Get rid of the redundant Injector wrapper [#716](https://github.com/mobxjs/mobx-react/pull/716)
+
 ### 6.1.1
 
 -   Fixed issue where combining `@disposeOnUnmount` with `disposeOnUnmount` didn't clean up everything. Fixes [#666](https://github.com/mobxjs/mobx-react/issues/666) trough [#671](https://github.com/mobxjs/mobx-react/pull/671) by [@JabX](https://github.com/JabX)
@@ -52,7 +69,7 @@
 **Improvements**
 
 -   Hook based components are now supported by mobx-react (in fact, the package is now implemented using hooks)
--   Using `PureComponent` is now _recommended_.
+-   Using `PureComponent` is now _recommended_ for class-based components or `React.memo` for functional ones.
 -   For `observer` based components, there will now be an additional `Observer` component in the tree.
 -   Two new hooks have been exposed, in case you want to manage local state in observable: `useLocalStore` and `useAsObservableSource`.
 -   `MobXProviderContext` is now exposed from the package, in case you want to consume the context used by `Provider` with a `useContext` hook.
@@ -136,12 +153,12 @@ _5.3.0 was retracted as files were not generated correctly during publish_
 
 ### 5.1.0
 
--   Added support for React 16.3, including support for the `getDerivedStateFromProps` life-cycle hook. MobX will no longer use `componentWillMount` hook internally, so that it can be used in `StrictMode` react as well. Fixes [#447](https://github.com/mobx/mobx-react/447)
--   Static properties of a function component are now automatically hoisted when the component is wrapped by `observer`. Implements [#427](https://github.com/mobx/mobx-react/427)
--   Misspelled export `componentByNodeRegistery` is now properly export as `componentByNodeRegistry` as well, please update consumers, the mispelled version will be dropped in the next major. Fixes [#421](https://github.com/mobx/mobx-react/421)
--   Deprecated the support for the `inject` property on `Observer`, it is fundamentally broken and should not be used. Use `inject` on the enclosing component instead and grab the necessary stores from the closure. Fixes [#423](https://github.com/mobx/mobx-react/423)
--   Added warning about using `observer` on a React.PureComponent, this will become an exception in the next major. Fixes [#309](https://github.com/mobx/mobx-react/309)
--   Mobx-react will now print a warning when combining `observer` with a custom `shouldComponentUpdate` implementation. Fixes [#417](https://github.com/mobx/mobx-react/417)
+-   Added support for React 16.3, including support for the `getDerivedStateFromProps` life-cycle hook. MobX will no longer use `componentWillMount` hook internally, so that it can be used in `StrictMode` react as well. Fixes [#447](https://github.com/mobxjs/mobx-react/issues/447)
+-   Static properties of a function component are now automatically hoisted when the component is wrapped by `observer`. Implements [#427](https://github.com/mobxjs/mobx-react/pull/427)
+-   Misspelled export `componentByNodeRegistery` is now properly export as `componentByNodeRegistry` as well, please update consumers, the mispelled version will be dropped in the next major. Fixes [#421](https://github.com/mobxjs/mobx-react/issues/421)
+-   Deprecated the support for the `inject` property on `Observer`, it is fundamentally broken and should not be used. Use `inject` on the enclosing component instead and grab the necessary stores from the closure. Fixes [#423](https://github.com/mobxjs/mobx-react/issues/423)
+-   Added warning about using `observer` on a React.PureComponent, this will become an exception in the next major. Fixes [#309](https://github.com/mobxjs/mobx-react/issues/309)
+-   Mobx-react will now print a warning when combining `observer` with a custom `shouldComponentUpdate` implementation. Fixes [#417](https://github.com/mobxjs/mobx-react/issues/417)
 
 ### 5.0.0
 

package/README.md

@@ -7,6 +7,7 @@
 Package with React component wrapper for combining React with MobX.
 Exports the `observer` decorator and other utilities.
 For documentation, see the [MobX](https://mobxjs.github.io/mobx) project.
+There is also work-in-progress [user guide](https://mobx-react.js.org) for additional information.
 This package supports both React and React Native.
 
 ## Choosing your version
@@ -18,6 +19,8 @@ There are currently two actively maintained versions of mobx-react:
 | v6          | 16.8.0 and higher        | Yes                                                                              |
 | v5          | 0.13 and higher          | No, but it is possible to use `<Observer>` sections inside hook based components |
 
+The user guide covers this [in a more detail](https://mobx-react.js.org/libraries). 
+
 The V5 documentation can be found in the [README_v5](README_v5.md).
 
 Both mobx-react 5 and 6 are compatible with mobx 4 and 5
@@ -103,7 +106,7 @@ class App extends React.Component {
 
 const person = observable({ name: "John" })
 
-React.render(<App person={person} />, document.body)
+ReactDOM.render(<App person={person} />, document.body)
 person.name = "Mike" // will cause the Observer region to re-render
 ```
 
@@ -124,12 +127,14 @@ class App extends React.Component {
 
 const person = observable({ name: "John" })
 
-React.render(<App person={person} />, document.body)
+ReactDOM.render(<App person={person} />, document.body)
 person.name = "Mike" // will cause the Observer region to re-render
 ```
 
 ### `useLocalStore` hook
 
+[User guide](https://mobx-react.js.org/state-local)
+
 Local observable state can be introduced by using the `useLocalStore` hook, that runs once to create an observable store. A quick example would be:
 
 ```javascript
@@ -164,6 +169,8 @@ _Note: using `useLocalStore` is mostly beneficial for really complex local state
 
 ### `useAsObservableSource` hook
 
+[User guide](https://mobx-react.js.org/state-outsourcing)
+
 The `useAsObservableSource` hook can be used to turn any set of values into an observable object that has a stable reference (the same object is returned every time from the hook).
 The goal of this hook is to trap React primitives such as props or state (which are not observable themselves) into a local, observable object
 so that the `store` or any reactions created by the component can safely refer to it, and get notified if any of the values change.
@@ -255,6 +262,8 @@ Use `import { PropTypes } from "mobx-react"` to import them, then use for exampl
 
 ### `Provider` and `inject`
 
+See also [the migration guide to React Hooks](https://mobx-react.js.org/recipes-migration).
+
 _Note: usually there is no need anymore to use `Provider` / `inject` in new code bases; most of its features are now covered by `React.createContext`._
 
 `Provider` is a component that can pass stores (or other stuff) using React's context mechanism to child components.
@@ -299,10 +308,13 @@ Notes:
 
 -   It is possible to read the stores provided by `Provider` using `React.useContext`, by using the `MobXProviderContext` context that can be imported from `mobx-react`.
 -   If a component asks for a store and receives a store via a property with the same name, the property takes precedence. Use this to your advantage when testing!
--   Values provided through `Provider` should be final, to avoid issues like mentioned in [React #2517](https://github.com/facebook/react/issues/2517) and [React #3973](https://github.com/facebook/react/pull/3973), where optimizations might stop the propagation of new context. Instead, make sure that if you put things in `context` that might change over time, that they are `@observable` or provide some other means to listen to changes, like callbacks. However, if your stores will change over time, like an observable value of another store, MobX will warn you. To suppress that warning explicitly, you can use `suppressChangedStoreWarning={true}` as a prop at your own risk.
 -   When using both `@inject` and `@observer`, make sure to apply them in the correct order: `observer` should be the inner decorator, `inject` the outer. There might be additional decorators in between.
 -   The original component wrapped by `inject` is available as the `wrappedComponent` property of the created higher order component.
 
+#### "The set of provided stores has changed" error
+Values provided through `Provider` should be final. Make sure that if you put things in `context` that might change over time, that they are `@observable` or provide some other means to listen to changes, like callbacks. However, if your stores will change over time, like an observable value of another store, MobX will throw an error.
+This restriction exists mainly for legacy reasons. If you have a scenario where you need to modify the set of stores, please leave a comment about it in this issue https://github.com/mobxjs/mobx-react/issues/745. Or a preferred way is to [use React Context](https://mobx-react.js.org/recipes-context) directly which does not have this restriction.
+
 #### Inject as function
 
 The above example in ES5 would start like:
@@ -429,6 +441,8 @@ public render() {
 }
 ```
 
+By [migrating to React Hooks](https://mobx-react.js.org/recipes-migration) you can avoid problems with TypeScript.
+
 #### Testing store injection
 
 It is allowed to pass any declared store in directly as a property as well. This makes it easy to set up individual component tests without a provider.

package/dist/mobx-react.d.ts

@@ -3,7 +3,13 @@
  */
 import * as React from "react"
 
-export { useAsObservableSource, useLocalStore, IObserverOptions, Observer } from "mobx-react-lite"
+export {
+    useObserver,
+    useAsObservableSource,
+    useLocalStore,
+    IObserverOptions,
+    Observer
+} from "mobx-react-lite"
 
 export type IReactComponent<P = any> =
     | React.StatelessComponent<P>