Keeping Components Pure

কিছু জাভাস্ক্রিপ্ট ফাংশন pure ফাংশন। pure ফাংশনগুলো শুধু ক্যালকুলেশন করে। আমরা কম্পোনেটগুলো এমন ভাবে লিখব, যাতে করে একটি নির্দিষ্ট কম্পোনেট এর কাজ নির্দিষ্ট হয়। নির্দিষ্ট ইনপুটের জন্য নির্দিষ্ট আউটপুট দেয়। গ্লোবাল ভেরিয়েবল ব্যবহার না করে কম্পোনেন্ট এর ভিতরেই ভেরিয়েবল নিবো।

আপনি এই লেখায় শিখবেন,

• purity কি জিনিস, কিভাবে এটা আপনাকে বাগ এভোয়েড করতে সাহায্য করবে।
• কিভাবে কম্পোনেন্টগুলো পিউর রাখা যায়, যখন কোনো পরিবর্তনে কম্পোনেন্টগুলো রেন্ডার হবে
• Strict Mode এর মাধ্যমে কিভাবে আমরা কম্পোনেন্ট এর ভুলগুলো খুঁজব \

pure ফাংশনের বইশিষ্ট

• এরা শুধু নিজের কাজটাই করে। এরা প্রোগামের আগের কোনো গ্লোবাল ভেরিয়েবলের মান পরিবর্তন করে ব্যবহার করে না।
• একই ইনপুটের জন্য একই আউটপুট হবে আমরা এই ফাংশনে একই ইনপুট পাস করলে প্রত্যেকবার একই আউটপুট পাবো।

আমরা সবাই পিউর ফাংশনের সাথে পরিচিত। আমরা Math করার সময় দেখেছি।

মনে করো ম্যাথের একটি ফর্মূলাঃ y = 2x যদি x = 2 হয়, তাহলে y = 4 সবসময় যদি x = 3 হয়, তাহলে y = 6 সবসময়

যদি আমরা এর জন্য একটি জাভাস্ক্রিপ্ট ফাংশন তৈরি করি। তা এরকম হবেঃ

const double(x){
 return 2*x;
}

এই ফাংশনটিকে বলা হয় pure function. আমরা ৩ পাস করলে সবসময় ৬ ই পাবো।

ঠিক তেমনি React ডিজাইন করা হয়েছে এই কনসেপ্টে। React ধরে নেয়, আপনি প্রত্যেকটি কম্পোনেন্ট pure ভাবে লিখেছেন। এটা মানে, আপনি যে React Component টি তৈরি করেছেন সেটা সবসময় একই JSX রিটার্ন করবে সেম ইনপুটের জন্য।

function Count({number}){
    return (
        <div>
            <p>I am {number}</p>
            <p>I am {number*3}</p>
            <p>I am {number+1}</p>
        </div>
    )
}
 
export default App(){
    return (
        <Count number={3}/>
        <Count number={4}>
    );
}

আপনি যখন number={3} Count এ দিবেন, এটি সবসময় একই আউটপুট দিবে। আপনি যখন একটি রান্নার রেসিপি ফলো করে করবেন, আপনি সবসময় এক ডিস পাবেন। এই ডিসটাই JSX, রিয়াক্ট অ্যাপ যখন রেন্ডায় হয় তখন কম্পোনেন্টগুলো এটি সার্ভ করে।

React rendering প্রসেস পিউর না হলে কি ঘটবে

React’s rendering process must always be pure.

নিচে একটি উদাহরণ দেয়া আছে যেটা পিউর কম্পোনেন্ট এর রুল ব্রেক করেছে।

let number = 0;
function Count(){
    number = number + 1;
    return(
        <div>I am {number}</div>
    );
}
export default App(){
    return (
        <Count />
        <Count >
    );
}

এখানে একটি number ভেরিয়েবল ডিক্লার করা হয়ে, কম্পোনেন্ট এর বাইরে। তাই আমরা এই কম্পোনেন্ট বার বার কল করলে ডিফ্রেন্ট jsx পাবো। চিন্তা করো, এই number ভেরিয়েবলটি যদি আরো অন্যান্য কম্পোনেন্ট রিড করে, তাহলে আরও কতো ভিন্ন ভিন্ন jsx তৈরি হবে।

আমরা আগে উদাহরণে যদি y = 2x; এখানে x = 4 দিলে y = 8 হবে না। এটা যদি আমি কাউকে বলি। সে আমাকে পাগল ছাড়া কিছু বলবে না।

"number"-কে প্রপ হিসাবে পাঠিয়ে আপনি এই ব্যাপার ঠিক করতে পারেন।

function Count({ number }){
    return(
        <div>I am {number + 1}</div>
    );
}
export default App(){
    return (
        <Count number={3}/>
        <Count number={4}>
    );
}

এখন আমাদের কম্পোনেন্টটি Pure. খাঁটি।

Pure functions don’t mutate variables outside of the function’s scope or objects that were created before the call—that makes them impure!