โจทย์ Customer Search — ประกอบทุกอย่างที่เรียนมาเป็นของจริง

Next.js  v16.3.4       # npx next --version
react    19.2.8        # require('react/package.json').version
tailwind 4.3.3
tsc      5.9.3
node     v24.14.0

โจทย์จากสไลด์ — ทั้งหมดที่มี

สไลด์หน้า 57 เขียนไว้แค่นี้:

พร้อมข้อมูลตั้งต้นเป็นไฟล์ JSON หน้าตาแบบนี้ (สไลด์โชว์ 5 บรรทัดแรก ที่เหลือผมอ่านจากการ์ดหน้า 58–59):

// components/CustomerList/customers.json
[
  { "id": "c001", "name": "Ava Thompson",     "age": 29 },
  { "id": "c002", "name": "Liam Carter",      "age": 34 },
  { "id": "c003", "name": "Sophia Martinez",  "age": 41 },
  { "id": "c004", "name": "Noah Bennett",     "age": 23 },
  { "id": "c005", "name": "Isabella Rossi",   "age": 37 },
  // … c006 Mason Clarke 52 · c007 Mia Nguyen 19 · c008 Ethan Walker 45
  // … c009 Charlotte Dubois 31 · c010 Lucas Ferreira 27 · c011 Amelia Chen 38
  // … c012 James O'Connor 60 · c013 Harper Kim 24 · c014 Benjamin Novak 33
  // … c015 Ella Fischer 47 · c016 Alexander Petrov 55 · c017 Grace Okafor 22
  // … c018 Daniel Suzuki 40 · c019 Chloe Andersson 30 · c020 Henry Osei 26
  // … c021 Samuel Rivera 48 · c022 Jack Sullivan 43 · c023 Nora Lindqvist 28
  // … c024 Aria Costa 25 · c025 David Mensah 50
]

หน้าตาที่ต้องได้ (สไลด์หน้า 58): ช่องพิมพ์หนึ่งช่องอยู่บนสุด แล้วข้างล่างเป็น ตารางการ์ด 6 คอลัมน์ แต่ละการ์ดมีชื่อกับอายุ

ก่อนพิมพ์บรรทัดแรก — 5 คำถามที่โจทย์ไม่ได้ตอบ

นี่คือส่วนที่สำคัญที่สุดของบทนี้ อ่านให้จบก่อนเปิดเอดิเตอร์
จดคำตอบของคุณลงกระดาษก่อน แล้วค่อยไปดูว่าโค้ดในสไลด์เลือกทางไหน — ถ้าคุณเลือกต่างจากสไลด์ นั่นไม่ผิด แต่คุณต้องรู้ตัวว่าเลือก

ภารกิจ 1 — วางลูกค้าทั้ง 25 คนลงหน้าเว็บก่อน (ยังไม่ต้องค้น)

อย่าเพิ่งเขียนช่องค้นหา · งานแรกคือทำให้ข้อมูลโผล่บนจอให้ได้ก่อน ถ้าขั้นนี้ยังไม่ผ่าน การค้นก็ไม่มีอะไรให้ค้น

// components/CustomerList/CustomerList.tsx
import customers from "./customers.json";

const CustomerList = () => {
  return (
    <div className="grid grid-cols-6 gap-2">
      {customers.map((customer) => (
        <div key={customer.id} className="border p-2 text-center">
          <p>{customer.name}</p>
          <p>age: {customer.age}</p>
        </div>
      ))}
    </div>
  );
};

export default CustomerList;

$ curl -s http://localhost:378/t78 | grep -o 'age: [0-9]*' | wc -l
      25

// ลืมใส่ key จะเกิดอะไร? โค้ดนี้ build ผ่านไหม
{customers.map((customer) => (
  <p>{customer.name}</p>
))}

Each child in a list should have a unique "key" prop.

Check the top-level render call using <p>. See https://react.dev/link/warning-keys for more information.

$ npx eslint app/t78/nokey/page.tsx

app/t78/nokey/page.tsx
  7:9  error  Missing "key" prop for element in iterator  react/jsx-key

✖ 1 problem (1 error, 0 warnings)

ภารกิจ 2 — เพิ่มช่องค้นหา แล้วเจอด่านแรกของ App Router

ตอนนี้ค่อยเติมช่องค้นหา · ต้องใช้ useState เก็บคำค้น และ useMemo จำผลกรองไว้ตามที่สไลด์ทำ

// components/CustomerList/CustomerList.tsx — บรรทัดบนสุด
import { useMemo, useState, type ChangeEvent } from "react";
import customers from "./customers.json";
// … แล้วใช้ useState ข้างใน component ตามปกติ

▲ Next.js 16.3.4 (Turbopack)
✓ Running next.config.ts took 9ms

  Creating an optimized production build ...

> Build error occurred
Error: Turbopack build failed with 1 error:
./components/t78/CustomerList.tsx:1:19
Error: You're importing a module that depends on `useState` into a React Server Component module. This API is only available in Client Components. To fix, mark the file (or its parent) with the `"use client"` directive.
    Learn more: https://nextjs.org/docs/app/api-reference/directives/use-client
> 1 | import { useMemo, useState, type ChangeEvent } from "react";
    |                   ^^^^^^^^
  2 | import customers from "./customers.json";
  3 |
  4 | const CustomerList = () => {

Ecmascript file had an error

Import trace:
  Server Component:
    ./components/t78/CustomerList.tsx
    ./app/t78/page.tsx

"use client";

import { useMemo, useState, type ChangeEvent } from "react";

"use client";

import { useMemo, useState, type ChangeEvent } from "react";
import customers from "./customers.json";

const CustomerList = () => {
  const [search, setSearch] = useState("");

  const filterCustomer = (search: string) => {
    if (search !== "") {
      const searchValue = search.toLocaleLowerCase();
      return customers.filter((customer) => {
        const customerName = customer.name.toLocaleLowerCase();
        return customerName.includes(searchValue);
      });
    }
    return [...customers];
  };

  const customerData = useMemo(() => {
    return filterCustomer(search);
  }, [search]);

  const handleSearch = (event: ChangeEvent<HTMLInputElement>) => {
    const value = event.target.value;
    setSearch(value);
  };

  return (
    <>
      <input
        type={"text"}
        className={"border"}
        value={search}
        onChange={handleSearch}
      />
      <div className="grid grid-cols-6 gap-2">
        {customerData.map((customer) => (
          <div key={customer.id} className="border p-2 text-center">
            <p>{customer.name}</p>
            <p>age: {customer.age}</p>
          </div>
        ))}
      </div>
    </>
  );
};

export default CustomerList;

$ node probe.mjs
search=""          ->  25 คน
search="s"         ->  16 คน
   Ava Thompson, Sophia Martinez, Isabella Rossi, Mason Clarke,
   Charlotte Dubois, Lucas Ferreira, James O'Connor, Ella Fischer,
   Daniel Suzuki, Chloe Andersson, Henry Osei, Samuel Rivera,
   Jack Sullivan, Nora Lindqvist, Aria Costa, David Mensah
search="MARTINEZ"  ->  1 คน
   Sophia Martinez
search="zz"        ->  0 คน

สามจุดในเฉลยที่ควรหยุดถาม

1 · ทำไมต้อง [...customers] ไม่ใช่ customers เฉย ๆ

บรรทัด return [...customers]; คืนสำเนาใหม่ของกองข้อมูล ไม่ใช่ตัวเดิม
ในโค้ดชุดนี้มันยังไม่จำเป็น เพราะเราแค่เอาไป .map() อ่านอย่างเดียว
แต่มันเป็นนิสัยที่ถูก: ถ้าวันหนึ่งมีใครเติม .sort() ต่อท้าย customers ตัวจริงที่ import มาจาก JSON จะโดนเรียงใหม่ถาวรทั้งไฟล์ และมันจะไม่กลับมาเป็นลำดับเดิมจนกว่าจะรีเฟรชหน้า (sort แก้ของเดิม — เรื่องนี้อยู่ใน บท 68 ข้อ 2)

2 · toLocaleLowerCase() ต่างจาก toLowerCase() ยังไง

สไลด์ใช้ toLocaleLowerCase() · คนส่วนใหญ่เขียน toLowerCase() · ผลรันจริงบน node v24.14.0 บนเครื่องนี้:

$ node -e "const s='ISABELLA';
console.log('default  toLocaleLowerCase:', s.toLocaleLowerCase());
console.log('toLowerCase             :', s.toLowerCase());
console.log('tr-TR    toLocaleLowerCase:', s.toLocaleLowerCase('tr-TR'));
console.log('Intl default locale      :', Intl.DateTimeFormat().resolvedOptions().locale);"
default  toLocaleLowerCase: isabella
toLowerCase             : isabella
tr-TR    toLocaleLowerCase: ısabella
Intl default locale      : en-US

สองบรรทัดแรกได้เท่ากัน — บนเครื่องนี้ สองอันนี้ไม่ต่างกันเลย
บรรทัดที่สามคือเหตุผลที่มันมีอยู่: ถ้า locale เป็นตุรกี ตัว I ใหญ่ จะกลายเป็น ı (ไม่มีจุด) ไม่ใช่ i — แปลว่า “Isabella” จะหาไม่เจอถ้าผู้ใช้พิมพ์ “i”

3 · useMemo ตรงนี้จำเป็นจริงไหม

ตอบตรง ๆ: ในโจทย์ขนาดนี้ ไม่จำเป็น เขียน const customerData = filterCustomer(search); เฉย ๆ ก็ได้ผลเหมือนกัน และไม่มีใครวัดความต่างได้กับข้อมูล 25 แถว

useMemo เริ่มคุ้มเมื่อสองเงื่อนไขนี้เกิดพร้อมกัน: (ก) การคำนวณแพงจริง (กรองข้อมูลหลักหมื่นแถว) หรือ (ข) ผลลัพธ์ถูกส่งเป็น prop ให้ component ลูกที่ห่อด้วย React.memo ซึ่งจะ re-render ทุกครั้งถ้าได้ array ตัวใหม่

// ผู้ใช้เผลอเคาะ space bar หนึ่งครั้งในช่องค้นหา
// search === " "   (เว้นวรรคหนึ่งตัว ไม่ใช่ค่าว่าง)
filterCustomer(" ")

search=" "  ->  25 คน

ภารกิจ 3 — เขียนเวอร์ชันที่ “ตัดสินใจแล้ว”

ภารกิจนี้คือหัวใจของบทเรียน · ไม่ได้ให้ลอกสไลด์ แต่ให้เลือกทางที่ต่างจากสไลด์อย่างตั้งใจ แล้วดูว่าโค้ดเปลี่ยนตรงไหนบ้าง

"use client";

import { useMemo, useState, type ChangeEvent, type FormEvent } from "react";
import customers from "./customers.json";

type Customer = { id: string; name: string; age: number };

function filterByName(list: Customer[], keyword: string): Customer[] {
  const needle = keyword.trim().toLocaleLowerCase();
  if (needle === "") return list;
  return list.filter((c) => c.name.toLocaleLowerCase().includes(needle));
}

export default function CustomerSearchV2() {
  const [draft, setDraft] = useState("");   // สิ่งที่กำลังพิมพ์
  const [query, setQuery] = useState("");   // สิ่งที่กดค้นไปแล้ว

  const results = useMemo(() => filterByName(customers, query), [query]);

  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    setDraft(event.target.value);
  };

  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();      // กัน browser รีโหลดหน้าทิ้ง state
    setQuery(draft);
  };

  return (
    <section>
      <form onSubmit={handleSubmit}>
        <input type="text" value={draft} onChange={handleChange}
               placeholder="พิมพ์ชื่อลูกค้า" className="border px-2 py-1" />
        <button type="submit" className="border px-3 py-1">ค้นหา</button>
      </form>

      <p>พบ {results.length} คน</p>

      {results.length === 0 ? (
        <p>ไม่พบลูกค้าที่ชื่อมีคำว่า &quot;{query.trim()}&quot;</p>
      ) : (
        <ul>
          {results.map((customer) => (
            <li key={customer.id}>{customer.name} — age: {customer.age}</li>
          ))}
        </ul>
      )}
    </section>
  );
}

$ npx next build
├ ○ /t78
├ ○ /t78/v2
└ ○ /t78/v2-empty

$ npx tsc --noEmit; echo "rc=$?"
rc=0

$ npx eslint components/t78 app/t78; echo "rc=$?"
rc=0

$ curl -s http://localhost:378/t78/v2 | grep -o '<li[ >]' | wc -l
      25

$ curl -s http://localhost:378/t78/v2-empty | grep -o '<li[ >]' | wc -l
       0

$ curl -s http://localhost:378/t78/v2-empty \
    | python3 -c "import sys,re; print('\n'.join(re.findall(r'<p>.*?</p>', sys.stdin.read())))"
<p>พบ <!-- -->0<!-- --> คน</p>
<p>ไม่พบลูกค้าที่ชื่อมีคำว่า &quot;<!-- -->zz<!-- -->&quot;</p>

ทางที่สามที่ใช้กันเยอะที่สุดในของจริงคือ ค้นตอนพิมพ์แต่หน่วงไว้ — รอให้ผู้ใช้หยุดพิมพ์สัก 300–500 มิลลิวินาทีค่อยยิงค้นทีเดียว ซึ่งคือ useDebounce ที่สไลด์หน้า 71 พูดถึงพอดี (เขียนเองได้ตาม บท 77)

Recap ทั้งกลุ่ม — บท 69 ถึง 78

สไลด์หน้า 65–71 สรุปทั้งคอร์สไว้ห้าหัวข้อ · ตารางนี้จับคู่หัวข้อในสไลด์กับบทเรียนที่ผ่านมา

สามประโยคจากสไลด์ที่ควรจำเป็นคำ ๆ

วงจร 6 ขั้นในสไลด์หน้า 70 คือคำอธิบายที่ตรงที่สุดของสิ่งที่เกิดขึ้นใน Customer Search ของเรา:
ผู้ใช้พิมพ์ (ขั้น 2) → handleSearch เรียก setSearch (ขั้น 3) → React จัดคิววาดใหม่ (ขั้น 4) → useMemo คำนวณผลกรองรอบใหม่แล้ววาดการ์ด (ขั้น 5) → search ตัวใหม่กลายเป็นความจริงของรอบถัดไป (ขั้น 6)
ไม่มีบรรทัดไหนในโค้ดเราที่สั่งให้ DOM เปลี่ยนโดยตรงเลยสักบรรทัด — นี่คือความต่างที่ใหญ่ที่สุดจากการเขียน JavaScript แบบเดิม

ลองตอบดู

เอาไปต่อยอด

ถ้ายังมีแรง ลองเพิ่มทีละอย่างในเวอร์ชันของคุณเอง แล้วรัน next build ทุกครั้ง:

• ค้นจาก id ได้ด้วย — พิมพ์ c003 แล้วต้องเจอ Sophia Martinez (ตอนนี้ยังไม่เจอ ผลรันจริงคือ search="c003" -> 0 คน)
• แยกส่วนกรองออกเป็น custom hook useCustomerSearch() ตามกฎสี่ข้อใน บท 77
• เติม useDebounce 300ms ให้เวอร์ชันค้นตอนพิมพ์
• ไฮไลต์ตัวอักษรที่ตรงกับคำค้นในชื่อลูกค้า — ข้อนี้จะทำให้คุณเจอกับดักใหม่: ตำแหน่งที่ตรงกันต้องหาจากชื่อตัวจริง ไม่ใช่จากชื่อที่แปลงเป็นตัวพิมพ์เล็กแล้ว

ถามกลับได้เลย

ถ้าคุณเลือกคำตอบของคำถาม 5 ข้อต่างจากในบทนี้ แล้วโค้ดออกมาหน้าตาไม่เหมือนกันเลย — นั่นคือผลลัพธ์ที่ถูกต้องของบทนี้ ไม่ใช่ความผิด
เอาโค้ดของคุณมาคุยได้ พร้อมบอกว่าคุณเลือกทางไหนในแต่ละข้อและเพราะอะไร
ถ้า next build พังแล้วอ่าน error ไม่ออก ก็เอาข้อความ error ทั้งก้อนมาเลย โดยเฉพาะบรรทัด Import trace ซึ่งมักบอกคำตอบไว้แล้ว

อ้างอิง

• Next.js — "use client" directive — อ่านหัวข้อ Nesting Client Components within Server Components เพื่อเข้าใจว่าทำไมต้องแปะให้ใกล้ใบ ไม่ใช่แปะไว้บนสุด · เป็นลิงก์เดียวกับที่ Next.js พิมพ์มาในข้อความ error ตอน build พัง
• React — Rendering Lists — อ่านหัวข้อ Why does React need keys? จะเห็นเลยว่าทำไม warning เรื่อง key ถึงกลายเป็นบั๊กจริงตอนรายการถูกกรอง ซึ่งคือสิ่งที่โจทย์นี้ทำทุกครั้งที่พิมพ์
• React — useMemo — อ่านหัวข้อ Should you add useMemo everywhere? ทีมงาน React ตอบเรื่องนี้ไว้เองตรง ๆ ว่าไม่ควร · ใช้ยืนยันหัวข้อ “useMemo ตรงนี้จำเป็นจริงไหม”
• MDN — String.prototype.toLocaleLowerCase() — อ่านตัวอย่าง 'İ' กับ locale tr จะเห็นเคสตุรกีที่ทำให้ผลต่างจาก toLowerCase() ด้วยตาตัวเอง
• React — <input> — อ่านหัวข้อ Controlling an input with a state variable ตรงที่อธิบายว่าใส่ value แล้วต้องใส่ onChange เสมอ ไม่งั้นช่องจะพิมพ์ไม่ได้