Repro timing issue.

Author: chrisrichard

package.json

@@ -35,7 +35,9 @@
     "eslint": "^2.13.1",
     "react-hot-loader": "^3.0.0-beta.2",
     "webpack": "^1.13.1",
-    "webpack-dev-server": "^1.14.1"
+    "webpack-dev-server": "^1.14.1",
+    "css-loader": "^0.15.1",
+    "style-loader": "^0.12.3"
   },
   "dependencies": {
     "mobx": "^2.2.2",

src/App.jsx renamed to src/components/App.jsx

@@ -1,15 +1,20 @@
 import React, { Component } from 'react';
 import { observer } from 'mobx-react';
 import DevTools from 'mobx-react-devtools';
+import Something from './Something.jsx';
+import Condition from './Condition.jsx';
 
-@observer
+@observer(['appState'])
 class App extends Component {
   render() {
     return (
       <div>
         <button onClick={this.onReset}>
           Seconds passed: {this.props.appState.timer}
         </button>
+        <Condition>
+          <Something timer={this.props.appState.timer} />
+        </Condition>
         <DevTools />
       </div>
     );

src/components/Condition.jsx

@@ -0,0 +1,12 @@
+import React, { Component } from 'react';
+import { observer } from 'mobx-react';
+
+@observer(['appState'])
+export default class Condition extends Component {
+	render() {
+		return this.props.appState.timer > 3 ?
+			//React.cloneElement(this.props.children) :
+			this.props.children :
+			<span>Nothing</span>;
+	}
+}

src/components/Something.jsx

@@ -0,0 +1,12 @@
+import React, { Component } from 'react';
+import { observer } from 'mobx-react';
+
+@observer
+class Something extends Component {
+  render() {
+    debugger; // this.props.timer is 3 but this doesn't render until the timer value is 4
+    return <span>{this.props.timer}</span>;
+  }
+}
+
+export default Something;

src/index.jsx

@@ -2,24 +2,29 @@ import React from 'react';
 import { render } from 'react-dom';
 import { AppContainer } from 'react-hot-loader';
 import AppState from './AppState';
-import App from './App';
+import App from './components/App';
+import { Provider } from 'mobx-react'
 
 const appState = new AppState();
 
 render(
   <AppContainer>
-    <App appState={appState} />
+    <Provider appState={appState}>
+      <App />
+    </Provider>
   </AppContainer>,
   document.getElementById('root')
 );
 
 if (module.hot) {
-  module.hot.accept('./App', () => {
-    const NextApp = require('./App').default;
+  module.hot.accept('./components/App', () => {
+    const NextApp = require('./components/App').default;
 
     render(
       <AppContainer>
-        <NextApp appState={appState} />
+        <Provider appState={appState}>
+          <NextApp appState={appState} />
+        </Provider>
       </AppContainer>,
       document.getElementById('root')
     );

webpack.config.js

@@ -25,6 +25,10 @@ module.exports = {
       test: /\.jsx?$/,
       loaders: ['babel'],
       include: path.join(__dirname, 'src')
+    }, {
+      test: /\.css$/,
+      loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
+      include: path.join(__dirname, 'src')
     }]
   }
 };