هوک useOptimistic در حال حاضر فقط در کانالهای Canary و آزمایشی React در دسترس است.
استفاده از useOptimistic در React مربوط به بهبود کارایی و تجربه کاربری است، به خصوص در مواردی که ارتباط با سرور یا انجام عملیات های زمان بر از جانب کاربر رخ میدهد.
استفاده از useOptimistic به کمک ایجاد یک تجربه کاربری بهتر، این انتظار را کاهش میدهد. با اعمال به روزرسانی های موقتی و فوری بر روی وضعیت محلی بدون انتظار پاسخ از سرور، کاربر میتواند تجربه کاربری سریع تری داشته باشد و به نظر میرسد که عملیات به سرعت انجام شده است. در صورت دریافت پاسخ متفاوتی از سرور، وضعیت محلی مطابقت داده میشود.
این ورودی وضعیت فعلی را که میخواهید به روزرسانی شود، نشان میدهد. این وضعیت میتواند هر نوع دادهای مانند رشته، شیء، یا آرایه باشد که نیاز به بهینه سازی و به روزرسانی فوری دارد.
این ورودی یک تابع است که وظیفه ی آن انجام عملیات بهینه سازی و به روزرسانی است، مانند افزودن یک مورد جدید به لیست، حذف یک مورد از لیست، یا هر تغییر دیگری که ممکن است به صورت بهینه سازی شده اعمال شود.
یک وضعیت بهینه سازی شده که به عنوان وضعیت جدید پس از به روزرسانی بهینه سازی شده توسط updateFn استفاده میشود.
یک تابع که ورودی های آن به صورت state و update function به همان شکلی است که در هوک useState استفاده میشود. این تابع برای افزودن بهینه سازی به وضعیت فعلی استفاده میشود. این بهینه سازی معمولاً شامل به روزرسانی سریع و موقتی وضعیت بر اساس عملیاتی است که توسط updateFn انجام میشود.
در ادامه نحوه ی اضافه شدن یک پیام جدید را با استفاده از useOptimistic میبینیم:
استفاده از useState:
در اینجا از useState استفاده میشود تا یک وضعیت محلی برای کامپوننت ایجاد شود. messages متغیری است که لیست پیام ها را نگهداری میکند. این لیست با یک پیام اولیه شروع میشود.
استفاده از useOptimistic:
در اینجا از useOptimistic استفاده میشود تا پیام های optimistic مدیریت شوند. optimisticMessages لیستی از پیام های optimistic است که به وسیله ی addOptimisticMessage به آن اضافه میشوند.
تابع updateFn:
این تابع به عنوان یک پارامتر به useOptimistic ارسال میشود و وظیفه ی آن این است که وضعیت بعدی مرتبط با پیام optimistic را برگرداند. در اینجا، یک آرایه جدید با اضافه کردن پیام جدید با وضعیت sending: true ایجاد میشود.
تابع formAction:
این تابع زمانی فراخوانی میشود که فرم ارسال میشود. ابتدا پیام optimistic به لیست پیام ها اضافه میشود و سپس پیام به تابع sendMessage فرستاده میشود.
تابع sendMessage:
این تابع پیام را به سرور ارسال میکند و پیام واقعی را به لیست پیام ها اضافه میکند. در اینجا ابتدا پیام ارسال میشود و سپس پس از دریافت پاسخ از سرور، وضعیت را به شکل نهایی به روزرسانی میکنیم.
تابع deliverMessage:
این تابع مسئول ارسال پیام به سرور است. در اینجا یک تاخیر یک ثانیه ای برای شبیه سازی ارسال به سرور اعمال میشود.
این عملکردها با هم ترکیب شده اند تا امکان ارسال پیام های optimistic و مدیریت وضعیت نهایی پیام ها را برای کاربر فراهم کنند.
امیدوارم مفهوم و کاربرد هوک useOptimistic رو انتفال داده باشم. اگر برات مفید بود و یا نکته ای دیگه در مورد هوک useOptimistic میدونستی برام کامنت بزار تا بیشتر یاد بگیریم.
