# React Compiler සිංහලෙන්

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 එකට කලින්)

```javascript
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 මගින්)

```javascript
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 අවශ්‍ය වෙන්න පුළුවන්.
    

---