Memoize 'TaskItem'.

realm · Jun 8, 2023 · 4761e78 · 4761e78
1 parent 01ed826
commit 4761e78
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 11 deletions.
diff --git a/example-wasm/src/components/TaskItem.tsx b/example-wasm/src/components/TaskItem.tsx
@@ -1,14 +1,15 @@
+import { memo } from 'react';
+
 import { Task } from '../models/Task';
 import styles from '../styles/TaskItem.module.css';
 
 type TaskItemProps = {
   task: Task;
-  onToggleStatus: () => void;
-  onDelete: () => void;
+  onToggleStatus: (task: Task) => void;
+  onDelete: (task: Task) => void;
 };
 
-// TODO: Memoize
-export function TaskItem({ task, onToggleStatus, onDelete }: TaskItemProps) {
+export const TaskItem = memo(({ task, onToggleStatus, onDelete }: TaskItemProps) => {
   return (
     <div className={task.isComplete ? [styles.task, styles.completed].join(' ') : styles.task}>
       <p className={styles.description}>
@@ -17,17 +18,23 @@ export function TaskItem({ task, onToggleStatus, onDelete }: TaskItemProps) {
       <div className={styles.buttons}>
         <button
           className={[styles.button, styles.toggleBtn].join(' ')}
-          onClick={onToggleStatus}
+          onClick={() => onToggleStatus(task)}
         >
           ✓
         </button>
         <button
           className={[styles.button, styles.deleteBtn].join(' ')}
-          onClick={onDelete}
+          onClick={() => onDelete(task)}
         >
           x
         </button>
       </div>
     </div>
   );
+}, shouldNotRerender);
+
+function shouldNotRerender({ task: prevTask }: Readonly<TaskItemProps>, { task: nextTask }: Readonly<TaskItemProps>) {
+  return prevTask._id.equals(nextTask._id)
+    && prevTask.description === nextTask.description
+    && prevTask.isComplete === nextTask.isComplete;
 }
diff --git a/example-wasm/src/components/TaskList.tsx b/example-wasm/src/components/TaskList.tsx
@@ -5,9 +5,9 @@ import { TaskItem } from './TaskItem';
 import styles from '../styles/TaskList.module.css';
 
 type TaskListProps = {
-  tasks: Realm.Results<Task /*& Realm.Object*/>;
-  onToggleTaskStatus: (task: Task /*& Realm.Object*/) => void;
-  onDeleteTask: (task: Task /*& Realm.Object*/) => void;
+  tasks: Realm.Results<Task>;
+  onToggleTaskStatus: (task: Task) => void;
+  onDeleteTask: (task: Task) => void;
 };
 
 export function TaskList({ tasks, onToggleTaskStatus, onDeleteTask }: TaskListProps) {
@@ -17,8 +17,8 @@ export function TaskList({ tasks, onToggleTaskStatus, onDeleteTask }: TaskListPr
         <TaskItem
           key={task._id.toHexString()}
           task={task}
-          onToggleStatus={() => onToggleTaskStatus(task)}
-          onDelete={() => onDeleteTask(task)}
+          onToggleStatus={onToggleTaskStatus}
+          onDelete={onDeleteTask}
         />
       ))}
     </div>