We remove 2 state to have the perfect render count

Author: Nikoms

src/Todo/TodoList.js

@@ -18,18 +18,27 @@ const fetchTodosFromApi = async () => {
 const TodoList = () => {
   const [todos, setTodoList] = useState([]);
   useEffect(function callApi() {
+    //1. Imagine that we are calling an api to get todos 
     fetchTodosFromApi().then(list => setTodoList(list));
   }, []);
 
-  const [ongoingCount, setOngoingCount] = useState(0);
-  const [doneCount, setDoneCount] = useState(0);
+  //2. One solution would be to recalculate the counters on each render
+  const ongoingCount = todos.filter(t => t.done).length;
+  const doneCount = todos.filter(t => !t.done).length;
 
-  useEffect(function refreshCounters() {
-    setDoneCount(todos.filter(t => t.done).length);
-    setOngoingCount(todos.filter(t => !t.done).length);
-  }, [todos]);
 
+  //4. See how many render ?
   console.log('render with', {total: todos.length, ongoingCount, doneCount});
+  // On first load it renders only 2 times (perfect!):
+  // render with { total: 0, ongoingCount: 0, doneCount: 0 }
+  // render with { total: 5, ongoingCount: 0, doneCount: 5 }
+
+  // When I set one of the todos as "done", it re-renders only 1 time
+  // render with { total: 5, ongoingCount: 1, doneCount: 4 }
+
+  //2 conclusions: 
+  // - We have the perfect render count...
+  // - ...But there is a but... (see next commit) 
 
   const addEmptyTodo = () => setTodoList([createTodo('Relax! Edition will come...', false), ...todos]);
   const markAsDone = (index) => setTodoList([...todos.slice(0, index), {