রিঅ্যাক্ট হুক
হুক এতদিনে পুরনো হয়ে গেলেও ইয়ার ফাইনালের চক্করে প্রোগ্রামিং থেকে দূরে থাকায় ট্রাই করে দেখা হয়নি। তাই আজকে একটু ঘেটে দেখার সময় ভাবলাম লেখার চেষ্টা করা যেতে পারে, যেহেতু অনেকদিন কিছু লেখাও হয়নি।
হুক কি এবং কেন সেটায় বিস্তারিত যাব না। সংক্ষেপে বলি। হুক রিঅ্যাক্টের নতুন এপিআই। হুক ব্যবহার করে ফাংশনাল কম্পোনেন্টেই স্টেট ম্যানেজ করা যায়, লাইফসাইকেল মেথডের কাজও করা যায়। অর্থাৎ হুক ব্যবহার করলে ক্লাস বেসড্ কম্পোনেন্ট ছাড়াই সব ধরণের ফাংশনালিটি ইম্প্লিমেন্ট করা যায়। এতে যা সুবিধা হয় তা হল অনেকগুলো কম্পোনেন্টের মধ্যে স্টেট রিলেটেট লজিক শেয়ার করা যায়। মানে একাধিক কম্পোনেন্টের একই কাছাকাছি স্টেট লজিক থাকলে সেটা প্রত্যেক কম্পোনেন্টে বার বার ইম্প্লিমেন্ট না করে কাস্টম হুকের মাধ্যামে একবার ইম্প্লিমেন্ট করে রিইউজ করা যায়। তাছাড়া হুকের মাধ্যমে একই কম্পোনেন্টের বিভিন্ন ফাংশনালিটি আলাদা আলাদা করে লেখা যায় বলে বড় ও জটিল কম্পোনেন্ট সিম্পল হয়। বিস্তারিত এখানে দেখতে পারেন।
তাহলে আর কথা না বাড়িয়ে সরাসরি অ্যাকশনে হুক দেখব। তাহলে হুক দিয়ে একটি ছোটখাট অ্যাপ বানিয়ে ফেলা যাক। কি অ্যাপ বানানো যায় ভাবতে গিয়ে দেখলাম একটি অ্যাপ আছে যেটি মনে হয় সব ফ্রন্টএ্যান্ড ডেভেলাপার ই কোন না কোন সময়ে বানায় কিন্তু আমি এই পর্যন্ত বানাইনি। ওয়েদার অ্যাপ :D
স্টেট হুক
প্রথমেই লোকেশন ইনপুট নেয়া যাক।
এখানে দেখতে পাচ্ছেন react প্যাকেজ থেকে React এর পাশাপাশি useState ফাংশন ইম্পোর্ট করে নিচ্ছি যা রিঅ্যাক্টের 16.8 ভার্সন থেকে পাওয়া যাচ্ছে। ফাংশনাল কম্পোনেন্টের ভেতরে useState কল করলে একটা অ্যারে রিটার্ন করে যার প্রথম উপাদান একটি স্টেট ভ্যালু আর দ্বিতীয় উপাদন হল ঐ স্টেট পরিবর্তন করার জন্য একটি ফাংশন। আমার এখানে অ্যারে ডিস্ট্রাকশন সিনট্যাক্সের মাধ্যমে এই দুটি উপাদানকে দুটি ভ্যারিয়েবলে নিয়ে নিচ্ছি। এখানে useState এর একমাত্র আর্গুমেন্ট হল স্টেটের প্রাথমিক ভ্যালু। এখন setLocation ফাংশনটি আমরা এই ফাংশনাল কম্পোনেন্টের যেকোন জায়গায় কল করে location স্টেট চেন্জ করতে পারব। স্টেট চেন্জ হলে কম্পোনেন্ট রি-রেন্ডার হবে। অর্থাৎ আমাদের পুরো কম্পোনেন্ট ফাংশনটি আবার কল হবে। এর ভেতরে useState ফাংশনটিও আবার একই আর্গুমেন্টে কল হবে। কিন্তু এইবার রিটার্ন করা অ্যারের প্রথম উপাদানে আর্গুমেন্টে দেয়া ভ্যালুর বদলে পরিবর্তিত নতুন স্টেট ভ্যালু থাকবে। দ্বিতীয় উপাদানে আগের মতই স্টেট পরিবর্তন করার জন্য একটি ফাংশন থাকবে। আমরা চাইলে কোন একটি কম্পোনেন্টে একাধিক স্টেটের জন্য একাধিক বার useState কল করতে পারি।
আসলে প্রথমবার কোন কম্পোনেন্ট থেকে useState কল করলে রিঅ্যাক্ট ঐ কম্পোনেন্টের সাথে এসোসিয়েট করে একটি মেমরি সেল তৈরী করে ঐখানে আমাদের প্রাথমিক ভ্যালু রেখে দেয় ও একটি ফাংশন দেয় যা দিয়ে ঐ মেমরি সেল মডিফাই করা যাবে। ঐ কম্পোনেন্টে আবার useState ব্যবহার করলে নতুন একটি মেমরি সেল তৈরী হয়। কম্পোনেন্ট রি-রেন্ডার হলে মেমরি সেলের কার্সরটি প্রথম সেলে চলে যায় এবং নতুন সেল তৈরী করার বদলে পুরনো সেলগুলো থেকে সিরিয়ালে স্টেটগুলো রিটার্ণ করতে থাকে। তাই খেয়াল রাখতে হবে যেন প্রতি রেন্ডারে হুকগুলোর সিরিয়াল একই থাকে।
তাহলে এখন এপিআই গুতা দিয়ে ওয়েদার ডেটা নিয়ে আসা যাক। ডেটা আর মেসেজ রাখার জন্য আরো দুটি হুক ব্যবহার করব।
ইফেক্ট হুক
লোকেশন অটো ডিটেক্ট করতে পারলে ভাল হত না? ক্লাস বেসড কম্পোনেন্টে আমরা componentDidMound এ লোকেশন এপিআই ব্যবহার করে লোকেশন ডিটেক্ট করতে পারতাম। এখনে আমরা useEffect হুক ব্যবহার করব।
useEffect হুকটিও একটি ফাংশন। এতে একটি কলব্যাক পাস করতে হয়। প্রত্যেকবার কম্পোনেন্ট রেন্ডার হওয়ার পর এই কলব্যাকটি কল হয়। কলব্যাকের পাশাপাশি একটি অ্যারে পাস করা যায়। এতে কলব্যাকটি প্রথমবার রেন্ডারের পর স্বাভাবিকভাবে কল হবে। কিন্তু পরবর্তী রেন্ডারের পর শুধু যদি অ্যারের উপাদানগুলো চেন্জ হয় তবেই কল হবে।
এখন যদি শুধু একটি খালি অ্যারে পাস করি, তাহলে কলব্যাকটি শুধু প্রথমবার রেন্ডার হবে। অর্থাৎ ঠিক componentDidMount এর মত কাজ করবে। এখানে এটাই আমাদের দরকার।
এখানে দরাকারি না হলে বলে রাখা ভাল যে, আমরা চাইলে ইফেক্টের কলব্যাক থেকে আবার একটি কলব্যাক রিটার্ণ করতে পারি। ইফেক্ট কলব্যাকটি আবার রান হওয়ার আগে এটি রান হবে। আর যদি useEffect এ খালি অ্যারে পাস করি মানে যদি ইফেক্ট কলব্যাকটি প্রথম রেন্ডারের পর রান হওয়ার পরে আর রান না হয় তাহলে কম্পোনেন্ট আনমাউন্ট হওয়ার সময় রান হবে। অর্থাৎ ঠিক componentDidUnmout এর মত কাজ করবে।
কাস্টম হুক
হুক ব্যবহার করার সবচেয়ে বড় সুবিধা হল আমরা কোন কম্পোন্টের একটি নির্দিষ্ট ফাংশনালিটি একটি কাস্টম হুকের ভেতরে ঢুকিয়ে ফেলতে পারি এবং পরে চাইলে অন্য কম্পোনেন্টেও এই ফাংশনালিটি খুব সহজেই এড করতে পারি।
কাস্টম হুক ডিফাইন করা খুবই সোজা। আসলে কাস্টম হুক সাধারণ ফাংশন ছাড়া আর কিছুই না। এই ফাংশনগুলোতে আমরা অন্যান্য হুক ব্যবহার করি। উদাহরণের মাধ্যমে দেখে নিই।
হুকের নামের আগে use ব্যবহার করাটা একটা কনভেনশন। এখনে যদিও কাস্টম হুক খুব একটা বাড়তি সুবিধা দিচ্ছে না। কিন্তু বড় এবং জটিল অ্যাপ্লিকেশন ডেভেলাপ করার সময় কাস্টম হুক খুব কাজের হতে পারে।
শেষ কথা
আসলে হুক বেসড্ কম্পোনেন্টগুলো একটু অন্য রকম হবে। হুক নিয়ে কাজ করতে হলে ক্লাস বেসড্ কম্পোনেন্ট থেকে একটু ভিন্নভাবে চিন্তা করতে হবে।
আমি নিজে ব্যাক্তিগতভাবে পরবর্তী সব প্রজেক্ট শুধু হুক দিয়ে করার চেষ্টা করব। তবে হুক ব্যবহারের ক্ষেত্রে যে জিনিসটা আমার ভাল লাগে না সেটা হল ফাংশনের ভেতরে প্রচুর ফাংশন ডিফাইন করতে হয়।
আপনার মতামত কি? সমানের প্রজেক্টগুলোতে হুক ব্যবহার করবেন? নাকি ক্লাস বেসড্ ফাংশনই ব্যবহার করতে থাকবেন?
