সহজ বাংলায় React Hooks সিরিজ। পর্ব ৫ – useContext

আমরা আগের পর্বগুলোতে useState, useEffect, useRef, useReducer নিয়ে আলোচনা করেছি। আজকের পর্বে আমরা useContext নিয়ে আলোচনা করবো ইনশাল্লাহ।

useContext এর নাম থেকেই আমরা বুঝতে পারছি এই hook টি React Context এর সাথে সম্পর্কিত। আমরা এই পোস্টে context নিয়ে বিস্তারিত আলোচনায় যাব না, কিন্তু আমরা হাল্কা আলোচনা করবো useHook এর ব্যাখ্যায় যাওয়ার আগে।

Context কি? React Context হচ্ছে এমন একটি মেথড যেটার মাধ্যমে আমরা খুব সহজে আমাদের parent component থেকে child component এ props পাঠাতে পারি। আমরা সবাই জানি React এর সবথেকে বেষ্ট জিনিস হচ্ছে আমরা আমাদের UI কে reusable component এ বিভক্ত করতে পারি। ছোট ছোট কম্পোনেন্ট এ আমরা আমাদের পুরো প্রোজেক্টকে ভাগ করে ফেলতে পারি। এখন এই ছোট ছোট কম্পোনেন্ট এ কিন্তু আমাদের উপড়ের লেভেল থেকে মানে প্যারেন্ট থেকে ডাটা পাস করা লাগে। আমাদের প্রোজেক্ট যখন ছোট থাকে তখন কিন্তু আমরা সহজেই props এর মাধ্যমে ডাটা পাস করে আমাদের state ম্যানেজমেন্ট করতে পারি কিন্তু প্রোজেক্ট যখনই একটু বড় হয়ে যাই এবং আমাদের অনেক কম্পোনেন্ট থাকে তখন আমাদের এর এরকম প্যারেন্ট থেকে ডাটা পাস করে কাজ হয় না। তখনি আমাদের কোন একটি গ্লোবাল ষ্টেট ম্যানেজমেন্ট সিস্টেম দরকার হয় যেটার মাধ্যমে আমরা ডাটা এমন ভাবে পাস করতে পারি যাতে আমাদের পুরো অ্যাপ্লিকেশনই ওই ডাটা পেয়ে যায় এবং আমাদের এর ম্যানুয়ালি পাস করা লাগে না।

নিচের ডায়াগ্রাম থেকে আমরা আরও ভালভাবে ক্লিয়ার হতে পারি। আমরা যদি আমাদের প্যারেন্ট থেকে একটি value A পাঠাতে চাই আমাদের “Component E” te তাহলে without context এ আমরা দেখতে পাই যে আমাদের কে component A, C এর ভিতরে দিয়ে আগে যাওয়া লাগবে কিন্তু with context এ আমরা “Component E” তে সরাসরি কিন্তু value A পেয়ে যাই। এখানে আরেকটা জিনিস ইম্পরট্যান্ট সেটা হচ্ছে আমাদের value A কিন্তু component A এবং C তেও আছে।

আশা করি তাহলে উপড়ের আলোচনা থেকে আমরা আমরা context সম্পর্কে একটি ধারনা পেয়েছি। আচ্ছা, তাহলে এখন আমরা আসি useContext এ।

const value = useContext(MyContext);

এখানে useContext hook টি একটি context object গ্রহন করে। সুতরাং আমরা context থেকে যে value পাস করি সেটা আমরা আমাদের useContext hook এর মাধ্যমে পেতে পারি আমাদের যেকোনো component.

একটি ইম্পরট্যান্ট নোট আমাদের React Official Documentation থেকে।

Don’t forget that the argument to useContext must be the context object itself:

• Correct: useContext(MyContext)
• Incorrect: useContext(MyContext.Consumer)
• Incorrect: useContext(MyContext.Provider)

useContext এ আমরা consumer এবং provider পাস করবো না বরং আমাদের context object পাস করা লাগবে। যেকোনো কম্পোনেন্ট যেটা useContext ব্যাবহার করে, সেটা সবসময় re-render হবে যদি context এর value চেঞ্জ হয়।

তাহলে এখন আমরা চলে যাই আমাদের code এ। আমরা চাই একটি theme context বানানোর জন্যে যেটা আমাদের অ্যাপের light এবং dark theme কে কন্ট্রোল করবে। প্রথমে আমরা আমাদের কম্পোনেন্ট স্ত্রাকচার দেখি।

আমরা চাচ্ছি আমাদের ThemedButton component এ আমাদের অ্যাপের থিমকে প্রভাইড করতে যাতে সেটি অটোমেটিক color change করতে পারে।

তাহলে প্রথমে আমরা আমাদের context বানিয়ে ফেলি। তো এখানে আমরা দেখতে পারছি একটি context বানিয়েছি আমরা React.createContext এর মাধ্যমে এবং যেটার ইনিশিয়াল value হচ্ছে আমাদের লাইট থিম।

এখন এই context টি আমাদের প্যারেন্ট কম্পোনেন্ট অ্যাপে তাহলে আমরা প্রভাইড করে দেই। আমরা যখন আমাদের অ্যাপ কম্পোনেন্টকে এই context এর provider দ্বারা wrap করবো তখন অ্যাপের আন্ডারে সব কম্পোনেন্টেই আমরা আমাদের theme context এর ভেলু পেয়ে যাব।

আমাদের context setup করা শেষ। এখন আমরা আমাদের ThemedButton component এ এই value কে পেতে চাই। তাহলে এখন আমাদের কি ব্যাবহার করা লাগবে? এখন আমরা আমাদের useContext hook ব্যাবহার করবো এই value টাকে ধরার জন্যে। নিচের ছবিটা দেখি আমরা

তাহলে এখানে আমরা দেখতে পারছি যে প্যারেন্ট থেকে কোন props passing ছাড়াই আমরা ডায়রেক্ট আমাদের ThemedButton এ theme context এর value পেয়ে গেলাম। নিচে কোডের ডেমো দেয়া আছে, আপনারা চাইলে লাইভে চালায় দেখতে পারেন এবং থিমের value চেঞ্জ করেও দেখতে পারেন। উদাহরণটি React Native এর জন্যে হলে একি কনসেপ্ট।

সিরিজের পরের পর্বগুলো ইনশাল্লাহ –

• useMemo
• useCallback
• custom hooks

Source: React Documentation