13. Jak zarządzać asynchronicznymi operacjami w komponentach React?

Zarządzanie asynchronicznymi operacjami w komponentach React polega na używaniu hooków takich jak useEffect do wykonywania operacji takich jak pobieranie danych, a także na zapewnieniu odpowiedniego czyszczenia efektów ubocznych, aby uniknąć problemów z pamięcią i nieprawidłowych aktualizacji stanu.

Przykład pobierania danych z użyciem useEffect:

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

function DataFetchingComponent() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let isSubscribed = true;

    async function fetchData() {
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      if (isSubscribed) {
        setData(result);
        setLoading(false);
      }
    }

    fetchData();

    return () => {
      isSubscribed = false;
    };
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

Zapewnienie czyszczenia efektów ubocznych: Podczas pracy z asynchronicznymi operacjami ważne jest, aby upewnić się, że efekty uboczne są czyszczone, gdy komponent jest odmontowywany, aby uniknąć wycieków pamięci i nieprawidłowych aktualizacji stanu.

W powyższym przykładzie użyto zmiennej isSubscribed, aby sprawdzić, czy komponent jest nadal zamontowany przed ustawieniem stanu po zakończeniu asynchronicznej operacji.