Production & Ecosystem

dev build เทียบ production build

React มีสอง build development build ใหญ่และช้ากว่าโดยตั้งใจ — รวม warning ที่ช่วยได้, prop-type check และ Strict Mode double-invoke ส่วน production build ตัดทั้งหมดนั้นออกเพื่อความเร็วและขนาด build tool ของคุณ (Vite / framework) สลับให้อัตโนมัติเมื่อคุณรัน production build:

npm run build   # produces the optimized production bundle

อย่า ship development build เด็ดขาด — build นี้ช้าและใหญ่กว่าอย่างมีนัยสำคัญ และจำไว้ว่า <StrictMode> double-invoke เฉพาะใน development; ใน production ไม่ทำอะไรเลย ปล่อยไว้จึงไม่มีต้นทุน

code-splitting ด้วย lazy

bundle ใหญ่ก้อนเดียวหมายถึง user download code ของหน้าที่อาจไม่เคยเข้า React.lazy + <Suspense> แยก component เป็น chunk ของตัวเองที่โหลด on demand:

import { lazy, Suspense } from 'react';

const Dashboard = lazy(() => import('./Dashboard')); // separate chunk

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <Dashboard />   {/* downloaded only when this renders */}
    </Suspense>
  );
}

แยกที่ route boundary ก่อน (แต่ละหน้าเป็น chunk) — นั่นคือการ split ที่คุ้มค่าที่สุด และ framework มักทำให้คุณอยู่แล้ว

ecosystem: หยิบอะไรมาใช้

React ตั้งใจให้เล็ก app จริงจึงประกอบ library ที่ยอมรับกันแล้วไม่กี่ตัว ตัวเลือกปัจจุบันที่ลงตัว:

ต้องการ	หยิบ
Routing (SPA)	React Router — หรือ router ใน framework (Next.js)
Server state / data fetching	TanStack Query (React Query) หรือ RTK Query
Form	React Hook Form (+ schema validator อย่าง Zod)
Client state	Zustand หรือ Redux Toolkit (หรือ Jotai) — เกินกว่าที่ Context จัดการได้สบาย
Styling	CSS Modules, Tailwind หรือ CSS-in-JS library
Error monitoring	Sentry (พร้อม error boundary ที่ root ของ app)

flowchart TB
  react["React (view layer)"]
  react --> route["Routing:
React Router / framework"]
  react --> data["Server state:
TanStack Query"]
  react --> forms["Forms:
React Hook Form"]
  react --> state["Client state:
Zustand / Redux Toolkit"]

React บวกชิ้นส่วนที่ app จริงประกอบขึ้น

ความต่างสำคัญที่ช่วยประหยัดความเจ็บปวดมาก: server state (data จาก API — TanStack Query) และ client state (local UI state — useState/Context/Zustand) เป็นคนละปัญหา การพยายามเก็บ server data ใน client store (loading flag เอง, cache invalidation, refetch) คือการคิดใหม่แบบคลาสสิกที่ data library แก้ให้คุณแล้ว

production checklist

build ด้วย production bundle; ตรวจว่าไม่ใช่ dev build
code-split ที่ route ด้วย lazy + Suspense
วาง error boundary ที่ root ของ app (และรอบ subtree ที่เสี่ยง) แล้วต่อเข้ากับ monitoring
เปิด <StrictMode> ไว้ — เป็น dev-only guard ที่ไม่มีต้นทุนใน production
แยก server state (data library) ออกจาก client state (local/store)