React useOptimistic: Reszponzív Felhasználói Felületek Építése Optimista Frissítésekkel

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

              
                Copy
              
            
          

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

function LikeButton({ postId, initialLikes }) {
  const [isLiked, setIsLiked] = useState(false);
  const [optimisticLikes, addOptimistic] = useOptimistic(
    initialLikes,
    (state, newLike) => (newLike ? state + 1 : state - 1) //az updateFn növeli vagy csökkenti
  );

  const handleClick = async () => {
    const optimisticValue = !isLiked;
    setIsLiked(optimisticValue); // Lokális 'isLiked' állapot frissítése
    addOptimistic(optimisticValue); // optimisticLikes növelése vagy csökkentése

    try {
      // API hívás szimulálása a bejegyzés kedvelésére/visszavonására
      await new Promise((resolve) => setTimeout(resolve, 500)); // Hálózati késleltetés szimulálása

      // Itt frissítjük a szerver állapotát (pl. fetch vagy Axios használatával)
      // await api.likePost(postId, isLiked);
    } catch (error) {
      console.error('Hiba a bejegyzés kedvelésekor:', error);
      // A kérés sikertelensége esetén visszavonjuk az optimista frissítést
      setIsLiked(!optimisticValue);
      addOptimistic(!optimisticValue);
    }
  };

  return (
    
      {isLiked ? 'Mégsem tetszik' : 'Tetszik'} ({optimisticLikes})
    
  );
}

export default LikeButton;

            

              
                Copy
              
            
          

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

function CommentForm({ postId }) {
  const [commentText, setCommentText] = useState('');
  const [optimisticComments, addOptimistic] = useOptimistic([]);

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!commentText.trim()) return;

    const newComment = {
      id: Date.now(), // Ideiglenes azonosító generálása
      text: commentText,
      author: 'Felhasználó',
      timestamp: new Date().toISOString(),
    };

    addOptimistic(prevComments => [...prevComments, newComment]);
    setCommentText('');

    try {
      // API hívás szimulálása a hozzászólás létrehozására
      await new Promise((resolve) => setTimeout(resolve, 500)); // Hálózati késleltetés szimulálása
      // Itt történne az API hívás, pl. api.addComment(postId, newComment);
      // Feltételezve, hogy az API hívás visszaadja a hozzászólást egy szerver által kiosztott azonosítóval, frissítenéd a hozzászólás azonosítóját

    } catch (error) {
      console.error('Hiba a hozzászólás hozzáadásakor:', error);
      // A kérés sikertelensége esetén visszavonjuk az optimista frissítést
      addOptimistic(prevComments => prevComments.filter(c => c.id !== newComment.id));
    }
  };

  return (
    

       setCommentText(e.target.value)}
        placeholder="Írja be a hozzászólását..."
      />
      <button type="submit">Hozzászólás küldése</button>
      <div>
        {optimisticComments.map((comment) => (
          <div key={comment.id}>
            <p><b>{comment.author}:</b> {comment.text}</p>
            <small>{comment.timestamp}</small>
          </div>
        ))}
      </div>
    </form>
  );
}

export default CommentForm;
</code>
            <div class="copy-button-container">
              <button 
                data-code="CmltcG9ydCBSZWFjdCwgeyB1c2VTdGF0ZSwgdXNlT3B0aW1pc3RpYyB9IGZyb20gJ3JlYWN0JzsKCmZ1bmN0aW9uIENvbW1lbnRGb3JtKHsgcG9zdElkIH0pIHsKICBjb25zdCBbY29tbWVudFRleHQsIHNldENvbW1lbnRUZXh0XSA9IHVzZVN0YXRlKCcnKTsKICBjb25zdCBbb3B0aW1pc3RpY0NvbW1lbnRzLCBhZGRPcHRpbWlzdGljXSA9IHVzZU9wdGltaXN0aWMoW10pOwoKICBjb25zdCBoYW5kbGVTdWJtaXQgPSBhc3luYyAoZSkgPT4gewogICAgZS5wcmV2ZW50RGVmYXVsdCgpOwogICAgaWYgKCFjb21tZW50VGV4dC50cmltKCkpIHJldHVybjsKCiAgICBjb25zdCBuZXdDb21tZW50ID0gewogICAgICBpZDogRGF0ZS5ub3coKSwgLy8gSWRlaWdsZW5lcyBhem9ub3PtdPMgZ2VuZXLhbOFzYQogICAgICB0ZXh0OiBjb21tZW50VGV4dCwKICAgICAgYXV0aG9yOiAnRmVsaGFzem7hbPMnLAogICAgICB0aW1lc3RhbXA6IG5ldyBEYXRlKCkudG9JU09TdHJpbmcoKSwKICAgIH07CgogICAgYWRkT3B0aW1pc3RpYyhwcmV2Q29tbWVudHMgPT4gWy4uLnByZXZDb21tZW50cywgbmV3Q29tbWVudF0pOwogICAgc2V0Q29tbWVudFRleHQoJycpOwoKICAgIHRyeSB7CiAgICAgIC8vIEFQSSBo7XbhcyBzemltdWzhbOFzYSBhIGhvenrhc3rzbOFzIGzpdHJlaG964XPhcmEKICAgICAgYXdhaXQgbmV3IFByb21pc2UoKHJlc29sdmUpID0+IHNldFRpbWVvdXQocmVzb2x2ZSwgNTAwKSk7IC8vIEjhbPN6YXRpIGvpc2xlbHRldOlzIHN6aW11bOFs4XNhCiAgICAgIC8vIEl0dCB09nJ06W5uZSBheiBBUEkgaO124XMsIHBsLiBhcGkuYWRkQ29tbWVudChwb3N0SWQsIG5ld0NvbW1lbnQpOwogICAgICAvLyBGZWx06XRlbGV6dmUsIGhvZ3kgYXogQVBJIGjtduFzIHZpc3N6YWFkamEgYSBob3p64XN682zhc3QgZWd5IHN6ZXJ2ZXIg4Wx0YWwga2lvc3p0b3R0IGF6b25vc+1083ZhbCwgZnJpc3PtdGVu6WQgYSBob3p64XN682zhcyBhem9ub3PtdPNq4XQKCiAgICB9IGNhdGNoIChlcnJvcikgewogICAgICBjb25zb2xlLmVycm9yKCdIaWJhIGEgaG96euFzevNs4XMgaG96euFhZOFzYWtvcjonLCBlcnJvcik7CiAgICAgIC8vIEEga+ly6XMgc2lrZXJ0ZWxlbnPpZ2UgZXNldOluIHZpc3N6YXZvbmp1ayBheiBvcHRpbWlzdGEgZnJpc3PtdOlzdAogICAgICBhZGRPcHRpbWlzdGljKHByZXZDb21tZW50cyA9PiBwcmV2Q29tbWVudHMuZmlsdGVyKGMgPT4gYy5pZCAhPT0gbmV3Q29tbWVudC5pZCkpOwogICAgfQogIH07CgogIHJldHVybiAoCiAgICA8Zm9ybSBvblN1Ym1pdD17aGFuZGxlU3VibWl0fT4KICAgICAgPHRleHRhcmVhCiAgICAgICAgdmFsdWU9e2NvbW1lbnRUZXh0fQogICAgICAgIG9uQ2hhbmdlPXsoZSkgPT4gc2V0Q29tbWVudFRleHQoZS50YXJnZXQudmFsdWUpfQogICAgICAgIHBsYWNlaG9sZGVyPSLNcmphIGJlIGEgaG96euFzevNs4XPhdC4uLiIKICAgICAgLz4KICAgICAgPGJ1dHRvbiB0eXBlPSJzdWJtaXQiPkhvenrhc3rzbOFzIGv8bGTpc2U8L2J1dHRvbj4KICAgICAgPGRpdj4KICAgICAgICB7b3B0aW1pc3RpY0NvbW1lbnRzLm1hcCgoY29tbWVudCkgPT4gKAogICAgICAgICAgPGRpdiBrZXk9e2NvbW1lbnQuaWR9PgogICAgICAgICAgICA8cD48Yj57Y29tbWVudC5hdXRob3J9OjwvYj4ge2NvbW1lbnQudGV4dH08L3A+CiAgICAgICAgICAgIDxzbWFsbD57Y29tbWVudC50aW1lc3RhbXB9PC9zbWFsbD4KICAgICAgICAgIDwvZGl2PgogICAgICAgICkpfQogICAgICA8L2Rpdj4KICAgIDwvZm9ybT4KICApOwp9CgpleHBvcnQgZGVmYXVsdCBDb21tZW50Rm9ybTsK"
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p><b>Magyarázat:</b></p>

<ol>
  <li>Az <code>optimisticComments</code> állapotot egy üres tömbként inicializáljuk a <code>useOptimistic([])</code> segítségével.</li>
  <li>Amikor a felhasználó elküldi a hozzászólás űrlapot, létrehozunk egy ideiglenes hozzászólás objektumot egy generált azonosítóval.</li>
  <li>Meghívjuk az <code>addOptimistic()</code>-ot, hogy az új hozzászólást azonnal hozzáadjuk az <code>optimisticComments</code> tömbhöz. A frissítő funkció megkapja az aktuális hozzászólások tömbjét `prevComments` néven, és a spread operátorral hozzáfűzi az `newComment`-et.</li>
  <li>Szimulálunk egy API hívást a hozzászólás létrehozásához a szerveren.</li>
  <li>Ha az API hívás meghiúsul, visszavonjuk az optimista frissítést az ideiglenes hozzászólás kiszűrésével az <code>optimisticComments</code> tömbből az ideiglenes azonosítója alapján.</li>
</ol>

<h2>A <code>useOptimistic</code> használatának legjobb gyakorlatai</h2>

<ul>
  <li><b>Kezelje a hibákat elegánsan:</b> Mindig tartalmazzon hibakezelést az optimista frissítések visszavonására, ha a szerver kérés meghiúsul. Adjon informatív hibaüzeneteket a felhasználónak.</li>
  <li><b>Használjon ideiglenes azonosítókat:</b> Amikor optimistán hoz létre új elemeket (pl. hozzászólások, üzenetek), használjon ideiglenes azonosítókat, amíg a szerver megerősíti a létrehozást és megad egy végleges azonosítót. Ez lehetővé teszi az optimista frissítés könnyű visszavonását szükség esetén.</li>
  <li><b>Vegye figyelembe az adatkonzisztenciát:</b> Legyen tudatában a kliens és a szerver közötti lehetséges adatinkonzisztenciáknak. Az optimista frissítéseket úgy kell megtervezni, hogy minimalizálják az ilyen inkonzisztenciák hatását. Komplexebb esetekben fontolja meg olyan technikák használatát, mint az optimista zárolás vagy a konfliktuskezelés.</li>
  <li><b>Adjon vizuális visszajelzést:</b> Világosan jelezze a felhasználónak, hogy egy művelet optimistán kerül feldolgozásra. Például megjeleníthet egy finom betöltésjelzőt vagy egy ideiglenes "függőben" állapotot. Ez segít a felhasználói elvárások kezelésében.</li>
  <li><b>Tartsa egyszerűen az optimista frissítéseket:</b> Kerülje az optimista frissítések használatát komplex vagy kritikus műveleteknél, amelyeknek súlyos következményei lehetnek, ha meghiúsulnak. Koncentráljon azokra a műveletekre, amelyek viszonylag alacsony kockázatúak és egyértelmű visszavonási mechanizmussal rendelkeznek.</li>
  <li><b>Vegye figyelembe a felhasználói kontextust:</b> Igazítsa az optimista frissítés viselkedését a konkrét felhasználói kontextushoz és a végrehajtott művelet típusához. Például olyan műveleteknél, amelyek valószínűleg sikeresek lesznek, alkalmazhat agresszívabb optimista frissítést. A hibára hajlamosabb műveleteknél pedig óvatosabb lehet.</li>
  <li><b>Használja tranzakciókkal:</b> Ha adatbázist vagy más adattárolót használ, fontolja meg tranzakciók használatát annak biztosítására, hogy az optimista frissítések atomiak és konzisztensek legyenek.</li>
</ul>

<h2>Mikor kerüljük az optimista UI frissítéseket?</h2>

<p>Bár az optimista UI frissítések jelentősen javíthatják a felhasználói élményt, nem mindig jelentenek megfelelő megoldást. Íme néhány helyzet, amikor érdemes elkerülni őket:</p>

<ul>
  <li><b>Kritikus műveletek:</b> Kerülje az optimista frissítések használatát kritikus műveleteknél, mint például pénzügyi tranzakciók vagy biztonsági szempontból érzékeny műveletek. Ezekben az esetekben elengedhetetlen, hogy a szerver sikeresen feldolgozza a kérést, mielőtt bármilyen változást tükröznénk a UI-ban.</li>
  <li><b>Komplex adatfüggőségek:</b> Ha egy művelet komplex függőségekkel rendelkezik más adatoktól vagy szolgáltatásoktól, az optimista frissítések megvalósítása és karbantartása nehéz lehet. Az inkonzisztenciák és hibák kockázata jelentősen megnő ilyen esetekben.</li>
  <li><b>Megbízhatatlan hálózati körülmények:</b> Ha az alkalmazást gyakran használják megbízhatatlan hálózati kapcsolattal rendelkező területeken, az optimista frissítések a gyakori visszavonások miatt rossz felhasználói élményhez vezethetnek. Fontolja meg alternatív stratégiákat, mint például az offline-first megközelítéseket.</li>
  <li><b>Helyzetek, ahol a pontosság a legfontosabb:</b> Ha fontosabb, hogy a felhasználó pontos, naprakész információkat lásson, mintsem azonnali változásokat, akkor nem szabad optimista frissítéseket használni.</li>
</ul>

<h2>Globális megfontolások</h2>

<p>Amikor optimista UI frissítéseket valósít meg egy globális közönség számára, vegye figyelembe a következőket:</p>

<ul>
  <li><b>Változó hálózati sebességek:</b> A hálózati sebességek jelentősen eltérnek a világ különböző részein. Az optimista frissítések különösen hasznosak lehetnek a lassabb hálózati kapcsolatokkal rendelkező régiókban.</li>
  <li><b>Adat lokalizáció:</b> Győződjön meg arról, hogy az optimista frissítések által generált ideiglenes adatok megfelelően lokalizálva vannak a különböző régiók és nyelvek számára. Például a dátum- és számformátumokat a felhasználó területi beállításaihoz kell igazítani.</li>
  <li><b>Időzónák:</b> Legyen tekintettel az időzónákra, amikor időbélyegeket jelenít meg vagy eseményeket ütemez optimistán. Győződjön meg arról, hogy a megjelenített idő pontos a felhasználó aktuális időzónájához képest.</li>
  <li><b>Kulturális érzékenységek:</b> Vegye figyelembe a kulturális érzékenységeket az optimista UI frissítések tervezésekor. Például bizonyos vizuális jeleket vagy animációkat másképp érzékelhetnek a különböző kultúrákban.</li>
</ul>

<h2>A <code>useOptimistic</code> alternatívái</h2>

<p>Bár a <code>useOptimistic</code> kényelmes módot biztosít az optimista frissítések kezelésére, manuálisan is megvalósíthatja őket más React állapotkezelési technikákkal. Például használhatja a <code>useState</code>, <code>useReducer</code> hookokat, vagy egy állapotkezelő könyvtárat, mint a Redux vagy a Zustand.</p>

<p>A <code>useOptimistic</code> azonban számos előnnyel rendelkezik a manuális megvalósításokkal szemben:</p>

<ul>
  <li><b>Egyszerűsített logika:</b> A <code>useOptimistic</code> magába foglalja az optimista állapot kezelésének és a frissítések visszavonásának logikáját, így a kód tisztább és könnyebben érthető lesz.</li>
  <li><b>Jobb teljesítmény:</b> A <code>useOptimistic</code> teljesítményre van optimalizálva, biztosítva a frissítések hatékony alkalmazását.</li>
  <li><b>Kevesebb sablonkód:</b> A <code>useOptimistic</code> csökkenti az optimista frissítések megvalósításához szükséges sablonkód mennyiségét, lehetővé téve, hogy az alkalmazás alapvető funkcionalitására összpontosítson.</li>
</ul>

<h2>Összegzés</h2>

<p>A React <code>useOptimistic</code> hookja értékes eszköz reszponzív és lebilincselő felhasználói felületek építéséhez. Az optimista UI frissítések bevezetésével jelentősen javíthatja alkalmazásai érzékelt teljesítményét és fokozhatja az általános felhasználói élményt. Bár fontos mérlegelni, hogy mikor és hol használja megfelelően az optimista frissítéseket, ennek a technikának az elsajátítása versenyelőnyt jelenthet a webfejlesztés folyamatosan változó világában. Ne felejtse el elegánsan kezelni a hibákat, használni ideiglenes azonosítókat, és figyelni az adatkonzisztenciára. A legjobb gyakorlatok követésével és a globális megfontolások figyelembevételével a <code>useOptimistic</code> segítségével kivételes felhasználói élményt teremthet globális közönsége számára.</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">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">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">optimista 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">UI frissítések</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 hook-ok</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">felhasználói élmény</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">teljesítményoptimalizálás</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">frontend fejlesztés</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 fejlesztés</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">aszinkron műveletek</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>$RC("B:1","S:1")</script></body></html>