Prevent unnecessary re-render from long polling

Performs an `isEqual` on data from GET with current emails state

Author: benmvp

04-polling/README.md

@@ -16,3 +16,4 @@ Go to [Step 5 - Email View](https://github.com/benmvp/react-workshop/tree/master
 ## Resources
 
 - [Lifecycle methods](https://facebook.github.io/react/docs/component-specs.html#lifecycle-methods)
+- [lodash Documentation](https://lodash.com/docs)

04-polling/src/containers/App.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import isEqual from 'lodash/isEqual';
 import 'whatwg-fetch';
 
 import EmailList from '../components/EmailList';
@@ -39,7 +40,16 @@ export default class EmailApp extends React.Component {
     _getUpdateEmails() {
         return fetch('http://localhost:9090/emails')
             .then((res) => res.json())
-            .then((emails) => this.setState({emails}))
+            .then((emails) => {
+                // Because `emails` is a different reference from `this.state.emails`,
+                // the component will unnecessarily re-render even though the contents
+                // are the same. The virtual DOM will prevent the actual DOM from updating
+                // but it still actually has to run its diffing algorithm. So instead
+                // making this quick check here, saves unnecessary extra work
+                if (!isEqual(emails, this.state.emails)) {
+                    this.setState({emails});
+                }
+            })
             .catch((ex) => console.error(ex));
     }
 

05-email-view/README.md

@@ -73,4 +73,3 @@ Go to [Step 6 - Email Form](https://github.com/benmvp/react-workshop/tree/master
 - [React Hot Loader Getting Started](http://gaearon.github.io/react-hot-loader/getstarted/)
 - [Event System](https://facebook.github.io/react/docs/events.html)
 - [Dangerously Set innerHTML](https://facebook.github.io/react/tips/dangerously-set-inner-html.html)
-- [lodash Documentation](https://lodash.com/docs)

05-email-view/src/containers/App.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import find from 'lodash/find';
+import isEqual from 'lodash/isEqual';
 import 'whatwg-fetch';
 
 import EmailList from '../components/EmailList';
@@ -41,7 +42,16 @@ export default class EmailApp extends React.Component {
     _getUpdateEmails() {
         return fetch('http://localhost:9090/emails')
             .then((res) => res.json())
-            .then((emails) => this.setState({emails}))
+            .then((emails) => {
+                // Because `emails` is a different reference from `this.state.emails`,
+                // the component will unnecessarily re-render even though the contents
+                // are the same. The virtual DOM will prevent the actual DOM from updating
+                // but it still actually has to run its diffing algorithm. So instead
+                // making this quick check here, saves unnecessary extra work
+                if (!isEqual(emails, this.state.emails)) {
+                    this.setState({emails});
+                }
+            })
             .catch((ex) => console.error(ex));
     }
 

06-email-form/src/containers/App.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import find from 'lodash/find';
+import isEqual from 'lodash/isEqual';
 import 'whatwg-fetch';
 
 import EmailList from '../components/EmailList';
@@ -41,7 +42,16 @@ export default class EmailApp extends React.Component {
     _getUpdateEmails() {
         return fetch('http://localhost:9090/emails')
             .then((res) => res.json())
-            .then((emails) => this.setState({emails}))
+            .then((emails) => {
+                // Because `emails` is a different reference from `this.state.emails`,
+                // the component will unnecessarily re-render even though the contents
+                // are the same. The virtual DOM will prevent the actual DOM from updating
+                // but it still actually has to run its diffing algorithm. So instead
+                // making this quick check here, saves unnecessary extra work
+                if (!isEqual(emails, this.state.emails)) {
+                    this.setState({emails});
+                }
+            })
             .catch((ex) => console.error(ex));
     }
 

07-submit-email-form/src/containers/App.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import find from 'lodash/find';
+import isEqual from 'lodash/isEqual';
 import 'whatwg-fetch';
 
 import EmailList from '../components/EmailList';
@@ -41,7 +42,16 @@ export default class EmailApp extends React.Component {
     _getUpdateEmails() {
         return fetch('http://localhost:9090/emails')
             .then((res) => res.json())
-            .then((emails) => this.setState({emails}))
+            .then((emails) => {
+                // Because `emails` is a different reference from `this.state.emails`,
+                // the component will unnecessarily re-render even though the contents
+                // are the same. The virtual DOM will prevent the actual DOM from updating
+                // but it still actually has to run its diffing algorithm. So instead
+                // making this quick check here, saves unnecessary extra work
+                if (!isEqual(emails, this.state.emails)) {
+                    this.setState({emails});
+                }
+            })
             .catch((ex) => console.error(ex));
     }
 

final/src/containers/App.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import find from 'lodash/find';
+import isEqual from 'lodash/isEqual';
 
 import {addEmail, deleteEmail, getEmails, markRead, markUnread} from '../action-reducers';
 
@@ -74,7 +75,16 @@ export default class App extends React.Component {
 
     _getUpdateEmails() {
         return getEmails()
-            .then((emails) => this.setState({emails}));
+            .then((emails) => {
+                // Because `emails` is a different reference from `this.state.emails`,
+                // the component will unnecessarily re-render even though the contents
+                // are the same. The virtual DOM will prevent the actual DOM from updating
+                // but it still actually has to run its diffing algorithm. So instead
+                // making this quick check here, saves unnecessary extra work
+                if (!isEqual(emails, this.state.emails)) {
+                    this.setState({emails});
+                }
+            });
     }
 
     _handleItemSelect(emailId) {