React කියන්නේ කාලයත් සමග නිතරම update වෙමින්, නව features එකතු වෙන JavaScript library එකක්. 2024 React Conf එකේදී developers ලාට වැදගත් සහ game-changing feature එකක් announce කරලා තියෙනවා. ඒක තමයි React Compiler.

අපි මේ ලිපියෙන් බලමු:

• React Compiler කියන්නේ මොකක්ද?

• React Compiler භාවිතා කරන්න ඕනේ ඇයි?

• React Compiler භාවිතා කරන්නේ කොහොමද?

• React Compiler භාවිතා කිරීමෙන් ලැබෙන ප්‍රතිලාභ මොනවාද?

---

React Compiler කියන්නේ මොකක්ද?

React Compiler ගැන යන්න කලින්, මුලින්ම බලමු “Compile” කියන්නේ මොකක්ද කියලා.

Compile කියන්නේ අපි ලියපු source code (උදාහරණයක් විදිහට JavaScript, TypeScript, C++ code) එක computer එකට තේරෙන machine code හෝ optimized instructions වලට පරිවර්තනය කරන විශේෂ program එකක්.

• TypeScript compiler → TypeScript code එක JavaScript එකට badagena denawa.

• Babel → modern JavaScript code එක backward-compatible JavaScript එකට badagena denawa.

• C++ compiler → C++ code එක CPU එකට තේරෙන machine code එකට badagena denawa.

සරලව කියනවනම්:
Compile කියන්නේ → “අපිට හොඳට කියවෙන්න පුළුවන් code එක, computer එකට තේරෙන ආකාරයට පරිවර්තනය කරන process එක.”

---

දැන් බලමු React Compiler කියන්නේ මොකක්ද කියලා.

React වලදි අවශ්‍ය නොවන re-rendering වළක්වාගන්න අපිට memo, useMemo, useCallback භාවිතා කරන්න පුළුවන්. නමුත් ඒවා බොහෝ විට code එක සංකීර්ණ කරනවා, සහ වැරදි ලෙස භාවිතා වීමේ අවදානමක් තියෙනවා.

React Compiler භාවිතයෙන් මේ ගැටළු වලට විසඳුමක් ලැබෙනවා. React Compiler කියන්නේ static compiler එකක්. මේක ඔයාගේ components build time එකේදීම ස්වයංක්‍රීයව optimize කරනවා. ඒ කියන්නේ ඔයා performance hacks (memo, useMemo, useCallback) තැන තැන දාන්න ඕනේ වෙන්නේ නැහැ. React Compiler තමන්ම code එක analyze කරලා, අවශ්‍ය optimizations යොදනවා.

---

React Compiler භාවිතා කරන්න ඕනේ ඇයි?

React Compiler එක භාවිතා කිරීම මගින් ලැබෙන advantages ගැන කතා කරන්න කලින්, පහල sample code දෙකේ වෙනස බලන්න.

🔴 Manual Optimization (Compiler එකට කලින්)

import React, { useState, useCallback, memo } from "react";

const Button = memo(({ onClick }) => {
  console.log("Button rendered");
  return <button onClick={onClick}>Increment</button>;
});

export default function App() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount((c) => c + 1);
  }, []);

  return (
    <div>
      <h1>Count: {count}</h1>
      <Button onClick={handleClick} />
    </div>
  );
}

මෙහිදී memo සහ useCallback manually use කරන්න වෙනවා unnecessary re-renders වළක්වා ගන්න.

---

🟢 Automatic Optimization (React Compiler මගින්)

import React, { useState } from "react";

function Button({ onClick }) {
  console.log("Button rendered");
  return <button onClick={onClick}>Increment</button>;
}

export default function App() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount((c) => c + 1);
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      <Button onClick={handleClick} />
    </div>
  );
}

---

React Compiler එකේ Advantages

• Automatic Memoization:

  memo හෝ useCallback වගේ hacks manual add කරන්න ඕනේ නෑ. React Compiler එක විසින් code එක analyze කරලා අවශ්‍ය වෙලාවට memoization handle කරනවා.

• Cleaner Code:

  useCallback සහ useMemo wrappers අඩු වෙන නිසා code එක සරල වීම සහා maintain කරන්න ලේසි වෙනවා.

• Optimize Performance:

  Build time එකේදිම compiler එක අවශ්‍ය optimizations යොදනවන නිසා අනවශ්‍ය re-render වැලකීම මගින් application එක හොද performance level එකකින් වැඩ කරනවා.

• Better Developer Experience:
  Developers ලට performance hacks ගැන වැඩි අවදානයක් දෙන්නේ නැතුව features develop කරන එක focused කරන්න පුළුවන්.

---

Limitations

• හැම situation එකකම compiler automatic optimize කරන්නේ නෑ.

• Complex objects, refs, context-heavy usage වගේ තැන්ව ලදී developer intervention අවශ්‍ය වෙන්න පුළුවන්.

---