تسلط بر به‌روزرسانی‌های همزمان با هوک experimental_useOptimistic در React: یک راهنمای جهانی

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

function Post({ postId, likeCount, onLike }) {
  const [optimisticLikes, addOptimisticLike] = experimental_useOptimistic(
    likeCount,  // Initial value
    (currentLikes) => currentLikes + 1, // Update function
    (currentLikes, originalLikeCount) => originalLikeCount // Rollback function
  );

  const [isLiking, setIsLiking] = useState(false);
  const [likeError, setLikeError] = useState(null);

  const handleLike = async () => {
    setIsLiking(true);
    setLikeError(null);
    const optimisticId = addOptimisticLike(likeCount);

    try {
      await onLike(postId);
    } catch (error) {
      setLikeError(error);
      // Revert the optimistic update
      addOptimisticLike(likeCount, optimisticId);
    } finally {
      setIsLiking(false);
    }
  };

  return (
    

      
        {isLiking ? 'Liking...' : 'Like'}
      
      Likes: {optimisticLikes}
      {likeError && 
Error liking post: {likeError.message}
}
    
  );
}

// Example usage (assuming an API call)
function App() {
  const [posts, setPosts] = useState([
    { id: 1, likeCount: 10 },
    { id: 2, likeCount: 5 },
  ]);

  const handleLike = async (postId) => {
    // Simulate an API call (e.g., to a server in the US)
    await new Promise((resolve) => setTimeout(resolve, 1000));

    // Simulate a potential error (e.g., network issue)
    // if (Math.random() < 0.2) {
    //   throw new Error('Failed to like post.');
    // }

    // Update the post's like count on the server (in a real application)
    setPosts((prevPosts) =>
      prevPosts.map((post) =>
        post.id === postId ? { ...post, likeCount: post.likeCount + 1 } : post
      )
    );
  };

  return (
    

      {posts.map((post) => (
        
      ))}
    
  );
}

export default App;

            

              
                Copy
              
            
          

            import React, { experimental_useOptimistic, useState, useEffect } from 'react';

function DocumentEditor({ documentId, content, onContentChange }) {
  const [optimisticContent, setOptimisticContent] = experimental_useOptimistic(
    content, // Initial content
    (currentContent, newContent) => newContent,  // Update function
    (currentContent, originalContent) => originalContent // Rollback function
  );

  const [isSaving, setIsSaving] = useState(false);
  const [saveError, setSaveError] = useState(null);

  useEffect(() => {
    const saveContent = async () => {
      if (!isSaving && optimisticContent !== content) {
        setIsSaving(true);
        setSaveError(null);

        try {
          await onContentChange(documentId, optimisticContent);
        } catch (error) {
          setSaveError(error);
          // Optionally, revert the content on error.
        }
        finally {
          setIsSaving(false);
        }
      }
    };
    saveContent();
  }, [optimisticContent, content, documentId, onContentChange, isSaving]);

  const handleChange = (event) => {
    setOptimisticContent(event.target.value);
  };

  return (
    

            {isSaving && <span>Saving...</span>}
      {saveError && <p style={{ color: 'red' }}>Error saving: {saveError.message}</p>}
    </div>
  );
}

function App() {
  const [documentContent, setDocumentContent] = useState('Initial content');

  const handleContentChange = async (documentId, newContent) => {
    // Simulate an API call (e.g., to a server in Australia)
    await new Promise((resolve) => setTimeout(resolve, 1500));

    // Simulate a potential error
    if (Math.random() < 0.1) {
      throw new Error('Failed to save document.');
    }
    setDocumentContent(newContent);
  };

  return (
    <DocumentEditor documentId={1} content={documentContent} onContentChange={handleContentChange} />
  );
}

export default App;
</code>
            <div class="copy-button-container">
              <button 
                data-code="aW1wb3J0IFJlYWN0LCB7IGV4cGVyaW1lbnRhbF91c2VPcHRpbWlzdGljLCB1c2VTdGF0ZSwgdXNlRWZmZWN0IH0gZnJvbSAncmVhY3QnOwoKZnVuY3Rpb24gRG9jdW1lbnRFZGl0b3IoeyBkb2N1bWVudElkLCBjb250ZW50LCBvbkNvbnRlbnRDaGFuZ2UgfSkgewogIGNvbnN0IFtvcHRpbWlzdGljQ29udGVudCwgc2V0T3B0aW1pc3RpY0NvbnRlbnRdID0gZXhwZXJpbWVudGFsX3VzZU9wdGltaXN0aWMoCiAgICBjb250ZW50LCAvLyBJbml0aWFsIGNvbnRlbnQKICAgIChjdXJyZW50Q29udGVudCwgbmV3Q29udGVudCkgPT4gbmV3Q29udGVudCwgIC8vIFVwZGF0ZSBmdW5jdGlvbgogICAgKGN1cnJlbnRDb250ZW50LCBvcmlnaW5hbENvbnRlbnQpID0+IG9yaWdpbmFsQ29udGVudCAvLyBSb2xsYmFjayBmdW5jdGlvbgogICk7CgogIGNvbnN0IFtpc1NhdmluZywgc2V0SXNTYXZpbmddID0gdXNlU3RhdGUoZmFsc2UpOwogIGNvbnN0IFtzYXZlRXJyb3IsIHNldFNhdmVFcnJvcl0gPSB1c2VTdGF0ZShudWxsKTsKCiAgdXNlRWZmZWN0KCgpID0+IHsKICAgIGNvbnN0IHNhdmVDb250ZW50ID0gYXN5bmMgKCkgPT4gewogICAgICBpZiAoIWlzU2F2aW5nICYmIG9wdGltaXN0aWNDb250ZW50ICE9PSBjb250ZW50KSB7CiAgICAgICAgc2V0SXNTYXZpbmcodHJ1ZSk7CiAgICAgICAgc2V0U2F2ZUVycm9yKG51bGwpOwoKICAgICAgICB0cnkgewogICAgICAgICAgYXdhaXQgb25Db250ZW50Q2hhbmdlKGRvY3VtZW50SWQsIG9wdGltaXN0aWNDb250ZW50KTsKICAgICAgICB9IGNhdGNoIChlcnJvcikgewogICAgICAgICAgc2V0U2F2ZUVycm9yKGVycm9yKTsKICAgICAgICAgIC8vIE9wdGlvbmFsbHksIHJldmVydCB0aGUgY29udGVudCBvbiBlcnJvci4KICAgICAgICB9CiAgICAgICAgZmluYWxseSB7CiAgICAgICAgICBzZXRJc1NhdmluZyhmYWxzZSk7CiAgICAgICAgfQogICAgICB9CiAgICB9OwogICAgc2F2ZUNvbnRlbnQoKTsKICB9LCBbb3B0aW1pc3RpY0NvbnRlbnQsIGNvbnRlbnQsIGRvY3VtZW50SWQsIG9uQ29udGVudENoYW5nZSwgaXNTYXZpbmddKTsKCiAgY29uc3QgaGFuZGxlQ2hhbmdlID0gKGV2ZW50KSA9PiB7CiAgICBzZXRPcHRpbWlzdGljQ29udGVudChldmVudC50YXJnZXQudmFsdWUpOwogIH07CgogIHJldHVybiAoCiAgICA8ZGl2PgogICAgICA8dGV4dGFyZWEgdmFsdWU9e29wdGltaXN0aWNDb250ZW50fSBvbkNoYW5nZT17aGFuZGxlQ2hhbmdlfSAvPgogICAgICB7aXNTYXZpbmcgJiYgPHNwYW4+U2F2aW5nLi4uPC9zcGFuPn0KICAgICAge3NhdmVFcnJvciAmJiA8cCBzdHlsZT17eyBjb2xvcjogJ3JlZCcgfX0+RXJyb3Igc2F2aW5nOiB7c2F2ZUVycm9yLm1lc3NhZ2V9PC9wPn0KICAgIDwvZGl2PgogICk7Cn0KCmZ1bmN0aW9uIEFwcCgpIHsKICBjb25zdCBbZG9jdW1lbnRDb250ZW50LCBzZXREb2N1bWVudENvbnRlbnRdID0gdXNlU3RhdGUoJ0luaXRpYWwgY29udGVudCcpOwoKICBjb25zdCBoYW5kbGVDb250ZW50Q2hhbmdlID0gYXN5bmMgKGRvY3VtZW50SWQsIG5ld0NvbnRlbnQpID0+IHsKICAgIC8vIFNpbXVsYXRlIGFuIEFQSSBjYWxsIChlLmcuLCB0byBhIHNlcnZlciBpbiBBdXN0cmFsaWEpCiAgICBhd2FpdCBuZXcgUHJvbWlzZSgocmVzb2x2ZSkgPT4gc2V0VGltZW91dChyZXNvbHZlLCAxNTAwKSk7CgogICAgLy8gU2ltdWxhdGUgYSBwb3RlbnRpYWwgZXJyb3IKICAgIGlmIChNYXRoLnJhbmRvbSgpIDwgMC4xKSB7CiAgICAgIHRocm93IG5ldyBFcnJvcignRmFpbGVkIHRvIHNhdmUgZG9jdW1lbnQuJyk7CiAgICB9CiAgICBzZXREb2N1bWVudENvbnRlbnQobmV3Q29udGVudCk7CiAgfTsKCiAgcmV0dXJuICgKICAgIDxEb2N1bWVudEVkaXRvciBkb2N1bWVudElkPXsxfSBjb250ZW50PXtkb2N1bWVudENvbnRlbnR9IG9uQ29udGVudENoYW5nZT17aGFuZGxlQ29udGVudENoYW5nZX0gLz4KICApOwp9CgpleHBvcnQgZGVmYXVsdCBBcHA7Cg=="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p>در این مثال:</p>

<ul>
  <li><code>experimental_useOptimistic</code> محتوای سند را مدیریت می‌کند.</li>
  <li>تابع به‌روزرسانی بلافاصله ورودی کاربر را در <code>textarea</code> منعکس می‌کند.</li>
  <li>هوک <code>useEffect</code> هر زمان که محتوای خوش‌بینانه تغییر کند (و با محتوای اولیه متفاوت باشد)، یک عملیات ذخیره ناهمزمان را آغاز می‌کند.</li>
  <li>رابط کاربری در طول عملیات ذخیره، یک نشانگر 'در حال ذخیره...' نمایش می‌دهد و بازخورد واضحی به کاربر ارائه می‌دهد.</li>
  <li>تابع بازگشت می‌تواند در یک پیاده‌سازی پیچیده‌تر برای برگرداندن هرگونه تغییر و رندر مجدد با مقدار `content` در صورت شکست فراخوانی API استفاده شود.</li>
</ul>

<h2>موارد استفاده پیشرفته و ملاحظات</h2>

<h3>دسته‌بندی به‌روزرسانی‌ها</h3>

<p>در برخی موارد، ممکن است بخواهید چندین به‌روزرسانی خوش‌بینانه را برای بهبود عملکرد و کاهش تعداد رندرهای مجدد، دسته‌بندی کنید. <code>experimental_useOptimistic</code> می‌تواند این کار را انجام دهد، اگرچه پیاده‌سازی خاص به نیازمندی‌های برنامه شما بستگی دارد.</p>

<p>یک رویکرد رایج استفاده از یک شیء وضعیت خوش‌بینانه واحد است که شامل چندین ویژگی است. هنگامی که یک عمل چندین ویژگی را تغییر می‌دهد، می‌توانید آنها را به طور همزمان به‌روز کنید.</p>

<h3>مدیریت خطا و استراتژی‌های بازگشت</h3>

<p>مدیریت خطای قوی برای یک تجربه کاربری خوب حیاتی است. هنگامی که یک فراخوانی API با شکست مواجه می‌شود، باید تصمیم بگیرید که چگونه با خطا برخورد کنید. استراتژی‌های رایج عبارتند از:</p>

<ul>
  <li><strong>نمایش پیام‌های خطا:</strong> پیام‌های خطای واضحی به کاربر ارائه دهید که نشان می‌دهد چه مشکلی پیش آمده است.</li>
  <li><strong>بازگرداندن به‌روزرسانی‌های خوش‌بینانه:</strong> بازگرداندن تغییرات خوش‌بینانه رابط کاربری به وضعیت قبلی.</li>
  <li><strong>تلاش مجدد برای عملیات:</strong> پیاده‌سازی یک مکانیزم تلاش مجدد برای خطاهای گذرا.</li>
</ul>

<p>انتخاب استراتژی به شدت خطا و تعامل خاص کاربر بستگی دارد.</p>

<h3>تست و اشکال‌زدایی</h3>

<p>تست برنامه‌هایی که از <code>experimental_useOptimistic</code> استفاده می‌کنند نیاز به ملاحظات دقیقی دارد:</p>

<ul>
  <li><strong>شبیه‌سازی عملیات ناهمزمان:</strong> از فریم‌ورک‌های شبیه‌سازی (مانند Jest, React Testing Library) برای شبیه‌سازی فراخوانی‌های API و سناریوهای مختلف (موفقیت، شکست، مشکلات شبکه) استفاده کنید.</li>
  <li><strong>تست به‌روزرسانی‌های رابط کاربری:</strong> بررسی کنید که رابط کاربری در پاسخ به به‌روزرسانی‌های خوش‌بینانه و شرایط خطا به درستی به‌روز می‌شود.</li>
  <li><strong>ابزارهای اشکال‌زدایی:</strong> از ابزارهای توسعه‌دهنده مرورگر (مانند React DevTools) برای بازرسی وضعیت و شناسایی مشکلات احتمالی استفاده کنید.</li>
</ul>

<h3>ملاحظات جهانی و بومی‌سازی</h3>

<p>هنگام ساخت برنامه‌های جهانی با <code>experimental_useOptimistic</code>، این عوامل را در نظر بگیرید:</p>

<ul>
  <li><strong>عملکرد و تأخیر شبکه:</strong> تأثیر عملکرد رابط کاربری خوش‌بینانه می‌تواند به ویژه در مناطقی با تأخیر شبکه بالا مهم باشد. فراخوانی‌های API خود را بهینه کنید و تکنیک‌هایی مانند ذخیره‌سازی داده (caching) را در نظر بگیرید.</li>
  <li><strong>بومی‌سازی:</strong> اطمینان حاصل کنید که تمام پیام‌های خطا و عناصر رابط کاربری برای زبان‌ها و فرهنگ‌های مختلف بومی‌سازی شده‌اند.</li>
  <li><strong>مناطق زمانی و فرمت‌های تاریخ/زمان:</strong> فرمت‌های تاریخ/زمان را به درستی مدیریت کنید تا از سردرگمی کاربران در مناطق زمانی مختلف جلوگیری شود.</li>
  <li><strong>ارز و قالب‌بندی اعداد:</strong> ارز و اعداد را به طور مناسب برای مناطق مختلف قالب‌بندی کنید.</li>
  <li><strong>دسترسی‌پذیری:</strong> اطمینان حاصل کنید که رابط کاربری برای کاربران دارای معلولیت، صرف نظر از موقعیت مکانی آنها، قابل دسترس است. این شامل استفاده صحیح از ویژگی‌های ARIA، کنتراست رنگ و ناوبری با صفحه‌کلید است.</li>
</ul>

<h2>بهترین شیوه‌ها و بینش‌های عملی</h2>

<ul>
  <li><strong>ساده شروع کنید:</strong> قبل از پیاده‌سازی <code>experimental_useOptimistic</code> در سناریوهای پیچیده، با موارد استفاده ساده شروع کنید تا نحوه کار آن را درک کنید.</li>
  <li><strong>تجربه کاربری را در اولویت قرار دهید:</strong> همیشه تجربه کاربری را در اولویت قرار دهید. اطمینان حاصل کنید که رابط کاربری، حتی هنگام مدیریت عملیات ناهمزمان، پاسخگو به نظر می‌رسد.</li>
  <li><strong>خطاها را به شیوه‌ای زیبا مدیریت کنید:</strong> مدیریت خطای قوی را برای ارائه بازخورد مفید به کاربران و جلوگیری از ناهماهنگی داده‌ها پیاده‌سازی کنید.</li>
  <li><strong>به طور کامل تست کنید:</strong> برنامه خود را به طور کامل تست کنید تا اطمینان حاصل شود که به‌روزرسانی‌های همزمان و شرایط رقابتی را به درستی مدیریت می‌کند.</li>
  <li><strong>شرایط شبکه را در نظر بگیرید:</strong> شرایط متغیر شبکه در مناطق مختلف را در نظر بگیرید. فراخوانی‌های API خود را بهینه کنید و در صورت لزوم از کش استفاده کنید.</li>
  <li><strong>عملیات اتمی در سرور را بپذیرید:</strong> در منطق سمت سرور خود، عملیات اتمی را ترجیح دهید.</li>
</ul>

<h2>نتیجه‌گیری: توانمندسازی برنامه‌های جهانی با مدیریت به‌روزرسانی همزمان</h2>

<p>هوک <code>experimental_useOptimistic</code> در React یک راه حل قدرتمند و زیبا برای مدیریت به‌روزرسانی‌های همزمان و بهبود تجربه کاربری در برنامه‌های وب مدرن ارائه می‌دهد. با پذیرش رابط کاربری خوش‌بینانه، مدیریت زیبا و روان عملیات ناهمزمان و ارائه بازخورد واضح به کاربران، می‌توانید برنامه‌های جهانی پاسخگوتر و مقاوم‌تری بسازید.</p>

<p>این راهنما یک مرور جامع از <code>experimental_useOptimistic</code>، شامل مفاهیم اصلی، مثال‌های عملی و ملاحظات مربوط به برنامه‌های جهانی ارائه داده است. با تسلط بر این ابزار قدرتمند، توسعه‌دهندگان می‌توانند به طور قابل توجهی عملکرد و تجربه کاربری برنامه‌های React خود را، صرف نظر از موقعیت جغرافیایی کاربران و چالش‌های تکنولوژیکی آنها، افزایش دهند. به یاد داشته باشید که در مورد آخرین پیشرفت‌ها در React و توسعه فرانت‌اند به‌روز بمانید تا اطمینان حاصل کنید که برنامه‌های شما در خط مقدم نوآوری باقی می‌مانند.</p></div><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">ری‌اکت</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">experimental_useOptimistic</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">رابط کاربری خوش‌بینانه</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">به‌روزرسانی‌های همزمان</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">شرایط رقابتی</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">مدیریت وضعیت</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">جاوااسکریپت</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">توسعه فرانت‌اند</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">برنامه‌های جهانی</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">عملکرد</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">تجربه کاربری</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">هوک‌های ری‌اکت</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">عملیات ناهمزمان</span></div></footer></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>$RB=[];$RV=function(b){$RT=performance.now();for(var a=0;a<b.length;a+=2){var c=b[a],e=b[a+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&g._reactRetry()}}b.length=0};
$RC=function(b,a){if(a=document.getElementById(a))(b=document.getElementById(b))?(b.previousSibling.data="$~",$RB.push(b,a),2===$RB.length&&(b="number"!==typeof $RT?0:$RT,a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:b+300-a))):a.parentNode.removeChild(a)};$RC("B:1","S:1")</script><div hidden id="S:3"></div><script>$RC("B:3","S:3")</script><div hidden id="S:0"></div><script>$RC("B:0","S:0")</script></body></html>