هوک useOptimistic در ری‌اکت: تسلط بر به‌روزرسانی‌های خوش‌بینانه UI برای بهبود تجربه کاربری

در چشم‌انداز پرشتاب توسعه وب امروز، ارائه یک تجربه کاربری (UX) واکنش‌گرا و جذاب از اهمیت بالایی برخوردار است. کاربران انتظار بازخورد فوری از تعاملات خود را دارند و هرگونه تأخیر محسوس می‌تواند منجر به ناامیدی و رها کردن برنامه شود. یک تکنیک قدرتمند برای دستیابی به این واکنش‌گرایی، به‌روزرسانی‌های خوش‌بینانه UI است. هوک useOptimistic ری‌اکت که در React 18 معرفی شد، روشی تمیز و کارآمد برای پیاده‌سازی این به‌روزرسانی‌ها ارائه می‌دهد و عملکرد محسوس برنامه‌های شما را به شدت بهبود می‌بخشد.

به‌روزرسانی‌های خوش‌بینانه UI چه هستند؟

به‌روزرسانی‌های خوش‌بینانه UI شامل به‌روزرسانی فوری رابط کاربری است، گویی که یک عمل، مانند ارسال یک فرم یا لایک کردن یک پست، قبلاً با موفقیت انجام شده است. این کار قبل از اینکه سرور موفقیت آن عمل را تأیید کند، انجام می‌شود. اگر سرور موفقیت را تأیید کند، هیچ اتفاق دیگری نمی‌افتد. اگر سرور خطایی را گزارش دهد، UI به حالت قبلی خود بازگردانده می‌شود و به کاربر بازخورد داده می‌شود. اینطور به آن فکر کنید: شما برای کسی یک جوک تعریف می‌کنید (عمل). شما می‌خندید (به‌روزرسانی خوش‌بینانه، که نشان می‌دهد فکر می‌کنید خنده‌دار است) *قبل از* اینکه او به شما بگوید آیا خندیده است یا نه (تأیید سرور). اگر او نخندد، ممکن است بگویید «خب، به زبان ازبکی خنده‌دارتره»، اما با useOptimistic، در عوض، شما به سادگی به حالت اصلی UI بازمی‌گردید.

مزیت اصلی، زمان پاسخ‌دهی سریع‌تر از نظر کاربر است، زیرا کاربران بلافاصله نتیجه اعمال خود را بدون انتظار برای یک رفت و برگشت به سرور مشاهده می‌کنند. این امر منجر به تجربه‌ای روان‌تر و لذت‌بخش‌تر می‌شود. این سناریوها را در نظر بگیرید:

لایک کردن یک پست: به جای انتظار برای تأیید لایک توسط سرور، شمارشگر لایک فوراً افزایش می‌یابد.
ارسال یک پیام: پیام فوراً در پنجره چت ظاهر می‌شود، حتی قبل از اینکه واقعاً به سرور ارسال شود.
افزودن یک آیتم به سبد خرید: شمارشگر سبد خرید بلافاصله به‌روز می‌شود و به کاربر بازخورد فوری می‌دهد.

در حالی که به‌روزرسانی‌های خوش‌بینانه مزایای قابل توجهی دارند، مدیریت صحیح خطاهای احتمالی برای جلوگیری از گمراه کردن کاربران بسیار مهم است. ما نحوه انجام مؤثر این کار را با استفاده از useOptimistic بررسی خواهیم کرد.

معرفی هوک `useOptimistic` ری‌اکت

هوک useOptimistic روشی ساده برای مدیریت به‌روزرسانی‌های خوش‌بینانه در کامپوننت‌های ری‌اکت شما فراهم می‌کند. این هوک به شما اجازه می‌دهد تا یک وضعیت را حفظ کنید که هم داده‌های واقعی و هم به‌روزرسانی‌های خوش‌بینانه و بالقوه تأیید نشده را منعکس می‌کند. ساختار اصلی آن به این صورت است:


const [optimisticState, addOptimistic]
    = useOptimistic(initialState, updateFn);

optimisticState: این وضعیت فعلی است که هم داده‌های واقعی و هم هرگونه به‌روزرسانی خوش‌بینانه را منعکس می‌کند.
addOptimistic: این تابع به شما امکان می‌دهد یک به‌روزرسانی خوش‌بینانه را به وضعیت اعمال کنید. این تابع یک آرگومان واحد می‌گیرد که داده‌های مرتبط با به‌روزرسانی خوش‌بینانه را نشان می‌دهد.
initialState: وضعیت اولیه مقداری که در حال بهینه‌سازی آن هستیم.
updateFn: تابعی برای اعمال به‌روزرسانی خوش‌بینانه.

یک مثال عملی: به‌روزرسانی خوش‌بینانه یک لیست وظایف

بیایید نحوه استفاده از useOptimistic را با یک مثال رایج نشان دهیم: مدیریت یک لیست وظایف. ما به کاربران اجازه می‌دهیم وظایف جدیدی اضافه کنند و لیست را به صورت خوش‌بینانه به‌روز می‌کنیم تا وظیفه جدید بلافاصله نمایش داده شود.

ابتدا، یک کامپوننت ساده برای نمایش لیست وظایف ایجاد می‌کنیم:


import React, { useState, useOptimistic } from 'react';

function TaskList() {
  const [tasks, setTasks] = useState([
    { id: 1, text: 'یادگیری ری‌اکت' },
    { id: 2, text: 'تسلط بر useOptimistic' },
  ]);

  const [optimisticTasks, addOptimisticTask] = useOptimistic(
    tasks,
    (currentTasks, newTask) => [...currentTasks, {
      id: Math.random(), // در حالت ایده‌آل، از یک UUID یا ID تولید شده توسط سرور استفاده کنید
      text: newTask
    }]
  );

  const [newTaskText, setNewTaskText] = useState('');

  const handleAddTask = async () => {
    // تسک را به صورت خوش‌بینانه اضافه کنید
    addOptimisticTask(newTaskText);

    // یک فراخوانی API را شبیه‌سازی کنید (با فراخوانی API واقعی خود جایگزین کنید)
    try {
      await new Promise(resolve => setTimeout(resolve, 500)); // شبیه‌سازی تأخیر شبکه
      setTasks(prevTasks => [...prevTasks, {
        id: Math.random(), // با ID واقعی از سرور جایگزین کنید
        text: newTaskText
      }]);
    } catch (error) {
      console.error('خطا در افزودن تسک:', error);
      // به‌روزرسانی خوش‌بینانه را بازگردانید (در این مثال ساده‌شده نشان داده نشده - بخش پیشرفته را ببینید)
      // در یک برنامه واقعی، شما باید لیستی از به‌روزرسانی‌های خوش‌بینانه را مدیریت کنید
      // و آن مورد خاصی که شکست خورده را بازگردانید.
    }

    setNewTaskText('');
  };

  return (
    
      لیست وظایف
      
        {optimisticTasks.map(task => (
          {task.text}
        ))}
      
       setNewTaskText(e.target.value)}
      />
      
    
  );
}

export default TaskList;

در این مثال:

ما وضعیت tasks را با آرایه‌ای از وظایف مقداردهی اولیه می‌کنیم.
ما از useOptimistic برای ایجاد optimisticTasks استفاده می‌کنیم که در ابتدا آینه‌ای از وضعیت tasks است.
تابع addOptimisticTask برای افزودن خوش‌بینانه یک وظیفه جدید به آرایه optimisticTasks استفاده می‌شود.
تابع handleAddTask زمانی که کاربر روی دکمه «افزودن وظیفه» کلیک می‌کند، فعال می‌شود.
درون handleAddTask، ما ابتدا addOptimisticTask را فراخوانی می‌کنیم تا UI را بلافاصله با وظیفه جدید به‌روز کنیم.
سپس، یک فراخوانی API را با استفاده از setTimeout شبیه‌سازی می‌کنیم. در یک برنامه واقعی، شما این را با فراخوانی API واقعی خود برای ایجاد وظیفه در سرور جایگزین می‌کنید.
اگر فراخوانی API موفقیت‌آمیز باشد، ما وضعیت tasks را با وظیفه جدید (شامل ID تولید شده توسط سرور) به‌روز می‌کنیم.
اگر فراخوانی API با شکست مواجه شود (که در این مثال ساده به طور کامل پیاده‌سازی نشده است)، باید به‌روزرسانی خوش‌بینانه را بازگردانیم. برای نحوه مدیریت این موضوع، بخش پیشرفته زیر را ببینید.

این مثال ساده، مفهوم اصلی به‌روزرسانی‌های خوش‌بینانه را نشان می‌دهد. هنگامی که کاربر یک وظیفه را اضافه می‌کند، آن وظیفه فوراً در لیست ظاهر می‌شود و تجربه‌ای واکنش‌گرا و جذاب را فراهم می‌کند. فراخوانی API شبیه‌سازی شده تضمین می‌کند که وظیفه در نهایت در سرور ذخیره می‌شود و UI با ID تولید شده توسط سرور به‌روز می‌شود.

مدیریت خطاها و بازگرداندن به‌روزرسانی‌ها

یکی از مهم‌ترین جنبه‌های به‌روزرسانی‌های خوش‌بینانه UI، مدیریت صحیح خطاها است. اگر سرور یک به‌روزرسانی را رد کند، شما باید UI را به حالت قبلی خود بازگردانید تا کاربر را گمراه نکنید. این شامل چندین مرحله است:

ردیابی به‌روزرسانی‌های خوش‌بینانه: هنگام اعمال یک به‌روزرسانی خوش‌بینانه، باید داده‌های مرتبط با آن به‌روزرسانی را ردیابی کنید. این می‌تواند شامل ذخیره داده‌های اصلی یا یک شناسه منحصر به فرد برای به‌روزرسانی باشد.
مدیریت خطا: هنگامی که سرور یک خطا برمی‌گرداند، باید به‌روزرسانی خوش‌بینانه مربوطه را شناسایی کنید.
بازگرداندن به‌روزرسانی: با استفاده از داده‌ها یا شناسه ذخیره شده، باید UI را به حالت قبلی خود بازگردانید و عملاً به‌روزرسانی خوش‌بینانه را لغو کنید.

بیایید مثال قبلی خود را گسترش دهیم تا شامل مدیریت خطا و بازگرداندن به‌روزرسانی‌ها شود. این امر نیازمند رویکرد پیچیده‌تری برای مدیریت وضعیت خوش‌بینانه است.


import React, { useState, useOptimistic, useCallback } from 'react';

function TaskListWithRevert() {
  const [tasks, setTasks] = useState([
    { id: 1, text: 'یادگیری ری‌اکت' },
    { id: 2, text: 'تسلط بر useOptimistic' },
  ]);

  const [optimisticTasks, addOptimisticTask] = useOptimistic(
    tasks,
    (currentTasks, newTask) => [...currentTasks, {
      id: `optimistic-${Math.random()}`, // ID منحصر به فرد برای تسک‌های خوش‌بینانه
      text: newTask,
      optimistic: true // فلگی برای شناسایی تسک‌های خوش‌بینانه
    }]
  );

  const [newTaskText, setNewTaskText] = useState('');

  const handleAddTask = useCallback(async () => {
    const optimisticId = `optimistic-${Math.random()}`; // یک ID منحصر به فرد برای تسک خوش‌بینانه تولید کنید
    addOptimisticTask(newTaskText);

    // یک فراخوانی API را شبیه‌سازی کنید (با فراخوانی API واقعی خود جایگزین کنید)
    try {
      await new Promise((resolve, reject) => {
        setTimeout(() => {
          const success = Math.random() > 0.2; // شبیه‌سازی شکست‌های گاه‌به‌گاه
          if (success) {
            resolve();
          } else {
            reject(new Error('افزودن تسک با شکست مواجه شد'));
          }
        }, 500);
      });

      // اگر فراخوانی API موفقیت‌آمیز بود، وضعیت تسک‌ها را با ID واقعی از سرور به‌روز کنید
      setTasks(prevTasks => {
        return prevTasks.map(task => {
          if (task.id === optimisticId) {
            return { ...task, id: Math.random(), optimistic: false }; // با ID واقعی از سرور جایگزین کنید
          }
          return task;
        });
      });
    } catch (error) {
      console.error('خطا در افزودن تسک:', error);
      // به‌روزرسانی خوش‌بینانه را بازگردانید
      setTasks(prevTasks => prevTasks.filter(task => task.id !== `optimistic-${optimisticId}`));
    }

    setNewTaskText('');
  }, [addOptimisticTask]); // استفاده از useCallback برای جلوگیری از رندرهای مجدد غیرضروری


  return (
    
      لیست وظایف (با قابلیت بازگردانی)
      
        {optimisticTasks.map(task => (
          
            {task.text}
            {task.optimistic &&  (خوش‌بینانه)}
          
        ))}
      
       setNewTaskText(e.target.value)}
      />
      
    
  );
}

export default TaskListWithRevert;

تغییرات کلیدی در این مثال:

شناسه‌های منحصر به فرد برای وظایف خوش‌بینانه: ما اکنون یک شناسه منحصر به فرد (optimistic-${Math.random()}) برای هر وظیفه خوش‌بینانه تولید می‌کنیم. این به ما امکان می‌دهد به‌روزرسانی‌های خاص را به راحتی شناسایی و بازگردانیم.
فلگ optimistic: ما یک فلگ optimistic به هر شیء وظیفه اضافه می‌کنیم تا نشان دهیم که آیا این یک به‌روزرسانی خوش‌بینانه است یا خیر. این به ما امکان می‌دهد وظایف خوش‌بینانه را به صورت بصری در UI متمایز کنیم.
شبیه‌سازی شکست API: ما فراخوانی API شبیه‌سازی شده را طوری تغییر داده‌ایم که گاهی اوقات (با احتمال 20٪) با استفاده از Math.random() > 0.2 با شکست مواجه شود.
بازگردانی در صورت خطا: اگر فراخوانی API با شکست مواجه شود، ما اکنون آرایه tasks را فیلتر می‌کنیم تا وظیفه خوش‌بینانه با شناسه منطبق را حذف کنیم و عملاً به‌روزرسانی را بازگردانیم.
به‌روزرسانی با شناسه واقعی: هنگامی که فراخوانی API موفقیت‌آمیز است، ما وظیفه را در آرایه tasks با شناسه واقعی از سرور به‌روز می‌کنیم. (در این مثال، ما هنوز از Math.random() به عنوان جایگزین استفاده می‌کنیم).
استفاده از useCallback: تابع handleAddTask اکنون در useCallback پیچیده شده است تا از رندرهای مجدد غیرضروری کامپوننت جلوگیری کند. این امر به ویژه هنگام استفاده از useOptimistic مهم است، زیرا رندرهای مجدد می‌توانند باعث از بین رفتن به‌روزرسانی‌های خوش‌بینانه شوند.

این مثال پیشرفته نشان می‌دهد که چگونه می‌توان خطاها را مدیریت کرد و به‌روزرسانی‌های خوش‌بینانه را بازگرداند و تجربه کاربری قوی‌تر و قابل اعتمادتری را تضمین کرد. نکته کلیدی این است که هر به‌روزرسانی خوش‌بینانه را با یک شناسه منحصر به فرد ردیابی کنید و مکانیزمی برای بازگرداندن UI به حالت قبلی خود در هنگام بروز خطا داشته باشید. به متن «(خوش‌بینانه)» که به طور موقت ظاهر می‌شود و به کاربر نشان می‌دهد که UI در حالت خوش‌بینانه است، توجه کنید.

ملاحظات پیشرفته و بهترین شیوه‌ها

در حالی که useOptimistic پیاده‌سازی به‌روزرسانی‌های خوش‌بینانه UI را ساده می‌کند، چندین ملاحظه پیشرفته و بهترین شیوه وجود دارد که باید در نظر داشته باشید:

ساختارهای داده پیچیده: هنگام کار با ساختارهای داده پیچیده، ممکن است نیاز به استفاده از تکنیک‌های پیچیده‌تری برای اعمال و بازگرداندن به‌روزرسانی‌های خوش‌بینانه داشته باشید. استفاده از کتابخانه‌هایی مانند Immer را برای ساده‌سازی به‌روزرسانی‌های داده‌های غیرقابل تغییر در نظر بگیرید.
حل تضاد: در سناریوهایی که چندین کاربر با داده‌های یکسان در تعامل هستند، به‌روزرسانی‌های خوش‌بینانه می‌توانند منجر به تضاد شوند. ممکن است نیاز به پیاده‌سازی استراتژی‌های حل تضاد در سمت سرور برای مدیریت این موقعیت‌ها داشته باشید.
بهینه‌سازی عملکرد: به‌روزرسانی‌های خوش‌بینانه می‌توانند به طور بالقوه باعث رندرهای مجدد مکرر شوند، به ویژه در کامپوننت‌های بزرگ و پیچیده. از تکنیک‌هایی مانند memoization و shouldComponentUpdate برای بهینه‌سازی عملکرد استفاده کنید. هوک useCallback بسیار حیاتی است.
بازخورد به کاربر: بازخورد واضح و ثابتی را در مورد وضعیت اعمال کاربر به او ارائه دهید. این می‌تواند شامل نمایش نشانگرهای بارگذاری، پیام‌های موفقیت یا پیام‌های خطا باشد. برچسب موقت «(خوش‌بینانه)» در مثال، یک راه ساده برای نشان دادن وضعیت موقتی است.
اعتبارسنجی سمت سرور: همیشه داده‌ها را در سرور اعتبارسنجی کنید، حتی اگر در حال انجام به‌روزرسانی‌های خوش‌بینانه در کلاینت هستید. این به تضمین یکپارچگی داده‌ها و جلوگیری از دستکاری UI توسط کاربران مخرب کمک می‌کند.
هم‌توانی (Idempotency): اطمینان حاصل کنید که عملیات سمت سرور شما هم‌توان هستند، به این معنی که انجام یک عملیات چندین بار همان اثری را دارد که یک بار انجام شود. این برای مدیریت موقعیت‌هایی که یک به‌روزرسانی خوش‌بینانه به دلیل مشکلات شبکه یا سایر شرایط پیش‌بینی نشده چندین بار اعمال می‌شود، بسیار مهم است.
شرایط شبکه: به شرایط مختلف شبکه توجه داشته باشید. کاربرانی که اتصالات کند یا غیرقابل اعتمادی دارند ممکن است خطاهای مکررتری را تجربه کنند و به مکانیزم‌های مدیریت خطای قوی‌تری نیاز داشته باشند.

ملاحظات جهانی

هنگام پیاده‌سازی به‌روزرسانی‌های خوش‌بینانه UI در برنامه‌های جهانی، در نظر گرفتن عوامل زیر ضروری است:

بومی‌سازی (Localization): اطمینان حاصل کنید که تمام بازخوردهای کاربر، از جمله نشانگرهای بارگذاری، پیام‌های موفقیت و پیام‌های خطا، به درستی برای زبان‌ها و مناطق مختلف بومی‌سازی شده‌اند.
دسترسی‌پذیری (Accessibility): مطمئن شوید که به‌روزرسانی‌های خوش‌بینانه برای کاربران دارای معلولیت قابل دسترس هستند. این ممکن است شامل ارائه متن جایگزین برای نشانگرهای بارگذاری و اطمینان از اعلام تغییرات UI به صفحه‌خوان‌ها باشد.
حساسیت فرهنگی: از تفاوت‌های فرهنگی در انتظارات و ترجیحات کاربران آگاه باشید. به عنوان مثال، برخی فرهنگ‌ها ممکن است بازخوردهای ظریف‌تر یا کم‌رنگ‌تری را ترجیح دهند.
مناطق زمانی (Time Zones): تأثیر مناطق زمانی بر سازگاری داده‌ها را در نظر بگیرید. اگر برنامه شما شامل داده‌های حساس به زمان است، ممکن است نیاز به پیاده‌سازی مکانیزم‌هایی برای همگام‌سازی داده‌ها در مناطق زمانی مختلف داشته باشید.
حریم خصوصی داده‌ها: به مقررات حریم خصوصی داده‌ها در کشورها و مناطق مختلف توجه داشته باشید. اطمینان حاصل کنید که داده‌های کاربر را به صورت ایمن و مطابق با تمام قوانین قابل اجرا مدیریت می‌کنید.

نمونه‌هایی از سراسر جهان

در اینجا چند نمونه از نحوه استفاده از به‌روزرسانی‌های خوش‌بینانه UI در برنامه‌های جهانی آورده شده است:

رسانه‌های اجتماعی (مانند توییتر، فیسبوک): به‌روزرسانی خوش‌بینانه شمارش لایک‌ها، نظرات و اشتراک‌گذاری‌ها برای ارائه بازخورد فوری به کاربران.
تجارت الکترونیک (مانند آمازون، علی‌بابا): به‌روزرسانی خوش‌بینانه مجموع سبد خرید و تأییدیه‌های سفارش برای ایجاد یک تجربه خرید روان.
ابزارهای همکاری (مانند Google Docs، Microsoft Teams): به‌روزرسانی خوش‌بینانه اسناد مشترک و پیام‌های چت برای تسهیل همکاری در زمان واقعی.
رزرو سفر (مانند Booking.com، Expedia): به‌روزرسانی خوش‌بینانه نتایج جستجو و تأییدیه‌های رزرو برای ارائه یک فرآیند رزرو واکنش‌گرا و کارآمد.
برنامه‌های مالی (مانند PayPal، TransferWise): به‌روزرسانی خوش‌بینانه تاریخچه تراکنش‌ها و صورت‌حساب‌ها برای ارائه دید فوری به فعالیت‌های مالی.

نتیجه‌گیری

هوک useOptimistic ری‌اکت روشی قدرتمند و راحت برای پیاده‌سازی به‌روزرسانی‌های خوش‌بینانه UI فراهم می‌کند و تجربه کاربری برنامه‌های شما را به طور قابل توجهی بهبود می‌بخشد. با به‌روزرسانی فوری UI گویی که یک عمل با موفقیت انجام شده است، می‌توانید تجربه‌ای واکنش‌گراتر و جذاب‌تر برای کاربران خود ایجاد کنید. با این حال، مدیریت صحیح خطاها و بازگرداندن به‌روزرسانی‌ها در صورت لزوم برای جلوگیری از گمراه کردن کاربران بسیار مهم است. با پیروی از بهترین شیوه‌های ذکر شده در این راهنما، می‌توانید به طور مؤثر از useOptimistic برای ساخت برنامه‌های وب با کارایی بالا و کاربرپسند برای مخاطبان جهانی استفاده کنید. به یاد داشته باشید که همیشه داده‌ها را در سرور اعتبارسنجی کنید، عملکرد را بهینه کنید و بازخورد واضحی را در مورد وضعیت اعمال کاربر به او ارائه دهید.

همانطور که انتظارات کاربران برای واکنش‌گرایی همچنان در حال افزایش است، به‌روزرسانی‌های خوش‌بینانه UI برای ارائه تجربیات کاربری استثنایی اهمیت فزاینده‌ای پیدا خواهند کرد. تسلط بر useOptimistic یک مهارت ارزشمند برای هر توسعه‌دهنده ری‌اکت است که به دنبال ساخت برنامه‌های وب مدرن و با کارایی بالا است که با کاربران در سراسر جهان طنین‌انداز شود.