The React Compiler

งานจุกจิกที่ลบทิ้ง

ในอดีต การทำให้ React เร็วหมายถึงต้องโรย memoization ด้วยมือ: useMemo เพื่อ cache ค่าที่คำนวณแพง, useCallback เพื่อให้ identity ของ function คงที่, React.memo เพื่อข้ามการ re-render component ที่ props ไม่เปลี่ยน วิธีนี้ได้ผล แต่รก, ทำพลาดง่าย (ลืม dependency, comparison ผิด) และทำให้ code ที่ควรจะเรียบง่ายรกไปหมด

React Compiler เป็นเครื่องมือ build-time ที่ทำสิ่งนี้อัตโนมัติ compiler วิเคราะห์ component ของคุณและใส่ memoization ที่เทียบเท่าให้ คุณจึงเขียน code แบบตรงไปตรงมาและยังได้พฤติกรรมข้ามงานที่ไม่จำเป็น:

// You write this — no useMemo, no useCallback, no memo:
function ProductList({ products, query }) {
  const filtered = products.filter((p) => p.name.includes(query));
  return (
    <ul>
      {filtered.map((p) => <Product key={p.id} product={p} onSelect={() => select(p.id)} />)}
    </ul>
  );
}
// The compiler memoizes `filtered`, the `onSelect` callbacks, and the elements
// so unrelated state changes don't re-run or re-render this needlessly.

ตาม React docs, compiler ใส่สิ่งที่เทียบเท่า memo ให้ทุก component อัตโนมัติ นั่นคือเหตุผลว่าทำไม compiler จึง “ลดความจำเป็นของ manual memoization”

นี่หมายความว่าอย่างไรต่อคำแนะนำเรื่อง memoization

โมดูล Hooks ครอบคลุม useMemo/useCallback/memo เชิงลึก — และคุณยังต้อง เข้าใจ API เหล่านี้ เพราะคุณจะเจอ code เก่าที่ใช้เต็มไปหมด และต้องรู้ว่าทำอะไร แต่ต่อจากนี้คำแนะนำจะพลิก:

เมื่อ adopt compiler แล้ว: เขียน code แบบตรงไปตรงมา; อย่าเอื้อมไปหยิบ useMemo/useCallback โดย default ปล่อยให้ compiler ตัดสิน
เมื่อไม่มี (หรือใน library ที่ ship แบบยังไม่ compile): manual memoization ยังเป็นเครื่องมือ

ทักษะจึงเปลี่ยนจาก “ฉันควรใส่ useMemo ตรงไหน?” เป็น “code ฉันเขียนตามที่ compiler คาดหวังไหม?“

compiler พึ่งพา Rules of React

compiler จะ memoize ได้อย่างปลอดภัยเฉพาะ code ที่ตาม Rules of React — หลัก ๆ คือ render ต้อง pure และคุณ ต้องไม่ mutate props, state หรือค่าที่ไม่ได้เป็นของคุณ ถ้าคุณละเมิดกฎเหล่านั้น (mutate ตอน render, อ่าน/เขียนของภายนอกใน render body) compiler จะการันตีไม่ได้ว่า component ปลอดภัยที่จะ memoize และอาจข้าม component นั้นไป นี่คือผลตอบแทนเชิงปฏิบัติของ purity ที่คุณเรียนใน Foundations: ไม่ใช่แค่สุขอนามัยเรื่องความถูกต้อง แต่คือสิ่งที่ปลดล็อก optimization อัตโนมัติ

flowchart TB
  before["Before: you add
useMemo / useCallback / memo
by hand (noisy, error-prone)"] --> after["React Compiler
(build time)"]
  after --> result["Plain code +
auto-inserted memoization"]
  rules["Rules of React
(pure render, no mutation)"] --> after

manual vs compiler memoization

สถานะตามจริง: React Compiler เป็นเครื่องมือ auto-memoization อย่างเป็นทางการในปัจจุบัน ใช้งานผ่าน build configuration และ directive ระดับ function และกำลังทยอย roll out ทั่ว ecosystem มอง compiler เป็นทิศทางที่กำลังไป — เขียน code ที่เป็นมิตรกับ compiler (pure) ตั้งแต่ตอนนี้ แล้วพึ่ง compiler แทนการ memoize ทุกอย่างด้วยมือ

⚛️ สรุปหนึ่งบรรทัด

React Compiler เป็นเครื่องมือ build-time ที่ใส่สิ่งที่เทียบเท่า useMemo/useCallback/memo อัตโนมัติ คุณจึงเขียน code แบบเรียบง่ายและยังข้ามงานที่ไม่จำเป็น — compiler “ใส่สิ่งที่เทียบเท่า memo ให้ทุก component อัตโนมัติ” ทำงานได้เฉพาะกับ code ที่ตาม Rules of React (render pure, ไม่ mutate) นั่นคือเหตุผลว่าทำไม purity ถึงสำคัญ คำแนะนำเปลี่ยนจาก “ฉันควรใส่ memoization ตรงไหน?” เป็น “code ฉันเป็นมิตรกับ compiler ไหม?”