Menu
7.3 হুকের ব্যবহার
React এর hooks এর সাথে আশা করি আপনারা সবাই কম বেশি পরিচিত। useState, useEffect, useRef, useContext সহ আরো অনেকগুলোই আছে। এবার টাইপস্ক্রিপ্টের সাথে রিয়েক্ট হুক গুলো কিভাবে ব্যাবহার করতে পারি তা একনজরে দেখে ফেলি চলুন,
useState
interface User {
id: number;
name: string;
email: string
}
const [state, setState] = useState<User | null>(null);
আপনারা যদি টাইপ assertion ব্যাবহার করতে চান তাহলে এভাবে করতে পারবেন,
const [state, setState] = useState<User>({} as User);
এখানে আসলে যা হচ্ছে তা হল, টাইপস্ক্রিপ্ট কম্পাইলারকে নির্দিষ্ট করে বলা হচ্ছে যে {} User টাইপের। এভাবে না করাটা উত্তম।
useCallback
const handleClick = useCallback((param1: string, param2: number) => {
console.log(param1, param2);
//...
}, []);
useCallback ফাংশনে প্যারামিটারগুলোর টাইপ আপনারা নির্দিষ্ট করে বলে দিতে পারেন টাইপ সেফটি নিশ্চিত করার জন্য।
ঠিক তেমনি ভাবে নিচে বাকি কিছু রিয়েক্ট হুক এর উদাহরণ দেয়া হল:
useReducer
type Action = { type: 'increment'; payload: number } | { type: 'decrement'; payload: number };
const initialCount = {
count: 0,
};
const reducer = (state: initialCount, action: Action) => {
switch (action.type) {
case 'increment':
//return something
case 'decrement':
//return something
default:
return state;
}
};
useReducer
const ReactHooks = () => {
const countRef = useRef<number>(0);
const inputRef = useRef<HTMLInputElement>(null);
const divRef = useRef<HTMLDivElement>(null);
const buttonRef = useRef<HTMLButtonElement>(null);
useEffect(() => {
if (inputRef.current) {
inputRef.current.focus();
}
}, []);
const handleClick = () => {
if (buttonRef.current) {
buttonRef.current.disabled = true;
}
};
return (
<div>
<div ref={divRef}>…</div>
<input type="text" ref={inputRef} />
<button ref={buttonRef} onClick={handleClick}>
Print Name
</button>
<p>Count: {countRef.current}</p>
<button onClick={increment}>Increment</button>
</div>
);
};
