نوشته های محمد نوحی

مفهوم clean-up توی ری اکت

محمد نوحی — Sun, 07 Dec 2025 18:12:39 +0330

توی ری اکت وقتی میخوایم یه افکت داشته باشیم باید از useEffect استفاده کنیم و افکت ها مواردی مثل event listener , timer , http request , ... که وقتی یه افکت رو مینویسیم باید حتما این افکت بعد از unmount شدن کامپوننت از بین بره تا اثرش روی پروژه دیگه باقی نمونه که ری اکت مفهومی رو معرفی کرده به نام clean up که اگر توی هوک useEffect تابعی رو return کنیم کدهای توی اون تابع عمل clean up رو انجام میدن اما این تابع چه زمانی اجرا میشه ؟ فهم این موضوع توی کار با افکت ها خیلی مهم است این تابع clean up بعد از unmount شدن کامپوننت و قبل از هر بار آپدیت کامپوننت اجرا میشه که دونستن این موضوع خیلی مهمه مثلا یه کامپوننت داریم که میخوایم هر بار که کاربر سرچ کرد یه درخواست به سرور بفرستیم دوتا نکته این جا مطرح میشه اول اینکه اگر وسط سرچ یهو کاربر نظرش عوض بشه بره یه صفحه ی دیگه ای که دیگه اون کامپوننت رندر نشه ( unmaount ) باید اون درخواست از بین بره و مورد بعدی اینکه هر بار که کاربر چیزی رو تایپ میکنه چون استیت تغییر میکنه کامپوننت دوباره رندر میشه و باید درخواست قبلی رو از بین برد که هردوتای این کارها باید توی clean up انجام بشه مثال :useEffect(() => { const searchTimer = setTimeout(() => { searchValue && handleSearch(); }, 500); /* before each update and after unmount */ // clean-up return () => { clearTimeout(searchTimer); }; }, [searchValue]);

قابلیت loader در React Router

محمد نوحی — Mon, 01 Dec 2025 21:02:51 +0330

اکثر مواقع نیاز داریم وقتی وارد یه route جدید میشیم به محض اینکه اون کامپوننت mount میشه یه دیتایی رو از سمت سرور دریافت کنیم و احتمالا اولین راه حلی که به ذهنمون میرسه اینه که از useEffect در Mounting استفاده کنیم اما اگر داریم از React Router استفاده میکنیم یه راه اصولی تر وسریعتر و بهینه تر وجود دارهتوی روش اول :‌ fetch data when component mountمشکلی که این روش داره گرفتن دیتا از سرور بعد از اینکه کامپوننت متولد شد انجام میشه و ممکنه UI سریعتر از دیتا لود بشه و بعد دیتا از سرور گرفته بشهfunction Page() { const [users,setUsers] = useState([]); useEffect(() => { async function fetchUsers() { const resp = await fetch("https://jsonplaceholder.typicode.com/users"); const data = await resp.json(); setUsers(data); } fetchUsers(); }, []); }البته اصولی تر بود که درخواست رو هم توی clean up لغو کنیم ولی برای ساده سازی نوشته نشدهروش دوم : استفاده از loader در react routerتوی این حالت ما اون تابعی که قراره دیتا رو از سمت سرور موقع mount شدن بگیره به route مورد نظر پاس میدیم و خود ری اکت روتر قبل از mount شدن اون کامپوننت درخواست ما رو اجرا میکنه و توسط هوکی به نام useLoaderData میتونیم به خروجی تابع مورد نظر دسترسی داشته باشیم{ path: "/users", element: , loader: fetchUsers, }و به صورت زیر توی کامپوننت استفاده میشهimport { useLoaderData } from "react-router"; function Users() { const users = useLoaderData(); return (

This is users page

{user.name}

); } export default Users; این روش خیلی بهینه ترهامیدوارم که این پست به دردتون خورده باشه

همه چیز درباره ی useEffect

محمد نوحی — Mon, 01 Dec 2025 20:36:35 +0330

Clean-up در useEffect دقیقاً چه کار میکند؟در ریاکت وقتی از useEffect استفاده میکنیم داریم یک «اثر جانبی» ایجاد میکنیم؛ مثل تایمر، event listener یا درخواست شبکه. نکتهی مهم این است که این اثرها نباید بعد از رندرهای جدید یا حذف شدن کامپوننت فعال بمانند. برای همین ریاکت مفهومی به نام clean-up دارد.Clean-up همان تابعی است که از داخل useEffect برمیگردانیم و در دو زمان اجرا میشود:قبل از اجرای افکت جدید (وقتی وابستگیها تغییر میکنند)قبل از Unmount شدن کامپوننتیعنی هر چیزی که در افکت میسازیم، باید اینجا پاک شود.مثال: سرچ کاربر با DebounceuseEffect(() => { const timer = setTimeout(() => { if (searchValue) { handleSearch(); } }, 500); return () => { clearTimeout(timer); }; }, [searchValue]); هر بار که کاربر تایپ میکند، رندر جدید باعث اجرای clean-up میشود و تایمر قبلی پاک میشود. اگر کاربر صفحه را ترک کند، clean-up برای آخرین بار اجرا میشود.اگر درخواست واقعی دارید؟در درخواستهای fetch باید درخواست قبلی را هم لغو کنید. این کار با AbortController انجام میشود:useEffect(() => { const controller = new AbortController(); if (searchValue) { fetch(`/api/search?q=${searchValue}`, { signal: controller.signal, }).catch(() => {}); } return () => controller.abort(); }, [searchValue]);برای رخداد ها چطور ؟useEffect(() => { const keyHandler = e => { if (e.key === "Escape") { // do something } }; document.addEventListener("keyup", keyHandler); // clean-up return () => { document.removeEventListener("keyup", keyHandler); }; }, []);امیدوارم که این مطلب براتون مفید بوده باشه