معرفی Hooks در React
هوکها (Hooks) در React امکان مدیریت State و Lifecycle را بدون نیاز به کامپوننتهای کلاسی فراهم میکنند. از نسخه 16.8 به بعد، React اجازه میدهد تا در کامپوننتهای فانکشنی هم از State و سایر قابلیتها استفاده کنیم.
چرا از Hooks استفاده کنیم؟
🔹 قبل از Hooks، فقط کامپوننتهای کلاسی میتوانستند State و متدهای Lifecycle داشته باشند.
🔹 با Hooks، نیازی به کلاسها و پیچیدگیهای مربوط به this
نداریم.
🔹 کد خواناتر و سادهتر شده و قابلیت استفاده مجدد از منطقها بیشتر میشود.
معروفترین Hooks در React
Hook | کاربرد |
---|---|
useState |
مدیریت State در کامپوننتهای فانکشنی |
useEffect |
اجرای کد هنگام لود شدن، آپدیت شدن یا حذف شدن کامپوننت |
useContext |
استفاده از Context API بدون نیاز به Consumer و Provider |
useReducer |
جایگزینی پیشرفته برای useState (مدیریت State پیچیده) |
useRef |
دسترسی مستقیم به عناصر DOM یا نگه داشتن مقدار بدون رندر مجدد |
useMemo |
بهینهسازی عملکرد با مقداردهی مجدد فقط در صورت تغییر دادهها |
useCallback |
جلوگیری از ساخت توابع جدید در هر رندر |
useLayoutEffect |
مشابه useEffect ولی قبل از رندر شدن UI اجرا میشود |
useImperativeHandle |
کنترل ref ها در کامپوننتهای سفارشی |
۱. مدیریت State با useState
useState
برای ذخیره و بروزرسانی دادههای متغیر در یک کامپوننت فانکشنی استفاده میشود.
مثال: شمارنده ساده
const Counter = () => {
const [count, setCount] = useState(0); // مقدار اولیه ۰
return (
<div>
<h1>عدد: {count}</h1>
<button onClick={() => setCount(count + 1)}>افزایش</button>
</div>
);
};
export default Counter;
✔ مقدار اولیه count
برابر ۰ است.
✔ setCount
مقدار count
را تغییر داده و باعث رندر مجدد میشود.
۲. استفاده از useEffect
برای مدیریت Lifecycle
useEffect
مشابه متدهای componentDidMount
، componentDidUpdate
و componentWillUnmount
در کامپوننتهای کلاسی است.
مثال: اجرای کد هنگام لود شدن کامپوننت
const Timer = () => {
const [count, setCount] = useState(0);
useEffect(() => {
console.log("کامپوننت رندر شد!");
});
return (
<div>
<h1>{count}</h1>
<button onClick={() => setCount(count + 1)}>افزایش</button>
</div>
);
};
export default Timer;
این useEffect
در هر رندر اجرا میشود.
اجرای useEffect
فقط هنگام mount (بارگذاری اولیه)
console.log("فقط یکبار اجرا شد!");
}, []); // آرایه خالی یعنی فقط هنگام mount اجرا شود.
اجرای useEffect
هنگام تغییر مقدار خاص
console.log("وقتی count تغییر کند، اجرا میشود!");
}, [count]); // فقط وقتی count تغییر کند اجرا خواهد شد.
۳. مدیریت دادههای پیچیده با useReducer
useReducer
برای مدیریت State پیچیدهتر استفاده میشود و مشابه Redux
عمل میکند.
مثال: شمارنده با useReducer
const reducer = (state, action) => {
switch (action.type) {
case "increment":
return { count: state.count + 1 };
case "decrement":
return { count: state.count - 1 };
default:
return state;
}
};
const Counter = () => {
const [state, dispatch] = useReducer(reducer, { count: 0 });
return (
<div>
<h1>{state.count}</h1>
<button onClick={() => dispatch({ type: "increment" })}>افزایش</button>
<button onClick={() => dispatch({ type: "decrement" })}>کاهش</button>
</div>
);
};
export default Counter;
✔ dispatch({ type: "increment" })
باعث افزایش مقدار count میشود.
✔ این روش برای مدیریت State پیچیده و چندمرحلهای عالی است.
۴. استفاده از useRef
برای دسترسی به عناصر DOM
useRef
برای دسترسی مستقیم به DOM یا نگه داشتن مقداری بدون ایجاد رندر مجدد استفاده میشود.
مثال: فوکوس خودکار روی Input
const InputFocus = () => {
const inputRef = useRef(null);
useEffect(() => {
inputRef.current.focus(); // فوکوس روی اینپوت هنگام لود شدن
}, []);
return <input ref={inputRef} type="text" placeholder="اینجا تایپ کنید..." />;
};
export default InputFocus;
✔ مقدار inputRef.current
به المان input
متصل شده و فوکوس میگیرد.
۵. استفاده از useContext
برای مدیریت State سراسری
useContext
برای مدیریت مقادیر سراسری در برنامه استفاده میشود.
مثال: مدیریت تم رنگی با useContext
const ThemeContext = createContext();
const ThemeProvider = ({ children }) => {
const [theme, setTheme] = useState("light");
return (
<ThemeContext.Provider value={{ theme, setTheme }}>
{children}
</ThemeContext.Provider>
);
};
const Button = () => {
const { theme, setTheme } = useContext(ThemeContext);
return (
<button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
تغییر تم به {theme === "light" ? "تیره" : "روشن"}
</button>
);
};
const App = () => (
<ThemeProvider>
<Button />
</ThemeProvider>
);
export default App;
✔ useContext(ThemeContext)
مقدار تم رنگی را خوانده و تغییر میدهد.
جمعبندی و نکات مهم
✅ Hooks فقط در فانکشنال کامپوننتها استفاده میشوند.
✅ useState
برای مدیریت State ساده به کار میرود.
✅ useEffect
جایگزین componentDidMount
و componentDidUpdate
است.
✅ useReducer
برای مدیریت State پیچیدهتر استفاده میشود.
✅ useRef
به عناصر DOM متصل میشود.
✅ useContext
برای مدیریت دادههای سراسری بدون نیاز به props drilling
کاربرد دارد.
