⚛️ React Rendering Masterclass

🧠 Ինչպես է React-ը մտածում՝ Fiber, Reconciliation և Rendering-ի գաղտնիքները

🚀 Ներածություն

Շատ ծրագրավորողներ մտածում են, որ React-ը «պարզապես կրկին նկարում է կոմպոնենտը, երբ state-ը փոխվում է»։ Բայց իրականում React-ը ունի իր «virtual mind» — բարդ համակարգ, որը որոշում է՝

• ինչ փոխել DOM-ում,
• ինչ թողնել նույնը,
• երբ անել rendering,
• ինչպես չխեղդել performance-ը։

Այս ամենը հնարավոր է Fiber architecture-ի շնորհիվ։

---

🧩 Քայլ 1․ Virtual DOM-ի գաղափարը

React-ը երբեք անմիջապես չի փոխում իրական DOM-ը։ Փոխարենը ստեղծում է դրա թեթև պատճենը (Virtual DOM) հիշողության մեջ։

function App() {
  return <h1>Hello, Aram!</h1>;
}

React-ը սա չի նկարում անմիջապես էկրանին։ Նախ ստեղծում է Virtual DOM ծառ՝

App
 └── h1
      └── "Hello, Aram!"

Երբ state-ը փոխվում է, React-ը ստեղծում է նոր Virtual DOM, համեմատում է հինը և նոր տարբերակը՝ 👉 այս քայլը կոչվում է reconciliation (հաշտեցում)։ Այնուհետև React-ը միայն այն տարբերությունները է փոխում իրական DOM-ում, ինչը փոխվել է։

---

⚙️ Քայլ 2․ Fiber — React-ի «ուղեղը»

React 16-ից սկսած (Fiber architecture), rendering-ը ամբողջովին վերաշարադրվել է։ Fiber-ը թույլ է տալիս React-ին միջնարկել (interrupt) rendering-ը, կիսատ թողնել և հետո վերականգնել։

Ամեն կոմպոնենտ հիմա ներկայացվում է որպես “Fiber node”՝ օբյեկտ, որը պահում է՝

{
  type: ComponentFunction,
  pendingProps: {},
  memoizedState: {},
  return: ParentFiber,
  child: ChildFiber,
  sibling: SiblingFiber
}

Այս ծառը React-ին թույլ է տալիս հասկանալ՝

• ով է ծնողը,
• ով է զավակը,
• ով է հաջորդը,
• և արդյո՞ք պետք է այդ Fiber-ը նորից render անել։

---

🧵 Քայլ 3․ Work Loop — Rendering-ը բաժանված է մասերի

React-ը rendering-ը կատարում է երկու փուլով 👇

1. Render phase (pure calculation): React-ը ստեղծում է նոր Fiber ծառ՝ համեմատելով հինը (current tree) նորի հետ (work-in-progress tree)։ Սա կարող է կասեցվել կամ հետաձգվել։
2. Commit phase (real DOM changes): React-ը միայն այս փուլում է իրականում թարմացնում DOM-ը։ Սա միշտ synchronous է։

Render Phase  →  Commit Phase  →  Browser Paint

Այս մոտեցումն է, որ թույլ է տալիս Concurrent Rendering React 18-ում։ React-ը կարող է ասել՝ «Սպասի՛ր, հիմա այս component-ի render-ը չեմ ավարտել, բայց մյուսին ավելի շտապ պետք է ցույց տալ»։

---

⚡ Քայլ 4․ Batching և Scheduler

React-ը երբեք ամեն state update-ի ժամանակ չի rerender անում։ React-ը «բաչում» է դրանք միասին՝ մեկ render-ում։

setCount(c => c + 1);
setCount(c => c + 1);

👉 React-ը սա դիտում է որպես մեկ գործողություն՝ ոչ թե երկու render։ Արդյունքում performance-ը զգալիորեն բարձրանում է։

Concurrent Mode-ում React-ը նաև օգտագործում է scheduler, որը որոշում է՝

• որ component-ը render-ել հիմա,
• իսկ որը՝ հետո, երբ ժամանակ լինի (Idle Priority Rendering)։

---

🔍 Քայլ 5․ Ինչպես տեսնել այս ամենը գործողության մեջ

Բացիր React DevTools → Profiler։ Այնտեղ կարելի է տեսնել՝

• որ component-ներն են rerender լինում,
• որքան ժամանակ է տևում render-ը,
• և արդյոք React-ը batch արե՞լ է update-ները։

function Counter() {
  const [count, setCount] = useState(0);
  console.log('render');
  return (
    <button onClick={() => setCount(c => c + 1)}>
      {count}
    </button>
  );
}

Profiler-ում կնկատես՝ React-ը rerender է անում միայն այն component-ը, որի state-ը փոխվել է — ոչ ամբողջ ծառը։

---

🧩 Եզրակացություն

React-ը պարզապես UI գրադարան չէ։ Դա մի ամբողջ rendering engine է՝ սեփական scheduler-ով, priority system-ով և memory management-ով։ Fiber-ի շնորհիվ React-ը հիմա կարող է լինել՝

• ավելի responsive,
• ավելի performant,
• և թույլ տալ developer-ին գրել declarative code առանց performance-ի մասին շատ մտածելու։