React Compiler ในปี 2026: Automatic Memoization และคำถามสัมภาษณ์งาน

React Compiler ถือเป็นการเปลี่ยนแปลงครั้งสำคัญในการพัฒนาแอปพลิเคชัน React โดยเครื่องมือนี้ทำหน้าที่วิเคราะห์โค้ดในขั้นตอน build และเพิ่ม memoization โดยอัตโนมัติ ซึ่งช่วยลดภาระของนักพัฒนาในการจัดการ useMemo, useCallback และ React.memo ด้วยตนเอง ด้วยเวอร์ชันเสถียร v1.0 ที่เปิดตัวในเดือนตุลาคม 2025 React Compiler ได้ถูกนำไปใช้งานจริงที่ Meta และได้ผลลัพธ์ที่ยอดเยี่ยม ในปี 2026 React Compiler ได้กลายเป็นมาตรฐานใหม่สำหรับโปรเจกต์ React ที่ต้องการประสิทธิภาพสูงสุด และเป็นหัวข้อที่ถูกถามบ่อยในการสัมภาษณ์งานตำแหน่ง Frontend Developer

React Compiler คืออะไร และทำงานอย่างไร

React Compiler เป็น build-time optimizing compiler ที่วิเคราะห์ component และ hook ของ React จากนั้นเพิ่ม memoization แบบละเอียดในตำแหน่งที่เหมาะสม ต่างจาก memoization แบบ manual ด้วย useMemo หรือ useCallback ตรงที่ compiler สามารถทำ memoize แบบมีเงื่อนไขและในระดับที่ละเอียดกว่าที่นักพัฒนาจะสามารถดูแลรักษาได้ด้วยตนเอง

Compiler ทำงานเป็น Babel plugin (โดยมีการรองรับ SWC ที่เพิ่มขึ้นใน Next.js 15.3.1+) ประมวลผลแต่ละ component อย่างอิสระ โดยแปลง Babel AST เป็น High-Level Intermediate Representation (HIR) แบบกำหนดเอง ก่อนที่จะรันหลายขั้นตอนการ optimize

ผลลัพธ์จากการใช้งานจริงที่ Meta ยืนยันประสิทธิภาพ: Quest Store มีความเร็วในการโหลดเริ่มต้นเพิ่มขึ้นถึง 12% และ interaction เร็วขึ้นกว่า 2.5 เท่า Sanity Studio รายงานว่าเวลา render ลดลง 20-30% จาก 1,231 component ที่ถูก compile

โครงสร้างคำตอบสำหรับสัมภาษณ์: นิยาม compiler อธิบายว่าทำงานในขั้นตอน build (ไม่ใช่ runtime) กล่าวถึง pipeline HIR และอ้างอิงตัวเลขจากการใช้งานจริง

Compilation Pipeline: จากโค้ดต้นฉบับสู่ Output ที่ถูก Optimize

คำถามนี้ทดสอบความเข้าใจเชิงลึก Pipeline ของ React Compiler มี 7 ขั้นตอน:

1. Source เป็น AST — Babel แยกวิเคราะห์ JavaScript/TypeScript เป็น Abstract Syntax Tree
2. AST เป็น HIR — Compiler แปลง AST เป็น High-Level Intermediate Representation ที่ออกแบบมาเฉพาะสำหรับ component model ของ React
3. SSA Transform — Single Static Assignment ทำให้แต่ละตัวแปรถูกกำหนดค่าเพียงครั้งเดียว ช่วยให้ติดตามการไหลของข้อมูลได้แม่นยำ
4. Type Inference และ Effect Analysis — Compiler จำแนกประเภทของการดำเนินการตามผลกระทบ: read, store, capture, mutate, freeze
5. Reactive Analysis — ทุก expression ถูกจัดประเภทเป็น static (ค่าคงที่, import) หรือ reactive (มาจาก props, state, context)
6. Scope Discovery — Compiler ระบุ scope ของ memoization ที่เป็นอิสระ ซึ่งสามารถ cache และ invalidate ได้แยกจากกัน
7. Code Generation — สร้าง JavaScript ที่ถูก optimize พร้อม memoization อัตโนมัติ

// Before compilation
function UserProfile({ user, theme }) {
  const fullName = user.firstName + ' ' + user.lastName;
  const style = { color: theme.primary, fontSize: 16 };
  return <div style={style}>{fullName}</div>;
}

// After compilation (simplified representation)
function UserProfile({ user, theme }) {
  const $ = useMemoCache(4);
  let fullName;
  if ($[0] !== user.firstName || $[1] !== user.lastName) {
    fullName = user.firstName + ' ' + user.lastName;
    $[0] = user.firstName;
    $[1] = user.lastName;
    $[2] = fullName;
  } else {
    fullName = $[2];
  }
  // style and JSX similarly memoized...
}

จุดสำคัญสำหรับการสัมภาษณ์: compiler ทำ memoization ที่ ระดับค่า (value level) ไม่ใช่ระดับ component แต่ละค่าที่ถูกคำนวณจะได้รับ cache slot ของตัวเอง ซึ่งจะถูก invalidate เฉพาะเมื่อ dependency เฉพาะของมันเปลี่ยนแปลง ความละเอียดนี้เหนือกว่าสิ่งที่ useMemo ทำได้ในทางปฏิบัติ

Rules of React: สิ่งที่ Compiler สมมติ

React Compiler ทำ static analysis ภายใต้สมมติฐานว่า component ปฏิบัติตาม Rules of React เมื่อโค้ดละเมิดกฎเหล่านี้ compiler จะข้ามการ optimize สำหรับ component นั้น — อย่างเงียบๆ นี่เป็นหัวข้อสัมภาษณ์ที่พบบ่อย

กฎหลัก 3 ข้อ:

• Component และ hook ต้อง pure — ด้วย input เดียวกัน render ต้องสร้าง output เดียวกัน ห้ามอ่านหรือเขียน mutable state ภายนอกระหว่าง render
• Hook ต้องปฏิบัติตามข้อกำหนดการเรียกใช้ — ห้ามเรียก hook แบบมีเงื่อนไข ในลูป หรือในฟังก์ชันซ้อนกัน
• Props และ state เป็น immutable ภายใน render — ห้ามแก้ไข props หรือ state โดยตรง ต้องใช้ setter function เสมอ

// Rule violation: mutating during render
function BadCounter({ items }) {
  // The compiler will skip this component
  items.sort(); // Mutates the prop array!
  return <ul>{items.map(i => <li key={i}>{i}</li>)}</ul>;
}

// Correct: create a new sorted array
function GoodCounter({ items }) {
  const sorted = [...items].sort();
  return <ul>{sorted.map(i => <li key={i}>{i}</li>)}</ul>;
}

การรวมกับ ESLint: ตรวจจับปัญหาก่อน Build

แพ็กเกจ eslint-plugin-react-compiler แบบแยกเดี่ยวถูก deprecated ตั้งแต่ปลายปี 2025 กฎ lint ทั้งหมดที่เกี่ยวข้องกับ compiler ย้ายไปอยู่ใน eslint-plugin-react-hooks@latest

การตั้งค่าด้วย ESLint flat config:

import reactHooks from 'eslint-plugin-react-hooks';
import { defineConfig } from 'eslint/config';

export default defineConfig([
  reactHooks.configs.flat.recommended,
]);

กฎที่ compiler ตรวจจับ pattern สำคัญ 3 อย่าง:

• set-state-in-render — เรียก setState ระหว่าง render ทำให้เกิด infinite loop
• set-state-in-effect — การคำนวณหนักภายใน effect ที่ก่อให้เกิด cascading re-render
• refs — เข้าถึง .current บน ref ระหว่าง render (ref เป็น mutable escape hatch ไม่ปลอดภัยสำหรับ render)

สำหรับการสัมภาษณ์ กลยุทธ์การนำไปใช้ที่แนะนำคือ: เปิดใช้กฎ ESLint ก่อน แก้ไขการละเมิดทั้งหมด จากนั้นจึงเปิดใช้ compiler วิธีการแบบเป็นขั้นตอนนี้ช่วยลดปัญหาที่ไม่คาดคิด

กรณีที่ยังต้อง Optimize ด้วยตนเอง

Compiler ไม่ได้กำจัดงาน optimize ประสิทธิภาพทั้งหมด หลายสถานการณ์ยังต้องการการจัดการด้วยตนเอง:

1. การ subscribe กับ external store

Compiler ติดตามเฉพาะ React state, props และ context เท่านั้น External store (Redux, Zustand, MobX) ต้องใช้ useSyncExternalStore หรือกลไก selector ของ store เองเพื่อ optimize การ render

2. การคำนวณที่หนักมากกับชุดข้อมูลขนาดใหญ่

แม้ compiler จะ memoize ค่าที่ return แต่มันไม่ได้วัดค่าใช้จ่ายในการประมวลผล ฟังก์ชันที่กรองข้อมูล 100,000 รายการยังคงทำงานเมื่อ dependencies เปลี่ยน สำหรับการประมวลผลที่หนักจริงๆ useMemo พร้อม dependencies ที่ชัดเจนยังคงใช้ได้

3. Logic แบบ imperative ที่ใช้ ref

Ref ถูกตั้งใจไว้ให้อยู่นอก reactive model ของ compiler งาน animation, canvas drawing และการเชื่อมต่อกับไลบรารี DOM ภายนอกยังต้องควบคุมด้วยตนเอง

4. Memoization ข้าม component

Compiler ทำ memoize ภายใน component หรือ hook เดียว การแบ่งปันค่าที่คำนวณแล้วระหว่าง component ยังต้องใช้ lifting state, context หรือ cache layer ภายนอก

// The compiler handles this automatically
function ProductCard({ product, currency }) {
  const formattedPrice = formatCurrency(product.price, currency);
  const discount = product.originalPrice - product.price;
  return (
    <div>
      <span>{formattedPrice}</span>
      {discount > 0 && <Badge>Save {discount}</Badge>}
    </div>
  );
}

// Manual optimization still needed: expensive external computation
function DataGrid({ rows }) {
  const processedRows = useMemo(
    () => rows.map(row => heavyTransform(row)), // O(n) with large n
    [rows]
  );
  return <VirtualList items={processedRows} />;
}

วิธีเปิดใช้งาน React Compiler ในแต่ละ Framework

ผู้สัมภาษณ์มักทดสอบความรู้เชิงปฏิบัติเกี่ยวกับการตั้งค่า toolchain:

Next.js (15.3.1+): รองรับ SWC แบบ native เปิดใช้ใน next.config.js:

const nextConfig = {
  experimental: {
    reactCompiler: true,
  },
};
export default nextConfig;

Vite 8 กับ @vitejs/plugin-react v6: เนื่องจาก v6 ตัด Babel ภายในออกเพื่อใช้ oxc แทน compiler จึงต้องการ @rolldown/plugin-babel:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import babel from '@rolldown/plugin-babel';
import { reactCompilerPreset } from 'babel-plugin-react-compiler';

export default defineConfig({
  plugins: [
    react(),
    babel({ presets: [reactCompilerPreset] }),
  ],
});

Expo SDK 54+: เปิดใช้โดยค่าเริ่มต้น ไม่ต้องตั้งค่าเพิ่มเติม

ตารางเปรียบเทียบ: React Compiler กับ Manual Optimization

| ด้าน | React Compiler | Manual (useMemo/useCallback) | |------|----------------|----------------------------------| | ความละเอียด | ระดับค่า ต่อ expression | ระดับ block ตามที่นักพัฒนากำหนด | | Memoization แบบมีเงื่อนไข | รองรับ | ไม่สามารถทำได้ | | ต้นทุนการดูแลรักษา | ไม่มี — ทำงานอัตโนมัติ | สูง — ต้องจัดการ dependency arrays และ wrapper components | | การทำงานข้าม component | ทำงานในขอบเขต component เดียว | ทำงานในขอบเขต component เดียว | | External stores | ไม่ติดตาม | ไม่ติดตาม (ใช้ useSyncExternalStore) | | Class components | ไม่รองรับ | ไม่เกี่ยวข้อง (ใช้ React.memo) | | ความต้องการ build | ต้องมี Babel plugin หรือ SWC | ไม่ต้องการ | | ประสิทธิภาพสูงสุด | ลด re-render 20-60% (โดยทั่วไป) | ขึ้นอยู่กับทักษะของนักพัฒนา |

สรุปสำหรับสัมภาษณ์: compiler ทำ automate 80-90% ของ memoization ที่นักพัฒนาเคยต้องทำด้วยตนเอง ด้วยความละเอียดที่ดีกว่าและไม่มี overhead ในการดูแลรักษา ส่วนที่เหลืออีก 10-20% เกี่ยวข้องกับการเชื่อมต่อภายนอก การคำนวณที่หนักมาก และงาน DOM แบบ imperative

คำถามสัมภาษณ์งานที่พบบ่อย

ถาม: React Compiler ทำงานในขั้นตอน build หรือ runtime? Build time Compiler เป็น Babel plugin ที่แปลงโค้ดต้นฉบับระหว่างการ compile Output ที่ถูก optimize ใช้ runtime helper (useMemoCache) เพื่อเก็บค่าที่ cache ไว้ แต่การวิเคราะห์ทั้งหมดเกิดขึ้นก่อน deployment

ถาม: ควรลบ useMemo และ useCallback ที่มีอยู่แล้วหรือไม่? ทีม React แนะนำให้คง memoization แบบ manual ที่มีอยู่ไว้ การลบออกอาจเปลี่ยน output ของการ compile ในรูปแบบที่ละเอียดอ่อน สำหรับโค้ดใหม่ ให้พึ่งพา compiler และเพิ่ม memoization แบบ manual เฉพาะหลังจากที่ profiling ระบุความต้องการเฉพาะ

ถาม: จะเกิดอะไรขึ้นเมื่อ compiler พบโค้ดที่ไม่สามารถ optimize ได้? Compiler จะข้าม component หรือ hook นั้นอย่างเงียบๆ แอปพลิเคชันยังทำงานถูกต้อง — ส่วนนั้นเพียงแค่ทำงานโดยไม่มี memoization อัตโนมัติ กฎ ESLint ช่วยตรวจจับกรณีเหล่านี้ระหว่าง development

ถาม: Compiler ทำงานร่วมกับ Server Components อย่างไร? Server Components ทำงานบน server และสร้าง output แบบ serialized — ไม่มีการ re-render บน client Compiler มุ่งเป้าไปที่ client component ที่ re-render เป็นปัญหาด้านประสิทธิภาพหลัก การ optimize ทั้งสองอย่างเสริมซึ่งกันและกัน: Server Components ลดขนาด bundle, compiler ลดค่าใช้จ่ายในการ re-render ฝั่ง client

ถาม: Compiler สามารถ optimize custom hook ได้หรือไม่? ได้ Compiler วิเคราะห์ทั้ง component และ hook Custom hook ที่คำนวณ derived state จะมีค่า return ที่ถูก memoize โดยอัตโนมัติ ซึ่งเป็นประโยชน์ต่อทุก component ที่เรียกใช้

สรุป

• React Compiler v1.0 เป็นเครื่องมือ build-time ที่เพิ่ม memoization แบบละเอียดในระดับค่าผ่าน pipeline การ compile 7 ขั้นตอน (AST, HIR, SSA, type inference, effect analysis, reactive analysis, code generation)
• Compiler สมมติว่า component ปฏิบัติตาม Rules of React การละเมิดจะทำให้เกิด silent opt-out ซึ่งตรวจจับได้โดย eslint-plugin-react-hooks พร้อม preset recommended
• การ optimize ด้วยตนเองยังจำเป็นสำหรับ external store subscription การคำนวณหนักกับชุดข้อมูลขนาดใหญ่ logic imperative ที่ใช้ ref และ caching ข้าม component
• การตั้งค่าจริงแตกต่างกันตาม framework: SWC-native ใน Next.js, @rolldown/plugin-babel ใน Vite 8, เปิดใช้โดยค่าเริ่มต้นใน Expo SDK 54+
• สำหรับการสัมภาษณ์ ต้องสามารถอธิบายได้ทั้งสิ่งที่ compiler ทำ automate (80-90% ของ memoization) และสิ่งที่มันไม่ทำ (external state, การคำนวณหนักข้าม component, class components)
• แนวทางการนำไปใช้ที่แนะนำคือเปิด ESLint rules ก่อน จากนั้นจึงเปิดใช้ compiler — ผู้สัมภาษณ์มักถามเกี่ยวกับกลยุทธ์แบบเป็นขั้นตอนนี้