রিঅ্যাক্টের experimental_useOptimistic দিয়ে কনকারেন্ট আপডেট আয়ত্ত করা: একটি বিশ্বব্যাপী গাইড

            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>UI সেভ অপারেশনের সময় একটি 'Saving...' ইন্ডিকেটর প্রদর্শন করে, যা ব্যবহারকারীকে স্পষ্ট প্রতিক্রিয়া প্রদান করে।</li>
  <li>রোলব্যাক ফাংশনটি আরও উন্নত বাস্তবায়নে ব্যবহার করা যেতে পারে API কল ব্যর্থ হলে যেকোনো পরিবর্তন প্রত্যাবর্তন করতে এবং `content` মান দিয়ে পুনরায় রেন্ডার করতে।</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> অপটিমিস্টিক UI পরিবর্তনগুলি আগের অবস্থায় ফিরিয়ে আনুন।</li>
  <li><strong>অপারেশন পুনরায় চেষ্টা করা:</strong> ক্ষণস্থায়ী ত্রুটির জন্য একটি পুনরায় চেষ্টা করার ব্যবস্থা প্রয়োগ করুন।</li>
</ul>

<p>কৌশল পছন্দ করার বিষয়টি ত্রুটির তীব্রতা এবং নির্দিষ্ট ব্যবহারকারীর মিথস্ক্রিয়ার উপর নির্ভর করে।</p>

<h3>টেস্টিং এবং ডিবাগিং</h3>

<p><code>experimental_useOptimistic</code> ব্যবহার করে এমন অ্যাপ্লিকেশন টেস্টিংয়ের জন্য সতর্ক বিবেচনার প্রয়োজন:</p>

<ul>
  <li><strong>অ্যাসিঙ্ক্রোনাস অপারেশনের মকিং:</strong> API কল মক করতে এবং বিভিন্ন পরিস্থিতি (সফলতা, ব্যর্থতা, নেটওয়ার্ক সমস্যা) অনুকরণ করতে মকিং ফ্রেমওয়ার্ক (যেমন, Jest, React Testing Library) ব্যবহার করুন।</li>
  <li><strong>UI আপডেট টেস্টিং:</strong> অপটিমিস্টিক আপডেট এবং ত্রুটির অবস্থার প্রতিক্রিয়ায় UI সঠিকভাবে আপডেট হয় কিনা তা যাচাই করুন।</li>
  <li><strong>ডিবাগিং টুলস:</strong> স্টেট পরিদর্শন করতে এবং সম্ভাব্য সমস্যা শনাক্ত করতে ব্রাউজার ডেভেলপার টুলস (যেমন, React DevTools) ব্যবহার করুন।</li>
</ul>

<h3>বিশ্বব্যাপী বিবেচনা এবং স্থানীয়করণ</h3>

<p><code>experimental_useOptimistic</code> দিয়ে বিশ্বব্যাপী অ্যাপ্লিকেশন তৈরি করার সময়, এই বিষয়গুলি বিবেচনা করুন:</p>

<ul>
  <li><strong>পারফরম্যান্স এবং নেটওয়ার্ক ল্যাটেন্সি:</strong> উচ্চ নেটওয়ার্ক ল্যাটেন্সিযুক্ত অঞ্চলে অপটিমিস্টিক UI-এর পারফরম্যান্সের প্রভাব বিশেষভাবে গুরুত্বপূর্ণ হতে পারে। আপনার API কলগুলি অপ্টিমাইজ করুন এবং ডেটা ক্যাশিংয়ের মতো কৌশলগুলি বিবেচনা করুন।</li>
  <li><strong>স্থানীয়করণ:</strong> নিশ্চিত করুন যে সমস্ত ত্রুটির বার্তা এবং UI উপাদানগুলি বিভিন্ন ভাষা এবং সংস্কৃতির জন্য স্থানীয়করণ করা হয়েছে।</li>
  <li><strong>সময় অঞ্চল এবং তারিখ/সময় ফরম্যাট:</strong> বিভিন্ন সময় অঞ্চলের ব্যবহারকারীদের জন্য বিভ্রান্তি এড়াতে তারিখ/সময় ফরম্যাট সঠিকভাবে পরিচালনা করুন।</li>
  <li><strong>মুদ্রা এবং সংখ্যা ফরম্যাটিং:</strong> বিভিন্ন অঞ্চলের জন্য মুদ্রা এবং সংখ্যা যথাযথভাবে ফরম্যাট করুন।</li>
  <li><strong>অ্যাক্সেসিবিলিটি:</strong> নিশ্চিত করুন যে UI ব্যবহারকারীদের অবস্থানের নির্বিশেষে প্রতিবন্ধী ব্যবহারকারীদের জন্য অ্যাক্সেসযোগ্য। এর মধ্যে ARIA অ্যাট্রিবিউট, রঙ কনট্রাস্ট এবং কীবোর্ড নেভিগেশনের সঠিক ব্যবহার অন্তর্ভুক্ত।</li>
</ul>

<h2>সেরা অনুশীলন এবং কার্যকর অন্তর্দৃষ্টি</h2>

<ul>
  <li><strong>সরলভাবে শুরু করুন:</strong> জটিল পরিস্থিতিতে এটি প্রয়োগ করার আগে <code>experimental_useOptimistic</code> কিভাবে কাজ করে তা বোঝার জন্য সহজ ব্যবহারের ক্ষেত্র দিয়ে শুরু করুন।</li>
  <li><strong>ব্যবহারকারীর অভিজ্ঞতাকে অগ্রাধিকার দিন:</strong> সর্বদা ব্যবহারকারীর অভিজ্ঞতাকে অগ্রাধিকার দিন। নিশ্চিত করুন যে অ্যাসিঙ্ক্রোনাস অপারেশন পরিচালনা করার সময়ও UI প্রতিক্রিয়াশীল মনে হয়।</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> হুক আধুনিক ওয়েব অ্যাপ্লিকেশনগুলিতে কনকারেন্ট আপডেট পরিচালনা এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করার জন্য একটি শক্তিশালী এবং সুন্দর সমাধান প্রদান করে। অপটিমিস্টিক UI গ্রহণ করে, অ্যাসিঙ্ক্রোনাস অপারেশন সুন্দরভাবে পরিচালনা করে এবং ব্যবহারকারীদের স্পষ্ট প্রতিক্রিয়া প্রদান করে, আপনি আরও প্রতিক্রিয়াশীল এবং স্থিতিস্থাপক বিশ্বব্যাপী অ্যাপ্লিকেশন তৈরি করতে পারেন।</p>

<p>এই গাইডটি <code>experimental_useOptimistic</code> এর একটি বিশদ বিবরণ প্রদান করেছে, যার মধ্যে এর মূল ধারণা, ব্যবহারিক উদাহরণ এবং বিশ্বব্যাপী অ্যাপ্লিকেশনের জন্য বিবেচ্য বিষয়গুলি অন্তর্ভুক্ত রয়েছে। এই শক্তিশালী টুলটি আয়ত্ত করার মাধ্যমে, ডেভেলপাররা তাদের ব্যবহারকারীদের ভৌগোলিক অবস্থান এবং প্রযুক্তিগত চ্যালেঞ্জ নির্বিশেষে তাদের রিঅ্যাক্ট অ্যাপ্লিকেশনগুলির পারফরম্যান্স এবং ব্যবহারকারীর অভিজ্ঞতা উল্লেখযোগ্যভাবে উন্নত করতে পারে। আপনার অ্যাপ্লিকেশনগুলি যাতে উদ্ভাবনের অগ্রভাগে থাকে তা নিশ্চিত করতে রিঅ্যাক্ট এবং ফ্রন্ট-এন্ড ডেভেলপমেন্টের সর্বশেষ অগ্রগতির সাথে আপডেটেড থাকতে ভুলবেন না।</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">অপটিমিস্টিক UI</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>