Trigger a render (ট্রিগারিং স্টেপ):

মূলত দুইটা করনে রিয়াক্টের render মেথডটা কল হয় বা রেন্ডারিং ট্রিগার হয়ঃ

1. ইনিশিয়াল রেন্ডার (initial render): একদম সর্বপ্রথম যখন এপ্লিকেশন রান হয় তখন রিয়াক্ট HTML এর একটা root এলিমেন্টের ভিতর রিয়াক্টের সমস্ত কম্পোনেন্টকে রেন্ডার করে দেয় তার React.render() মেথডটাকে কল করার মাধ্যমে ।

2. যখন কোন স্টেট আপডেট হয় (Re-render when state update): প্রথমবার সমস্ত কম্পোনেন্ট UI তে এসে যাওয়ার পর, যখন কোন কম্পোনেন্টের ভিতরে কোন স্টেট চেঞ্জ হয় তখন রিয়াক্ট অটেমেটিক ভাবে তার render() মেথডকে কল করে বা রি-রেন্ডার ট্রিগার হয় ।

React render your component (রেন্ডারিং স্টেপ):

যখন রিয়াক্টের রেন্ডারিং টা ট্রিগার হয় তখন রিয়াক্ট তার কম্পোনেন্টগুলোকে কল করে। যাতে সে বুঝতে পারে কোথায় পরিবর্তনটা হয়েছে।

• এক্ষেত্রে প্রথম রেন্ডারে রিয়াক্ট তার রুট (root) কম্পোনেন্টকে কল করে

• পরবর্তি সময়ে রি-রেন্ডার ট্রিগার হলে যেই কম্পোনেন্ট থেকে রি-রেন্ডার ট্রিগার হয়েছে সেই কম্পোনেন্টকে কল করে এবং তার প্রথম রেন্ডারের যে Render Tree তার একটা snapshot নিয়ে রাখে এবং পরবর্তি রেন্ডারেরে একটা snapshot নিয়ে তার ভার্চুয়াল ডম এ Diffing এলগরিদমের মাধ্যমে কেলকুলেট করে যে কোথায় পরিবর্তন হয়েছে । তারপর সে নেক্সট স্টেপে চলে যায় কমিট করার জন্য ।

রেন্ডারিং প্রসেসটা রিকারসিভলি হয়ে থাকে, তার মানে হলো রিয়াক্ট রেন্ডারিং এ যেই কম্পোনেন্টকে কল করেছে তার ভিতর যদি নেস্টেড আরও কোন কম্পোনেন্ট থাকে সেগুলাও রি-রেন্ডার হয়

React Commits changes to the DOM (কমিটিং স্টেপ):

কমিটিং ফেজে এসে রিয়াক্ট DOM মডিফাই করে । এক্ষেত্রে,

• প্রথম রেন্ডারে রিয়াক্ট DOM এর appendChild() কল করে সমস্ত DOM Nodesগুলোকে রুট এলিমেটে এড করে দেয়

• রি-রেন্ডারের ক্ষেত্রে রিয়াক্ট তার ভার্চুয়াল ডম এ যেই অংশটুকুর পরিবর্তন ডিটেক্ট করতে পারে শুধুমাত্র সেই অংশটুকু DOMএ চেঞ্জ করে দেয়

প্রথমবার রেন্ডার হয়ে যাওয়ার পর রিয়াক্ট শুধু তখনি DOM এ চেঞ্জ করে যখন সে দেখতে পারে আগের রেন্ডার এবং পরের রেন্ডারে কোন পার্থক্য আছে। যেই সকল কম্পোনেন্টে কোন প্রকার চেঞ্জ দেখা যায়না রিয়াক্ট সেই সকল কম্পোনেন্টে হাত ই দেয়না।