قلاب useState برای کمک به ما برای ذخیره داده ها و به روز رسانی رابط کاربری در تمام زمان هایی که داده ها تغییر می کند ایجاد شده است. اما، هر بار که وضعیت تغییر می کند، باعث رندر مجدد در برنامه شما می شود و این می تواند یک مشکل باشد.
بیایید نگاهی به کد زیر بیاندازیم
ممکن است فکر کنید: “این کار می کند، مشکلی وجود ندارد، درست است؟” – پاسخ این است: خیر.
را در تغییر هر بار که کاربر کلیدی را روی صفحه کلید فشار می دهد، عملکرد یک حالت را تنظیم می کند. این بدان معنی است که برنامه دوباره رندر می شود هر بار که کاربر حرفی را تایپ می کند.
و همانطور که می بینیم، برنامه ما مجدداً غیر ضروری است. 👇🏽
*بنابراین، با استفاده از قلاب useRef آن را برطرف می کنیم.
چرا؟
اول: useRef به ما این امکان را می دهد که هر بار که کاربر حرفی را تایپ می کند، مقدار ورودی را بدون تنظیم حالت دریافت کنیم.
دوم: ما از useRef استفاده می کنیم زیرا نیازی به به روز رسانی رابط کاربری نداریم. اگر نیاز به به روز رسانی UI داریم، باید از useState استفاده کنیم.
همانطور که می بینید، ما نیازی به تنظیم وضعیت جدید در رویداد onChange نداریم و برنامه ما فقط یک بار مانند تصویر زیر رندر می شود:
اما داگلاس، برنامه دو بار رندر می‌شود 😭*”* – بله، حالت React Strict فعال است و فقط برای تشخیص هر مشکلی در برنامه، دو بار رندر می شود. این فقط در حالت اشکال زدایی اجرا می شود، بنابراین در تولید ایمنی خواهد بود 🙂
بنابراین، کار می کند! برنامه شما خوشحال است. اکنون کل مقدار ورودی را بدون بارها رندر داریم.
خداحافظ 🙂
