From 15a14c8079549be575809e05fb3b52abca604c55 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Fri, 18 Jul 2025 15:48:10 +0700
Subject: [PATCH] add useDeferredValue

---
 src/App.tsx   | 142 ++++++++++++++++++++++++++++----------------------
 src/index.css |   4 --
 2 files changed, 81 insertions(+), 65 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 4b18413..207fa47 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,29 +1,101 @@
-import { useState, useMemo } from "react";
+import { useState, useMemo, useDeferredValue, memo } from "react";
 import "./App.css";
 import { generateOrders, type Order } from "./generateOrderData";
 
+interface OrderTableProps {
+  orders: Order[];
+}
+
+const OrderTable = memo(function OrderTable({ orders }: OrderTableProps) {
+  const formatDate = (date: Date) => {
+    return date.toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+    });
+  };
+
+  const formatCurrency = (amount: number, currency: string) => {
+    return `${currency} ${amount.toFixed(2)}`;
+  };
+  return (
+    <div className="table-container">
+      <table>
+        <thead>
+          <tr>
+            <th>Order #</th>
+            <th>Customer</th>
+            <th>Email</th>
+            <th>Date</th>
+            <th>Status</th>
+            <th>Total</th>
+            <th>Items</th>
+            <th>Payment</th>
+            <th>Address</th>
+            <th>City</th>
+            <th>Country</th>
+            <th>Tracking</th>
+            <th>Est. Delivery</th>
+          </tr>
+        </thead>
+        <tbody>
+          {orders.map((order: Order) => (
+            <tr key={order.id}>
+              <td>{order.orderNumber}</td>
+              <td>{order.customerName}</td>
+              <td>{order.customerEmail}</td>
+              <td>{formatDate(order.orderDate)}</td>
+              <td className={`status status-${order.status}`}>
+                {order.status}
+              </td>
+              <td>{formatCurrency(order.totalAmount, order.currency)}</td>
+              <td>{order.itemsCount}</td>
+              <td>{order.paymentMethod.replace("_", " ")}</td>
+              <td>{order.shippingAddress}</td>
+              <td>{order.shippingCity}</td>
+              <td>{order.shippingCountry}</td>
+              <td>{order.trackingNumber}</td>
+              <td>{formatDate(order.estimatedDelivery)}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+});
+
 function App() {
   const [searchTerm, setSearchTerm] = useState("");
+  const deferredSearchTerm = useDeferredValue(searchTerm);
   const [activeStatuses, setActiveStatuses] = useState<Set<Order["status"]>>(
     new Set(["pending", "processing", "shipped", "delivered", "cancelled"])
   );
 
+  // orders could come from a server, in this example it does not matter.
   const orders = useMemo(() => generateOrders(5000), []);
 
   const filteredOrders = useMemo(() => {
     return orders.filter((order) => {
       const matchesSearch =
-        searchTerm === "" ||
-        order.orderNumber.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        order.customerName.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        order.customerEmail.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        order.trackingNumber.toLowerCase().includes(searchTerm.toLowerCase());
+        deferredSearchTerm === "" ||
+        order.orderNumber
+          .toLowerCase()
+          .includes(deferredSearchTerm.toLowerCase()) ||
+        order.customerName
+          .toLowerCase()
+          .includes(deferredSearchTerm.toLowerCase()) ||
+        order.customerEmail
+          .toLowerCase()
+          .includes(deferredSearchTerm.toLowerCase()) ||
+        order.trackingNumber
+          .toLowerCase()
+          .includes(deferredSearchTerm.toLowerCase());
 
       const matchesStatus = activeStatuses.has(order.status);
 
       return matchesSearch && matchesStatus;
     });
-  }, [orders, searchTerm, activeStatuses]);
+  }, [orders, deferredSearchTerm, activeStatuses]);
 
   const toggleStatus = (status: Order["status"]) => {
     setActiveStatuses((prev) => {
@@ -37,18 +109,6 @@ function App() {
     });
   };
 
-  const formatDate = (date: Date) => {
-    return date.toLocaleDateString("en-US", {
-      year: "numeric",
-      month: "short",
-      day: "numeric",
-    });
-  };
-
-  const formatCurrency = (amount: number, currency: string) => {
-    return `${currency} ${amount.toFixed(2)}`;
-  };
-
   const statuses: Order["status"][] = [
     "pending",
     "processing",
@@ -63,6 +123,7 @@ function App() {
       <div className="controls">
         <div className="search-container">
           <input
+            autoComplete="off"
             type="text"
             placeholder="Search by order #, customer name, email, or tracking..."
             value={searchTerm}
@@ -91,48 +152,7 @@ function App() {
         </p>
       </div>
 
-      <div className="table-container">
-        <table>
-          <thead>
-            <tr>
-              <th>Order #</th>
-              <th>Customer</th>
-              <th>Email</th>
-              <th>Date</th>
-              <th>Status</th>
-              <th>Total</th>
-              <th>Items</th>
-              <th>Payment</th>
-              <th>Address</th>
-              <th>City</th>
-              <th>Country</th>
-              <th>Tracking</th>
-              <th>Est. Delivery</th>
-            </tr>
-          </thead>
-          <tbody>
-            {filteredOrders.map((order: Order) => (
-              <tr key={order.id}>
-                <td>{order.orderNumber}</td>
-                <td>{order.customerName}</td>
-                <td>{order.customerEmail}</td>
-                <td>{formatDate(order.orderDate)}</td>
-                <td className={`status status-${order.status}`}>
-                  {order.status}
-                </td>
-                <td>{formatCurrency(order.totalAmount, order.currency)}</td>
-                <td>{order.itemsCount}</td>
-                <td>{order.paymentMethod.replace("_", " ")}</td>
-                <td>{order.shippingAddress}</td>
-                <td>{order.shippingCity}</td>
-                <td>{order.shippingCountry}</td>
-                <td>{order.trackingNumber}</td>
-                <td>{formatDate(order.estimatedDelivery)}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
+      <OrderTable orders={filteredOrders} />
     </div>
   );
 }
diff --git a/src/index.css b/src/index.css
index 08a3ac9..ffd860c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -24,10 +24,6 @@ a:hover {
 
 body {
   margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
 }
 
 h1 {