สำหรับ 1 ใน ฟีเจอร์ใหม่สำหรับ React 19 คือ React Compiler ซึ่งเป็น ฟีเจอร์ที่น่าสนใจมากๆ ผมคิดว่าเจ้านี่จะมาช่วยให้ Developer อย่างเราๆ ทำงานได้ดี และง่ายขึ้นมากๆ ว่าแต่นั้นคืออะไรไปดูกันครับ

React compiler: Automatic conversion of React code into standardized, optimized JavaScript code. It allows compiled React code to automatically render only the right parts of the UI when the state changes, reducing the need for useMemo, useCallback, and memo. This means faster React applications with simplified codebases.

...ใช่ครับ มันคือการยุบรวมการใช้งาน useMemo, useCallback จาก React version 18 ให้ทำงานโดยอัติโนมัติ เมื่อคุณอัพเกรดเป็น React 19!

Code Example

import React, { useMemo } from "react";

const AlphabetList = () => {
  // define the alphabet array via useMemo()
  const alphabet = useMemo(() => {
    return Array.from({ length: 26 }, (_, i) => String.fromCharCode(65 + i));
    // no dependencies, so it will only be calculated once on the first render
  }, []);

  return (
    <div>
      <h2>Alphabet List</h2>
      <ul>
        {/* render the alphabet as list items */}
        {alphabet.map((letter, index) => (
          <li key={index}>{letter}</li>
        ))}
      </ul>
    </div>
  );
};

export default AlphabetList;

Note จากโค้ดข้างบนนี้ เราจำทำใช้ useMemo hook ในการทำ caching value โดยไม่ต้อง re-render components ใหม่

แล้ว React Compiler จริงๆแล้วมันคืออะไรกันล่ะ ?

อธิบายแบบสั้นๆ คือ ปรับปรุง และ จดจำ หมายถึง react compiler จะทำการ optimize codebase ของเราให้ทำงานได้ดียิ่งขึ้น และ ทำ memorization ทั้งในส่วนของ function และ values นั่นเอง

ทำให้มีข้อดีคือ

No more memoization headaches:

• ลดความน่าปวดหัวในการที่ต้องมาทำ useMemo, useCallback ในการทำ caching value และ re-render components ใหม่

Better developer experience:

• ทำให้มีความสามารถในการ debug และ debug performance ของ codebase ของเราได้ดียิ่งขึ้น

Faster React applications:

• ทำให้เกิดการ render เท่าที่จำเป็นเท่านั้น เพื่อเพิ่มความเร็วของในทำงานของแอพให้ดียิ่งขึ้นด้วย

Thanks for watching!