রিঅ্যাক্ট হুক

S.j. Sakib
Mar 15, 2019 · 4 min read

হুক এতদিনে পুরনো হয়ে গেলেও ইয়ার ফাইনালের চক্করে প্রোগ্রামিং থেকে দূরে থাকায় ট্রাই করে দেখা হয়নি। তাই আজকে একটু ঘেটে দেখার সময় ভাবলাম লেখার চেষ্টা করা যেতে পারে, যেহেতু অনেকদিন কিছু লেখাও হয়নি।

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

তাহলে আর কথা না বাড়িয়ে সরাসরি অ্যাকশনে হুক দেখব। তাহলে হুক দিয়ে একটি ছোটখাট অ্যাপ বানিয়ে ফেলা যাক। কি অ্যাপ বানানো যায় ভাবতে গিয়ে দেখলাম একটি অ্যাপ আছে যেটি মনে হয় সব ফ্রন্টএ্যান্ড ডেভেলাপার ই কোন না কোন সময়ে বানায় কিন্তু আমি এই পর্যন্ত বানাইনি। ওয়েদার অ্যাপ :D

স্টেট হুক

Image for post
Image for post

এখানে দেখতে পাচ্ছেন react প্যাকেজ থেকে React এর পাশাপাশি useState ফাংশন ইম্পোর্ট করে নিচ্ছি যা রিঅ্যাক্টের 16.8 ভার্সন থেকে পাওয়া যাচ্ছে। ফাংশনাল কম্পোনেন্টের ভেতরে useState কল করলে একটা অ্যারে রিটার্ন করে যার প্রথম উপাদান একটি স্টেট ভ্যালু আর দ্বিতীয় উপাদন হল ঐ স্টেট পরিবর্তন করার জন্য একটি ফাংশন। আমার এখানে অ্যারে ডিস্ট্রাকশন সিনট্যাক্সের মাধ্যমে এই দুটি উপাদানকে দুটি ভ্যারিয়েবলে নিয়ে নিচ্ছি। এখানে useState এর একমাত্র আর্গুমেন্ট হল স্টেটের প্রাথমিক ভ্যালু। এখন setLocation ফাংশনটি আমরা এই ফাংশনাল কম্পোনেন্টের যেকোন জায়গায় কল করে location স্টেট চেন্জ করতে পারব। স্টেট চেন্জ হলে কম্পোনেন্ট রি-রেন্ডার হবে। অর্থাৎ আমাদের পুরো কম্পোনেন্ট ফাংশনটি আবার কল হবে। এর ভেতরে useState ফাংশনটিও আবার একই আর্গুমেন্টে কল হবে। কিন্তু এইবার রিটার্ন করা অ্যারের প্রথম উপাদানে আর্গুমেন্টে দেয়া ভ্যালুর বদলে পরিবর্তিত নতুন স্টেট ভ্যালু থাকবে। দ্বিতীয় উপাদানে আগের মতই স্টেট পরিবর্তন করার জন্য একটি ফাংশন থাকবে। আমরা চাইলে কোন একটি কম্পোনেন্টে একাধিক স্টেটের জন্য একাধিক বার useState কল করতে পারি।

আসলে প্রথমবার কোন কম্পোনেন্ট থেকে useState কল করলে রিঅ্যাক্ট ঐ কম্পোনেন্টের সাথে এসোসিয়েট করে একটি মেমরি সেল তৈরী করে ঐখানে আমাদের প্রাথমিক ভ্যালু রেখে দেয় ও একটি ফাংশন দেয় যা দিয়ে ঐ মেমরি সেল মডিফাই করা যাবে। ঐ কম্পোনেন্টে আবার useState ব্যবহার করলে নতুন একটি মেমরি সেল তৈরী হয়। কম্পোনেন্ট রি-রেন্ডার হলে মেমরি সেলের কার্সরটি প্রথম সেলে চলে যায় এবং নতুন সেল তৈরী করার বদলে পুরনো সেলগুলো থেকে সিরিয়ালে স্টেটগুলো রিটার্ণ করতে থাকে। তাই খেয়াল রাখতে হবে যেন প্রতি রেন্ডারে হুকগুলোর সিরিয়াল একই থাকে।

তাহলে এখন এপিআই গুতা দিয়ে ওয়েদার ডেটা নিয়ে আসা যাক। ডেটা আর মেসেজ রাখার জন্য আরো দুটি হুক ব্যবহার করব।

Image for post
Image for post
মুটামুটি চলে?

ইফেক্ট হুক

useEffect হুকটিও একটি ফাংশন। এতে একটি কলব্যাক পাস করতে হয়। প্রত্যেকবার কম্পোনেন্ট রেন্ডার হওয়ার পর এই কলব্যাকটি কল হয়। কলব্যাকের পাশাপাশি একটি অ্যারে পাস করা যায়। এতে কলব্যাকটি প্রথমবার রেন্ডারের পর স্বাভাবিকভাবে কল হবে। কিন্তু পরবর্তী রেন্ডারের পর শুধু যদি অ্যারের উপাদানগুলো চেন্জ হয় তবেই কল হবে।

এখন যদি শুধু একটি খালি অ্যারে পাস করি, তাহলে কলব্যাকটি শুধু প্রথমবার রেন্ডার হবে। অর্থাৎ ঠিক componentDidMount এর মত কাজ করবে। এখানে এটাই আমাদের দরকার।

Image for post
Image for post
ডেটা ফেচ করার জন্য আলাদা একটা ফাংশন ডিফাইন করে নেয়া হয়েছে

এখানে দরাকারি না হলে বলে রাখা ভাল যে, আমরা চাইলে ইফেক্টের কলব্যাক থেকে আবার একটি কলব্যাক রিটার্ণ করতে পারি। ইফেক্ট কলব্যাকটি আবার রান হওয়ার আগে এটি রান হবে। আর যদি useEffect এ খালি অ্যারে পাস করি মানে যদি ইফেক্ট কলব্যাকটি প্রথম রেন্ডারের পর রান হওয়ার পরে আর রান না হয় তাহলে কম্পোনেন্ট আনমাউন্ট হওয়ার সময় রান হবে। অর্থাৎ ঠিক componentDidUnmout এর মত কাজ করবে।

Image for post
Image for post
ইফেক্ট হুক

কাস্টম হুক

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

Image for post
Image for post
এখানে ইনপুট নেয়ার ফাংশনালিটি ছাড়া বাকি সব ফাংশনালিটি হুকে নিয়ে নেয়া হয়েছে।

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

শেষ কথা

আমি নিজে ব্যাক্তিগতভাবে পরবর্তী সব প্রজেক্ট শুধু হুক দিয়ে করার চেষ্টা করব। তবে হুক ব্যবহারের ক্ষেত্রে যে জিনিসটা আমার ভাল লাগে না সেটা হল ফাংশনের ভেতরে প্রচুর ফাংশন ডিফাইন করতে হয়।

আপনার মতামত কি? সমানের প্রজেক্টগুলোতে হুক ব্যবহার করবেন? নাকি ক্লাস বেসড্ ফাংশনই ব্যবহার করতে থাকবেন?

প্রোগ্রামিং পাতা

সহজ বাংলায় প্রোগ্রামিং জ্ঞান ছড়িয়ে দেয়ার প্রত্যয়ে

Sign up for প্রোগ্রামিং-পাতা

By প্রোগ্রামিং পাতা

সহজ বাংলায় প্রোগ্রামিং জ্ঞান ছড়িয়ে দেয়ার প্রত্যয়ে আমাদের পথচলা।  Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Thanks to Ahmed shamim hassan

S.j. Sakib

Written by

Amateur programmer, writer, caveman.

প্রোগ্রামিং পাতা

সহজ বাংলায় প্রোগ্রামিং জ্ঞান ছড়িয়ে দেয়ার প্রত্যয়ে

S.j. Sakib

Written by

Amateur programmer, writer, caveman.

প্রোগ্রামিং পাতা

সহজ বাংলায় প্রোগ্রামিং জ্ঞান ছড়িয়ে দেয়ার প্রত্যয়ে

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store