React এ pure component/function কি?

কিছু javaScript function হলো pure. pure function শুধু calculation এর কাজ করে।

সূচিপত্রঃ React এ pure component কি? 

• pure component কি? এটি কিভাবে bug avoid করে
• rendering phase এর বাহিরে কিভাবে component pure রাখা যায়  
• strict mode ব্যবহার করে কিভাবে component এর ভুল খুজে পাওয়া যায়

pure component as formulas

1. pure function শুধু নিজের কাজ করেঃ এর মধ্যে কোন variable বা object থাকলে এই function call করার পূর্বে এটা variable বা object কে পরিবর্তন করেনা।

2. একই input এর জন্য একই output হবেঃ pure function এ যে  input দেয়া হবে তার জন্য সব সময় একই output আসবে। 

pure function এর একটি উদাহরণ হলো Math formula

এই ফর্মূলাটি ফলো করুন y=2x

এখন x= 2 হলে, y=4 হবে সবসময়

আবার x=3 হলে y= 6 হবে সব সময়

x=3 হলে y কখনোই 9 অথবা -1 বা 2.5 হবেনা

এটাকে এখন javaScript function এ লিখব

function double (number){

return 2*number

}

উপরের এই উদাহরণে double হলো একটা pure function, যদি 3 pass করেন, এটা সব সময় 6 রিটার্ণ করবে।

React এই concept এর উপর কাজ করে। React আশা করে আপনি সব সময় pure component তৈরী করবেন। অর্থাৎ react সব সময় একই input এর জন্য একই jsx return করবে।

App.jsx

function Recipe({ drinkers }) {

  return (

    <ol>    

      <li>Boil {drinkers} cups of water.</li>

      <li>Add {drinkers} spoons of tea and {0.5 * drinkers} spoons of spice.</li>

      <li>Add {0.5 * drinkers} cups of milk to boil and sugar to taste.</li>

    </ol>

  );

}

export default function App() {

  return (

    <section>

      <h1>Spiced Chai Recipe</h1>

      <h2>For two</h2>

      <Recipe drinkers={2} />

      <h2>For a gathering</h2>

      <Recipe drinkers={4} />

    </section>

  );

}

এখানে drinker={2} pass করা হয়েছে, ফলে সব সময় 2 cups of water,  jsx return করে।

এখন 4,6 দিলে সব সময় 4,6 এর জন্য same jsx return করবে।

side effectsঃ

কিভাবে একটি component impure হয়ঃ 

React এর rendering process অবশ্যই pure হতে হবে।

component শুধু jsx return করবে এবং কোন object বা variable এর মান পরিবর্তন করবে না। যদি পরিবর্তন করে তাহলে impure component হয়ে যাবে। যেমনঃ 

App.jsx

let guest = 0;

function Cup() {

  // Bad: changing a preexisting variable!

  guest = guest + 1;

  return <h2>Tea cup for guest #{guest}</h2>;

}

export default function TeaSet() {

  return (

    <>

      <Cup />

      <Cup />

      <Cup />

    </>

  );

}

এই component এর বাহিরে guest নামে একটি variable আছে এবং এই component এই variable কে read ও writing করছে। অর্থাৎ এই component যতবার কল হবে ততবার ভিন্ন ভিন্ন jsx return করবে এবং অন্য component ও এই guest variable read করলে ভিন্ন jsx return করবে। আর এটা হলো impure

এই সমস্যাকে props pass করে fixed করা যায়।

App.jsx

function Cup({ guest }) {

  return <h2>Tea cup for guest #{guest}</h2>;

}

export default function TeaSet() {

  return (

    <>

      <Cup guest={1} />

      <Cup guest={2} />

      <Cup guest={3} />

    </>

  );

}

এখন এটা pure component এবং guest props এর উপর নির্ভর করে same inputেএর জন্য same jsx return করবে।

pure component এ rendering এর সময় order এর কারণে কোন সমস্যা হয়না। যে কোন order হলেও  same input এর জন্য same jsx return করবে।

Local Mutation

উপরের উদাহরণে আমরা দেখেছি, component rendering এর সময় আগে থেকে assign করা variable কে পরিবর্তন করে। এটাকে mutation বলে। pure function variable কে muted করেনা function scope এর বাহিরে থেকে। যেই variable বা object তৈরী করা হয়েছে component call করার আগে। এটা function কে impure করে।

Rendering এর সময় variable বা object তৈরী করলে সেটা পরিবর্তন করলে কোন সমস্যা নেই। এটা pure ই থাকবে। নিচের উদাহরণে একটি array তৈরী করা হয়েছে এবং cup variable এ assign করা হয়েছে। তারপর কাপগুলো push করা হয়েছে। 

App.jsx

function Cup({ guest }) {

  return <h2>Tea cup for guest #{guest}</h2>;

}

export default function TeaGathering() {

  let cups = [];

  for (let i = 1; i <= 12; i++) {

    cups.push(<Cup key={i} guest={i} />);

  }

  return cups;

}

এখানে যদি cup array কে TeaGathering এর বাহিরে assign করা হতো এটা একটা বিশাল জামেলা হতো। কিন্তু উপরের উদাহরণে TeaGathering এর মধ্যে array রাখায় একই  rendering এ render হয়। ফলে বাহিরে থেকে কোন component এখানে কি হচ্ছে বুজতে পারছেনা। এটাকে Local Mutation বলে। এটা হলো component little secret

side effect

সব সময় function কে pure রাখা সম্ভব হয়না, মাঝে মধ্যে user interaction, automatic কোন কাজ হওয়া এসব side effect এ হয়। এগুলো on the side এ হয়, rendering এ হয়না। 

side effect সাধারণত event handlers এ থাকে। user এর interaction এ side effect ঘটে। এটা rendering এর সময় হয় না, ফলে এটা pure না হলেও সমস্যা নেই। 

যদি side effect ঘটানোর জন্য event handler সহ কোন option না থাকে তাহলে useEffect hook use করে side effect ঘটানো যায়। এটা rendering এর পরে ঘটে।