React ના 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>React નો <code>experimental_useOptimistic</code> હૂક આધુનિક વેબ એપ્લિકેશન્સમાં કોન્કરન્ટ અપડેટ્સનું સંચાલન કરવા અને યુઝર એક્સપિરિયન્સ સુધારવા માટે એક શક્તિશાળી અને ઉત્કૃષ્ટ ઉકેલ પ્રદાન કરે છે. ઓપ્ટિમિસ્ટિક UI અપનાવીને, એસિંક્રોનસ ઓપરેશન્સને સરળતાથી હેન્ડલ કરીને અને યુઝર્સને સ્પષ્ટ પ્રતિસાદ આપીને, તમે વધુ રિસ્પોન્સિવ અને સ્થિતિસ્થાપક ગ્લોબલ એપ્લિકેશન્સ બનાવી શકો છો.</p>

<p>આ માર્ગદર્શિકાએ <code>experimental_useOptimistic</code> ની વ્યાપક ઝાંખી પૂરી પાડી છે, જેમાં તેના મુખ્ય ખ્યાલો, વ્યાવહારિક ઉદાહરણો અને ગ્લોબલ એપ્લિકેશન્સ માટેની વિચારણાઓ શામેલ છે. આ શક્તિશાળી સાધનમાં નિપુણતા મેળવીને, ડેવલપર્સ તેમની React એપ્લિકેશન્સના પર્ફોર્મન્સ અને યુઝર એક્સપિરિયન્સને નોંધપાત્ર રીતે વધારી શકે છે, ભલે તેમના યુઝર્સના ભૌગોલિક સ્થાનો અને તકનીકી પડકારો ગમે તે હોય. તમારી એપ્લિકેશન્સ નવીનતામાં મોખરે રહે તે સુનિશ્ચિત કરવા માટે React અને ફ્રન્ટ-એન્ડ ડેવલપમેન્ટમાં નવીનતમ પ્રગતિઓ પર અપડેટ રહેવાનું યાદ રાખો.</p></div><template id="P:4"></template></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><div hidden id="S:4"><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">react</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">javascript</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">react hooks</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></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>