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

توی ری اکت وقتی میخوایم یه افکت داشته باشیم باید از 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]);