From f7b25c79c8b054b50b44ba80f027bd6f688a6153 Mon Sep 17 00:00:00 2001
From: Andrew Ray <delvarworld@gmail.com>
Date: Fri, 24 Jun 2016 17:50:49 -0700
Subject: [PATCH] Adding repro test case for component lifecycle order

---
 src/examples/Simple/Cube.js  | 35 +++++++++++++++++++++++++++++++++++
 src/examples/Simple/index.js | 25 ++++++++++++++-----------
 2 files changed, 49 insertions(+), 11 deletions(-)
 create mode 100644 src/examples/Simple/Cube.js

diff --git a/src/examples/Simple/Cube.js b/src/examples/Simple/Cube.js
new file mode 100644
index 0000000..ad90a89
--- /dev/null
+++ b/src/examples/Simple/Cube.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import React3 from 'react-three-renderer';
+import THREE from 'three';
+
+class Cube extends React.Component {
+
+  componentWillReceiveProps() {
+    if( window.debuggg ) {
+      console.log('Cube.js componentWillReceiveProps');
+    }
+  }
+
+  render() {
+    if( window.debuggg ) {
+      window.debuggg = false;
+      console.log('Cube.js render');
+    }
+    return (<group>
+      <mesh
+        rotation={this.props.rotation}
+      >
+        <boxGeometry
+          width={1}
+          height={1}
+          depth={1}
+        />
+        <meshBasicMaterial
+          color={0xffff00}
+        />
+      </mesh>
+    </group>);
+  }
+}
+
+export default Cube;
diff --git a/src/examples/Simple/index.js b/src/examples/Simple/index.js
index 12f0c73..b7bbb6a 100644
--- a/src/examples/Simple/index.js
+++ b/src/examples/Simple/index.js
@@ -2,6 +2,8 @@ import React from 'react';
 import React3 from 'react-three-renderer';
 import THREE from 'three';
 
+import Cube from './Cube';
+
 class Simple extends React.Component {
   static propTypes = {
     width: React.PropTypes.number.isRequired,
@@ -36,6 +38,12 @@ class Simple extends React.Component {
     };
   }
 
+  componentDidUpdate() {
+    if( window.debuggg ) {
+      console.log('index.js componentDidUpdate called');
+    }
+  }
+
   render() {
     const {
       width,
@@ -45,6 +53,10 @@ class Simple extends React.Component {
     // or you can use:
     // width = window.innerWidth
     // height = window.innerHeight
+    //
+    if( window.debuggg ) {
+      console.log('index.js wrapper render');
+    }
 
     return (<React3
       mainCamera="camera" // this points to the perspectiveCamera below
@@ -63,18 +75,9 @@ class Simple extends React.Component {
 
           position={this.cameraPosition}
         />
-        <mesh
+        <Cube
           rotation={this.state.cubeRotation}
-        >
-          <boxGeometry
-            width={1}
-            height={1}
-            depth={1}
-          />
-          <meshBasicMaterial
-            color={0x00ff00}
-          />
-        </mesh>
+        />
       </scene>
     </React3>);
   }