React all Hooks

React.js হল এক ধরনের JavaScript লাইব্রেরি যা দিয়ে ইউজার ইন্টারফেস তৈরি করা যায়। React Hooks হলো বিশেষ কিছু ফাংশন যা functional কম্পোনেন্টের মধ্যে state এবং lifecycle ম্যানেজ করতে ব্যবহৃত হয়। নিচে React এর প্রধান Hooks গুলি নিয়ে বিস্তারিত আলোচনা করা হলো:

1. useState

useState হুকটি state তৈরি এবং ম্যানেজ করার জন্য ব্যবহৃত হয়। এটি একটি প্রাথমিক মান নেয় এবং দুটি ভ্যালু রিটার্ন করে: একটি বর্তমান state এবং একটি সেটার ফাংশন যা দিয়ে state আপডেট করা যায়।

উদাহরণ:

এখানে useState(0) প্রাথমিক মান ০ সেট করেছে এবং setCount দিয়ে state পরিবর্তন হচ্ছে।

2. useEffect

useEffect হুকটি সাইড ইফেক্ট পরিচালনা করে যেমন ডেটা ফেচিং, DOM ম্যানিপুলেশন, অথবা টাইমার। এটি componentDidMount, componentDidUpdate, এবং componentWillUnmount এর বিকল্প হিসেবে কাজ করে।

উদাহরণ:

এখানে, useEffect প্রতি সেকেন্ডে টাইমার আপডেট করে এবং ক্লিনআপ ফাংশন দিয়ে টাইমার বন্ধ করে।

3. useContext

useContext হুকটি Context API এর মাধ্যমে ডেটা পাস করার জন্য ব্যবহৃত হয়, যা প্রপস ড্রিলিং ছাড়াই বিভিন্ন কম্পোনেন্টের মধ্যে ডেটা শেয়ার করতে দেয়।

উদাহরণ:

এখানে, useContext ব্যবহার করে UserContext থেকে সরাসরি ডেটা অ্যাক্সেস করা হয়েছে।

4. useReducer

useReducer হুকটি জটিল state লজিক পরিচালনা করতে ব্যবহৃত হয়, এটি useState এর বিকল্প এবং Redux এর মতো রিডিউসার প্যাটার্ন ব্যবহার করে।

উদাহরণ:

এখানে, useReducer একটি reducer ফাংশন এবং অ্যাকশন ভিত্তিতে state ম্যানেজ করে।

5. useRef

useRef হুকটি একটি mutable রেফারেন্স তৈরি করে, যা DOM ম্যানিপুলেশনের জন্য অথবা ভেরিয়েবল স্টোর করার জন্য ব্যবহার করা যায় যা রি-রেন্ডার হলেও অপরিবর্তিত থাকে।

উদাহরণ:

এখানে, useRef হুক দিয়ে ইনপুট ফিল্ডে সরাসরি ফোকাস করা হচ্ছে।

6. useMemo

useMemo computationally heavy ফাংশনের রিটার্ন ভ্যালু মেমোয়াইজ করার জন্য ব্যবহৃত হয় যাতে প্রতিবার রেন্ডারিংয়ের সময় সেটি পুনরায় গণনা না হয়।

উদাহরণ:

এখানে, শুধুমাত্র num ভ্যালু পরিবর্তিত হলে useMemo মেমোইজড ভ্যালুটি পুনরায় গণনা করবে।

7. useCallback

useCallback হুকটি এমন একটি ফাংশন মেমোয়াইজ করার জন্য ব্যবহৃত হয় যা প্রতিবার নতুন করে তৈরি হওয়া থেকে রক্ষা করে, বিশেষত যখন সেই ফাংশন কোনো চাইল্ড কম্পোনেন্টে প্রপস হিসেবে পাস করা হয়।

উদাহরণ:

এখানে, useCallback ব্যবহার করে handleClick ফাংশন মেমোয়াইজ করা হয়েছে।

8. useLayoutEffect

useLayoutEffect DOM আপডেট হওয়ার সাথে সাথে রান হয়, এটি সাধারণত লেআউট সম্পর্কিত কাজ যেমন উপাদানের আকার পরিবর্তন করার জন্য ব্যবহৃত হয়।

উদাহরণ:

এখানে, useLayoutEffect হুকের মাধ্যমে DOM ম্যানিপুলেশন করা হয়েছে।

9. useImperativeHandle

useImperativeHandle হুকটি ref এর জন্য একটি কাস্টম API প্রকাশ করতে ব্যবহৃত হয়। এটি child কম্পোনেন্ট থেকে parent কম্পোনেন্টকে নির্দিষ্ট ফাংশন ব্যবহারের সুযোগ দেয়।

উদাহরণ:

এখানে, useImperativeHandle দিয়ে চাইল্ড কম্পোনেন্ট থেকে নির্দিষ্ট ফাংশন প্রকাশ করা হয়েছে।

10. useDebugValue

useDebugValue হুকটি কাস্টম হুকগুলির জন্য debugging তথ্য প্রদর্শনের জন্য ব্যবহৃত হয়। এটি React Developer Tools এর সাথে কার্যকরভাবে ব্যবহৃত হয়।

উদাহরণ:

এখানে, useDebugValue কাস্টম হুকের মান ডিবাগ করার জন্য ব্যবহৃত হচ্ছে, এবং তা React Developer Tools এ প্রদর্শিত হয়।

11. useTransition (React 18 এর নতুন হুক)

useTransition হুকটি জটিল state পরিবর্তনের সময় ইউজার ইন্টারফেস smooth রাখার জন্য ব্যবহৃত হয়। এটি UI এর responsiveness বাড়াতে সহায়ক।

উদাহরণ:

এখানে, useTransition এর সাহায্যে একটি বড় লিস্ট প্রসেসিং করা হচ্ছে, যার ফলে ইউজার ইন্টারফেস lag না করে smooth থাকে।

12. useDeferredValue

useDeferredValue হুকটি কোনো একটি ভ্যালু দেরি করে আপডেট করতে ব্যবহৃত হয়, যা state পরিবর্তনের পরে ব্যাকগ্রাউন্ডে কম priority তে রান করে।

উদাহরণ:

এখানে, useDeferredValue হুকটি ইনপুট পরিবর্তনের পরে ডিফার্ড ভ্যালু ব্যাকগ্রাউন্ডে আপডেট করে। ফলে, ইউজার ইন্টারফেস দ্রুত প্রতিক্রিয়া জানাতে পারে।

এই সমস্ত Hooks React এর ডেভেলপমেন্টে বিভিন্ন প্রয়োজনীয় কাজগুলো অনেক সহজ করে দিয়েছে। useState, useEffect, useReducer ইত্যাদি প্রতিদিনের ডেভেলপমেন্টের সময় বহুল ব্যবহৃত হয়, যেখানে useMemo, useCallback হুকগুলি পারফরম্যান্স উন্নত করতে ব্যবহৃত হয়।

React Hooks এর মাধ্যমে component-based আর্কিটেকচারে state এবং সাইড ইফেক্টগুলি অনেক সহজে ম্যানেজ করা যায়।