سلام وقت بخیر
در فیلم 65 یه سوال اساسی در خصوص رندرینگ ری اکت برام پیش اومد
شما در ایونت onchange تکس باکس تعیین کردین url عوض بشه یا نه
و کد مربوط به تغییر لیست کتاب ها رو خارج از بلاک این ایونت نوشتین
سوالم اینه که چه زمانی رندر مجدد اتفاق افتاد که کدهای مربوط به تغییر لیست کتاب ها که با تابع فیلتر نوشتین اجرا شدن؟
با onchange ؟ یا با تغییر url ؟؟
لطفا در این خصوص راهنماییم کنید
سلام دوست من
جواب کوتاه اینه که هر دو باعث رندر مجدد میشن.
یعنی هم onChange و هم تغییر URL (از طریق setSearchParams) باعث رندر مجدد (re-render) میشن.
وقتی کاربر توی input تایپ میکنه (onChange) :
setSearchParams({ filter });
این تابع (که معمولاً از useSearchParams ری اکت Router گرفته شده) باعث میشه URL تغییر کنه چون query string (?filter=...) عوض میشه.
تغییر URL = تغییر در searchParams
چون searchParams در state ریاکت Router نگهداری میشه تغییرش باعث میشه کامپوننت ریفرش بشه (از نو اجرا بشه).
پس کامپوننت دوباره رندر میشه و این خط:
books.filter(...)
دوباره اجرا میشه.
پس در واقع onChange مستقیماً باعث رندر نمیشه ولی setSearchParams() که داخلش هست باعث تغییر state میشه و همین تغییر باعث رندر مجدد کل کامپوننت میشه.
رندر مجدد دقیقاً زمانی اتفاق میافته که مقدار searchParams تغییر کنه و این تغییر از طریق setSearchParams در onChange انجام میشه.
ممنون از پاسخ جامع و خوبتون استاد عزیزم