রিয়েক্টের বিল্ট-ইন হুকসমূহ

স্টেট হুকসমূহ

স্টেট হুকগুলো আপনার কম্পোনেন্টের মধ্যে ব্যবহৃত “তথ্য সংরক্ষণ” করতে দেয়। উদাহরণস্বরূপ, একটি ফর্ম কম্পোনেন্ট স্টেট ব্যবহার করে ইনপুট ভ্যালু সংরক্ষণ করতে পারে, আর একটি ইমেজ গ্যালারি কম্পোনেন্ট স্টেট ব্যবহার করে সিলেক্টেড ইমেজ ইনডেক্স সংরক্ষণ করতে পারে।

কম্পোনেন্টে স্টেট যুক্ত করতে আপনি নিচের হুকগুলোর একটি ব্যবহার করতে পারেন:

• useState একটি স্টেট ভ্যারিয়েবল ডিক্লেয়ার করে যা আপনি সরাসরি আপডেট করতে পারেন।
• useReducer একটি স্টেট ভ্যারিয়েবল ডিক্লেয়ার করে যা একটি রিডিউসার ফাংশনের মধ্যে আপডেট করা হয়।

function ImageGallery() {
  const [index, setIndex] = useState(0);
  // ...

কনটেক্সট হুকসমূহ

কনটেক্সট হুকগুলো একটি কম্পোনেন্টে যেকোনো দূরবর্তী প্যারেন্ট কম্পোনেন্ট থেকে প্রপ্‌স হিসেবে না পাঠিয়ে সরাসরি তথ্য পাঠাতে দেয়। উদাহরণস্বরূপ, আপনার অ্যাপের টপ-লেভেল কম্পোনেন্ট নিচের সকল কম্পোনেন্টের মধ্যে বর্তমান ইউআই থিম পাঠাতে পারে, সেটি যত গভীর হোক না কেন।

• createContext একটি কনটেক্সট পড়ে এবং সেটিতে সাবস্ক্রাইব করে।

function Button() {
  const theme = useContext(ThemeContext);
  // ...

রেফ হুকসমূহ

রেফ হুকগুলো একটি কম্পোনেন্টের তথ্য সংরক্ষণ করতে দেয় যা রেন্ডারিং এর জন্য ব্যবহৃত হয় না, যেমন একটি ডম নোড বা টাইমআউট আইডি। স্টেট আপডেট করলে যেমন কম্পোনেন্ট রি-রেন্ডার হয়, রেফ আপডেট করলে কিন্তু কম্পোনেন্ট রি-রেন্ডার হয় না। রেফ হুকগুলো হচ্ছে রিয়েক্ট প্যারাডাইম থেকে বের হওয়ার একটি “এস্কেপ হ্যাচ”। এগুলি তখনই ব্যবহার করা যেতে পারে যখন আপনার কোনো নন-রিয়েক্ট সিস্টেম এর সাথে কাজ করতে হয়, যেমন ব্রাউজারের বিল্ট-ইন এপিআই।

• useRef একটি রেফ ডিক্লেয়ার করে। আপনি এর মধ্যে যেকোনো ভ্যালু রাখতে পারেন, কিন্তু সবচেয়ে বেশি এটি ডম নোড রাখতে ব্যবহৃত হয়।
• useImperativeHandle আপনার কম্পোনেন্টের রেফ কাস্টমাইজ করতে দেয়। এটি খুব কমই ব্যবহৃত হয়।

function Form() {
  const inputRef = useRef(null);
  // ...

ইফেক্ট হুকসমূহ

ইফেক্ট হুকগুলো একটি কম্পোনেন্টকে বাইরের সিস্টেমের সাথে সংযোগ স্থাপন করে এবং সিংক্রোনাইজ করে। এটি নেটওয়ার্ক, ব্রাউজার ডম, অ্যানিমেশন, বিভিন্ন নন-রিয়েক্ট কোড এবং বাইরের যেকোনো ইউআই লাইব্রেরির সাথে সংযোগ স্থাপন করতে ব্যবহৃত হয়।

• useEffect একটি কম্পোনেন্টকে বাইরের সিস্টেমের সাথে সংযোগ করে।

function ChatRoom({ roomId }) {
  useEffect(() => {
    const connection = createConnection(roomId);
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]);
  // ...

ইফেক্ট হুকগুলো রিয়েক্ট প্যারাডাইমের একটি “এস্কেপ হ্যাচ”। আপনার অ্যাপ্লিকেশানের ডেটা ফ্লো সুসমন্বিত করার জন্য ইফেক্ট ব্যবহার করবেন না। যদি আপনি কোনো বাইরের সিস্টেমের সাথে ইন্টারেক্ট না করেন, তাহলে আপনার কোন ইফেক্টের দরকার নাও হতে পারে।

useEffect এর দুইটি অপেক্ষাকৃত কম ব্যবহৃত ভ্যারিয়েশন আছে যা টাইমিং নিয়ে ভিন্নতা রাখেঃ

• useLayoutEffect ব্রাউজারের পুনরায় পেইন্ট করার আগে কল হয়। আপনি এখানে লেআউট পরিমাপ পারেন।

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

পারফর্মেন্স হুকসমূহ

রি-রেন্ডারিং অপ্টিমাইজ করার একটি সাধারণ উপায় হল অপ্রয়োজনীয় কাজ এড়িয়ে যাওয়া। যেমন, আপনি রিয়েক্টকে জানিয়ে দিতে পারেন যেন একটি ক্যাশ করা ক্যালকুলেশন ব্যবহার করে অথবা একটি রি-রেন্ডার এড়িয়ে যায় যদি ডেটা পূর্বের রেন্ডার থেকে পরিবর্তিত না হয়ে থাকে।

অপ্রয়োজনীয় ক্যালকুলেশন এবং রি-রেন্ডারিং এড়িয়ে যাওয়ার জন্য, এই হুকগুলোর মধ্যে থেকে একটি ব্যবহার করতে পারেনঃ

• useMemo আপনাকে একটি ব্যয়বহুল ক্যালকুলেশন ক্যাশ করে রাখতে দেয়।

• useCallback একটি অপটিমাইজড কম্পোনেন্টে পাঠানোর আগে একটি ফাংশন ডেফিনিশন ক্যাশ করে রাখতে দেয়।

function TodoList({ todos, tab, theme }) {
  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  // ...
}

কখনও কখনও, আপনি রি-রেন্ডারিং এড়িয়ে যেতে পারবেন না কারণ স্ক্রীনটিকে আসলেই আপডেট করতে হবে। এই ক্ষেত্রে, আপনি ব্লকিং আপডেটগুলি যা সিংক্রোনাস হতে হবে (যেমন ইনপুটে টাইপ করা) এবং নন-ব্লকিং আপডেটগুলি যা ব্যবহারকারীর ইন্টারফেস ব্লক করতে হয় না (যেমন একটি চার্ট আপডেট করা) আলাদা করে পারফর্মেন্স বাড়িয়ে করতে পারেন।

রি-রেন্ডারিং অগ্রাধিকার দেওয়ার জন্য, এই হুকগুলোর মধ্যে থেকে একটি ব্যবহার করতে পারেনঃ

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

অন্যান্য হুকসমূহ

এই হুকগুলো মূলত লাইব্রেরি লেখকদের জন্য প্রয়োজনীয় এবং অ্যাপ্লিকেশন কোডে খুব একটা ব্যবহৃত হয় না।

• useDebugValue আপনাকে আপনার কাস্টম হুকের জন্য রিয়েক্ট ডেভটুলসের প্রদর্শিত লেবেল কাস্টমাইজ করতে দেয়।
• useId একটি কম্পোনেন্টকে একটি ইউনিক আইডি দিয়ে সংযুক্ত করে। এটি সাধারণত অ্যাক্সেসিবিলিটি এপিআই সঙ্গে ব্যবহার করা হয়।
• useSyncExternalStore একটি কম্পোনেন্টকে একটি বাহ্যিক স্টোরে সাবস্ক্রাইব করতে দেয়।

আপনার নিজস্ব হুকসমূহ

আপনি নিজেও জাভাস্ক্রিপ্ট ফাংশন হিসাবে আপনার নিজস্ব কাস্টম হুক বানাতে পারেন।