From 4b6b46b4a8abf8428b268a94e1b610d05883d0a8 Mon Sep 17 00:00:00 2001
From: Nathan Wenneker <nathan@preferral.com>
Date: Thu, 5 Nov 2015 18:21:28 -0700
Subject: [PATCH] Use shouldRenderComponent to reduce rendering and
 recalculation

By creating a component that only takes relevant properties that would
cause a recalculation, we're free to redefine shouldRenderComponent to
compare object equality of all of the props. If any props change, render
(and recalculate); otherwise, no need to render or recalculate.  This
is similar to memoization, but using `react` lifecycle.

In order for this approach to work, you have to create a component that
_doesn't_ take an unrelated prop (i.e. `currentTheme`).
---
 components/TodoList.js | 23 ++++++++++++++++++++++-
 containers/App.js      | 21 ++++++---------------
 2 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/components/TodoList.js b/components/TodoList.js
index d4796cb..2a39ffc 100644
--- a/components/TodoList.js
+++ b/components/TodoList.js
@@ -1,11 +1,31 @@
 import React, { Component, PropTypes } from 'react'
 import Todo from './Todo'
+import { VisibilityFilters } from '../actions'
 
 export default class TodoList extends Component {
+
+  shouldComponentUpdate(nextProps, nextState) {
+    return nextProps.filter !== this.props.filter || nextProps.todos !== this.props.todos;
+  }
+
+  visibleTodos() {
+    return function(todos, filter) {
+      console.log("Recalculating visibleTodos");
+      switch (filter) {
+        case VisibilityFilters.SHOW_ALL:
+          return todos;
+        case VisibilityFilters.SHOW_COMPLETED:
+          return todos.filter(todo => todo.completed)
+        case VisibilityFilters.SHOW_ACTIVE:
+          return todos.filter(todo => !todo.completed)
+      }
+    }(this.props.todos, this.props.filter);
+  }
+
   render() {
     return (
       <ul>
-        {this.props.todos.map((todo, index) =>
+        {this.visibleTodos().map((todo, index) =>
           <Todo {...todo}
                 key={index}
               onClick={() => this.props.onTodoClick(index)} />
@@ -16,6 +36,7 @@ export default class TodoList extends Component {
 }
 
 TodoList.propTypes = {
+  filter: PropTypes.string.isRequired,
   onTodoClick: PropTypes.func.isRequired,
   todos: PropTypes.arrayOf(PropTypes.shape({
     text: PropTypes.string.isRequired,
diff --git a/containers/App.js b/containers/App.js
index 916c3a1..d299bd2 100644
--- a/containers/App.js
+++ b/containers/App.js
@@ -6,10 +6,11 @@ import TodoList from '../components/TodoList'
 import Footer from '../components/Footer'
 
 class App extends Component {
+
   render() {
     console.log(this.props);
     // Injected by connect() call:
-    const { dispatch, visibleTodos, visibilityFilter, currentTheme } = this.props
+    const { dispatch, todos, visibilityFilter, currentTheme } = this.props
     return (
       <div className={currentTheme}>
         <AddTodo
@@ -17,7 +18,8 @@ class App extends Component {
             dispatch(addTodo(text))
           } />
         <TodoList
-          todos={visibleTodos}
+          todos={todos}
+          filter={visibilityFilter}
           onTodoClick={index =>
             dispatch(completeTodo(index))
           } />
@@ -33,7 +35,7 @@ class App extends Component {
 }
 
 App.propTypes = {
-  visibleTodos: PropTypes.arrayOf(PropTypes.shape({
+  todos: PropTypes.arrayOf(PropTypes.shape({
     text: PropTypes.string.isRequired,
     completed: PropTypes.bool.isRequired
   })),
@@ -44,22 +46,11 @@ App.propTypes = {
   ]).isRequired
 }
 
-function selectTodos(todos, filter) {
-  switch (filter) {
-    case VisibilityFilters.SHOW_ALL:
-      return todos
-    case VisibilityFilters.SHOW_COMPLETED:
-      return todos.filter(todo => todo.completed)
-    case VisibilityFilters.SHOW_ACTIVE:
-      return todos.filter(todo => !todo.completed)
-  }
-}
-
 // Which props do we want to inject, given the global state?
 // Note: use https://github.com/faassen/reselect for better performance.
 function select(state) {
   return {
-    visibleTodos: selectTodos(state.todos, state.visibilityFilter),
+    todos: state.todos,
     visibilityFilter: state.visibilityFilter,
     currentTheme: state.currentTheme
   }