Introduce functional updater in useState

Author: velopert

11/todo-app/src/App.js

@@ -1,4 +1,4 @@
-import React, { useReducer, useRef, useCallback } from 'react';
+import React, { useRef, useState, useCallback } from 'react';
 import TodoTemplate from './components/TodoTemplate';
 import TodoInsert from './components/TodoInsert';
 import TodoList from './components/TodoList';
@@ -15,47 +15,33 @@ function createBulkTodos() {
   return array;
 }
 
-function todoReducer(todos, action) {
-  switch (action.type) {
-    case 'INSERT': // 새로 추가
-      // { type: 'INSERT', todo: { id: 1, text: 'todo', checked: false } }
-      return todos.concat(action.todo);
-    case 'REMOVE': // 제거
-      // { type: 'REMOVE', id: 1 }
-      return todos.filter(todo => todo.id !== action.id);
-    case 'TOGGLE': // 토글
-      // { type: 'REMOVE', id: 1 }
-      return todos.map(todo =>
-        todo.id === action.id ? { ...todo, checked: !todo.checked } : todo,
-      );
-    default:
-      return todos;
-  }
-}
-
 const App = () => {
-  const [todos, dispatch] = useReducer(todoReducer, createBulkTodos());
+  const [todos, setTodos] = useState(createBulkTodos);
 
   // 고유 값으로 사용 될 id
   // ref 를 사용하여 변수 담기
-  const nextId = useRef(2501);
+  const nextId = useRef(4);
 
   const onInsert = useCallback(text => {
     const todo = {
       id: nextId.current,
       text,
       checked: false,
     };
-    dispatch({ type: 'INSERT', todo });
+    setTodos(todos => todos.concat(todo));
     nextId.current += 1; // nextId 1 씩 더하기
   }, []);
 
   const onRemove = useCallback(id => {
-    dispatch({ type: 'REMOVE', id });
+    setTodos(todos => todos.filter(todo => todo.id !== id));
   }, []);
 
   const onToggle = useCallback(id => {
-    dispatch({ type: 'TOGGLE', id });
+    setTodos(todos =>
+      todos.map(todo =>
+        todo.id === id ? { ...todo, checked: !todo.checked } : todo,
+      ),
+    );
   }, []);
 
   return (

11/todo-app/src/App.reducer.js

@@ -0,0 +1,69 @@
+import React, { useReducer, useRef, useCallback } from 'react';
+import TodoTemplate from './components/TodoTemplate';
+import TodoInsert from './components/TodoInsert';
+import TodoList from './components/TodoList';
+
+function createBulkTodos() {
+  const array = [];
+  for (let i = 1; i <= 2500; i++) {
+    array.push({
+      id: i,
+      text: `할 일 ${i}`,
+      checked: false,
+    });
+  }
+  return array;
+}
+
+function todoReducer(todos, action) {
+  switch (action.type) {
+    case 'INSERT': // 새로 추가
+      // { type: 'INSERT', todo: { id: 1, text: 'todo', checked: false } }
+      return todos.concat(action.todo);
+    case 'REMOVE': // 제거
+      // { type: 'REMOVE', id: 1 }
+      return todos.filter(todo => todo.id !== action.id);
+    case 'TOGGLE': // 토글
+      // { type: 'REMOVE', id: 1 }
+      return todos.map(todo =>
+        todo.id === action.id ? { ...todo, checked: !todo.checked } : todo,
+      );
+    default:
+      return todos;
+  }
+}
+
+const App = () => {
+  const [todos, dispatch] = useReducer(todoReducer, undefined, createBulkTodos);
+
+  // 고유 값으로 사용 될 id
+  // ref 를 사용하여 변수 담기
+  const nextId = useRef(2501);
+
+  const onInsert = useCallback(text => {
+    const todo = {
+      id: nextId.current,
+      text,
+      checked: false,
+    };
+    dispatch({ type: 'INSERT', todo });
+    nextId.current += 1; // nextId 1 씩 더하기
+  }, []);
+
+  const onRemove = useCallback(id => {
+    dispatch({ type: 'REMOVE', id });
+  }, []);
+
+  const onToggle = useCallback(id => {
+    dispatch({ type: 'TOGGLE', id });
+  }, []);
+
+  return (
+    <TodoTemplate>
+      <TodoInsert onInsert={onInsert} />
+      <TodoList todos={todos} onRemove={onRemove} onToggle={onToggle} />
+    </TodoTemplate>
+  );
+};
+
+export default App;

11/todo-app/src/components/TodoListItem.js

@@ -28,7 +28,4 @@ const TodoListItem = ({ todo, onRemove, onToggle, style }) => {
   );
 };
 
-export default React.memo(
-  TodoListItem,
-  (prevProps, nextProps) => prevProps.todo === nextProps.todo,
-);
+export default React.memo(TodoListItem);