15. React Custom Hooks
📘 কনসেপ্ট (থিওরি)
হুকস (Hooks) হলো পুনরায় ব্যবহারযোগ্য ফাংশন।
যখন আপনার এমন কম্পোনেন্ট লজিক থাকে যা একাধিক কম্পোনেন্ট দ্বারা ব্যবহার করা প্রয়োজন, তখন আমরা সেই লজিকটিকে একটি কাস্টম হুকে বের করে আনতে পারি।
কাস্টম হুকগুলো "use" দিয়ে শুরু হয়। উদাহরণ:
useFetch।
আপনার যদি এমন কোনো ফেচিং (fetching) লজিক থাকে যা এপিআই (APIs) থেকে ডেটা নিয়ে আসে, তবে আপনি এটিকে useFetch হুকের ভেতরে রাখতে পারেন, ডেটা রিটার্ন করতে পারেন এবং যেকোনো কম্পোনেন্ট থেকে এটিকে কল করতে পারেন!💡 উদাহরণ
একটি সাধারণ কাস্টম হুক:
import { useState, useEffect } from "react";
// কাস্টম হুক
const useToggle = (initialValue = false) => {
const [value, setValue] = useState(initialValue);
const toggle = () => setValue(!value);
return [value, toggle];
};
// কাস্টম হুক ব্যবহার করা
function App() {
const [isToggled, toggle] = useToggle();
return (
);
}
🎯 আপনার কাজ (প্র্যাকটিস)
একটি কাস্টম হুক
useCounter তৈরি করুন যা [count, increment] রিটার্ন করে। একটি কাউন্টার দেখাতে এবং বাড়াতে এটি একটি কম্পোনেন্টে ব্যবহার করুন।main.react
Loading...
OUTPUT
Run your code to see the output here...