From 4761e7887588999e6195617582828c4e0cdd5ced Mon Sep 17 00:00:00 2001
From: LJ <81748770+elle-j@users.noreply.github.com>
Date: Thu, 8 Jun 2023 16:48:24 +0200
Subject: [PATCH] Memoize 'TaskItem'.

---
 example-wasm/src/components/TaskItem.tsx | 19 +++++++++++++------
 example-wasm/src/components/TaskList.tsx | 10 +++++-----
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/example-wasm/src/components/TaskItem.tsx b/example-wasm/src/components/TaskItem.tsx
index 4ba4a59ce1..f3754824fd 100644
--- 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
index d9b2283faf..8f6c7f5b30 100644
--- 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>