Use shouldRenderComponent to reduce rendering and recalculation

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,

containers/App.js

@@ -6,18 +6,20 @@ 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
           onAddClick={text =>
             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
   }