mobx-react - npm Package Compare versions

Comparing version 3.0.4 to 3.0.5

index.js

@@ -51,2 +51,4 @@ (function() {
                             isRenderingPending = true;
+                            if (typeof self.componentWillReact === "function")
+                                self.componentWillReact();
                             React.Component.prototype.forceUpdate.call(self)
@@ -53,0 +55,0 @@ }

native.js

@@ -51,2 +51,4 @@ (function() {
                             isRenderingPending = true;
+                            if (typeof self.componentWillReact === "function")
+                                self.componentWillReact();
                             React.Component.prototype.forceUpdate.call(self)
@@ -53,0 +55,0 @@ }

package.json

 {
   "name": "mobx-react",
-  "version": "3.0.4",
+  "version": "3.0.5",
   "description": "React bindings for mobx. Create fully reactive components.",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -30,3 +30,3 @@ # mobx-react
 * TodoMVC MobX, React, ES6, JSX, Hot reloading: [MobX-React-TodoMVC](https://github.com/mobxjs/mobx-react-todomvc)
-* Minimal MobX, React, Typescript, TSX: [MobX-React-Typescript](https://github.com/mobxjs/mobx-react-typescript)
+* Minimal MobX, React, Typescript, TSX: [MobX-React-Typescript-Boilerplate](https://github.com/mobxjs/mobx-react-typescript-boilerplate)
 * Minimal MobX, React, ES6(babel), JSPM with hot reloading modules:
@@ -69,2 +69,26 @@ [jspm-react](https://github.com/capaj/jspm-react)
 
+### `componentWillReact` (lifecycle hook)
+
+React components usually render on a fresh stack, so that makes it often hard to figure out what _caused_ a component to re-render.
+When using `mobx-react` you can define a new life cycle hook, `componentWillReact` (pun intended) that will be triggered when a component will be scheduled to re-render because
+data it observes has changed. This makes it easy to trace renders back to the action that caused the rendering.
+
+```javascript
+import {observer} from "mobx-react";
+
+@observer class TodoView extends React.Component {
+    componentWillReact() {
+        console.log("I will re-render, since the todo has changed!");    
+    }
+
+    render() {
+        return <div>this.props.todo.title</div>   
+    }   
+}
+```
+
+* `componentWillReact` doesn't take arguments
+* `componentWillReact` won't fire before the initial render (use `componentWillMount` instead)
+* `componentWillReact` won't fire when receiving new props or after `setState` calls (use `componentWillUpdate` instead)
+
 ## FAQ
@@ -128,2 +152,6 @@
 
+### 3.0.5
+
+Introduced `componentWillReact`
+
 ### 3.0.4
@@ -130,0 +158,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

29932

increased by4.78%

Lines of code

371

increased by1.09%

Number of lines in readme file

272

increased by11.48%

No dependency changes