React-এর বিল্ট-ইন হুক্স

State হুক্স

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

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

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

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

Context হুক্স

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

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

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

Ref হুক্স

Ref হুকগুলো একটি কম্পোনেন্টের তথ্য সংরক্ষণ করতে দেয় যা রেন্ডারিং এর জন্য ব্যবহৃত হয় না, যেমন একটি DOM নোড বা timeout ID। স্টেট আপডেট করলে যেমন কম্পোনেন্ট রি-রেন্ডার হয়, ref আপডেট করলে কিন্তু কম্পোনেন্ট রি-রেন্ডার হয় না। Ref হুকগুলো হচ্ছে React-এর প্যারাডাইম থেকে বের হওয়ার একটি “escape hatch”। এগুলি তখনই ব্যবহার করা যেতে পারে যখন আপনার কোনো non-React সিস্টেম এর সাথে কাজ করতে হয়, যেমন ব্রাউজারের বিল্ট-ইন API।

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

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

Effect হুক্স

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

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

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

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

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

• useLayoutEffect ব্রাউজারের রি-পেইন্ট করার আগে কল হয়। আপনি এখানে layout পরিমাপ করতে পারেন।
• useInsertionEffect React DOM-এ পরিবর্তন করার আগে কল হয়। লাইব্রেরিগুলি এখানে ডায়নামিক CSS ইনসার্ট করতে পারে।

Performance হুক্স

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

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

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

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

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

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

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

রিসোর্স হুক

Resources দেরকে state এর অংশ হিসেবে না রেখেও একটি কম্পোনেন্ট এক্সেস করতে পারে। যেমন, একটি কম্পোনেন্ট একটি Promis থেকে একটি মেসেজ অথবা একটি কনটেক্সট থেকে স্টাইলিং এর তথ্য read করতে পারে।

একটি রিসোর্স থেকে একটি মান read করার জন্য এই হুকটি ব্যবহার করুনঃ

• use আপনাকে একটি রিসোর্সের ভ্যালু একটি Promise অথবা context এর মত read করতে দেয়।

function MessageComponent({ messagePromise }) {
  const message = use(messagePromise);
  const theme = use(ThemeContext);
  // ...
}

অন্যান্য হুক

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

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

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

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