Berhenti menggunakan useQuery daripada React-Query !

Dalam mana-mana aplikasi web, mengurus keadaan pemuatan dan ralat adalah penting. Memaparkan keadaan pemuatan memastikan pengguna dimaklumkan, tetapi dari segi sejarah, pengurusan ini boleh membosankan untuk dilaksanakan secara manual.

React Query sangat memudahkan pengendalian keadaan pemuatan dan keadaan global. Sesungguhnya, React Query mengelakkan permintaan berlebihan, dengan itu mengoptimumkan prestasi aplikasi.

Mari kita ambil contoh kod yang melaksanakan keadaan pemuatan dalam aplikasi kita.

Tentukan cangkuk untuk mengambil senarai pengguna:

export const useUsers = () => {
  const { data, isLoading } = useQuery<User[]>({
    queryKey: ["users"],
    queryFn: async () => {
      const response = await fetch("https://jsonplaceholder.typicode.com/users");
      await new Promise((resolve) => setTimeout(resolve, 2000));
      return response.json();
    },
  });

  return {
    users: data?.slice(0, 4) || [],
    isLoading,
  };
};

Di sini, kami mengambil empat pengguna dengan useQuery. Kami menambah kelewatan 2 saat untuk menggambarkan keadaan pemuatan. Kami kemudian mengembalikan data dan boolean untuk keadaan pemuatan.

Di bahagian komponen, mari buat komponen bernama Contoh:

const Example = (): JSX.Element => {
  const { users, isLoading } = useUsers();

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

  return (
    <div className="container">
      <div className="user-action">
        <h1>Users</h1>
        <div>
          <button>Add users</button>
        </div>
      </div>
      <UsersList users={users} />
    </div>
  );
};

Dalam komponen ini, kami menggunakan cangkuk kami untuk mengambil senarai pengguna. Sebelum memaparkan paparan, kami melakukan "pulangan awal" dengan mesej memuatkan, kemudian memaparkan tajuk, butang dan pengguna.

Had dan Alternatif

Walau bagaimanapun, setiap panggilan rangkaian memerlukan pengurusan keadaan pemuatan yang jelas. Jika kod tidak difaktorkan, beberapa elemen paparan mungkin menunggu untuk dipaparkan, seperti tajuk dan tindakan.

Berikut ialah alternatif untuk mengelak daripada menyekat pandangan:

import "./App.css";
import UsersList from "./UsersList";
import { useUsers } from "./useUsers";

const Example = (): JSX.Element => {
  const { users, isLoading } = useUsers();

  return (
    <div className="container">
      <div className="user-action">
        <h1>Users</h1>
        <div>
          <button>Add users</button>
        </div>
      </div>
      {isLoading ? <div>Loading...</div> : <UsersList users={users} />}
    </div>
  );
};

Di sini, kami menggunakan pemaparan bersyarat dan bukannya "pulangan awal". Penyelesaian ini kurang boleh dibaca dan lebih sukar untuk diselenggara dalam komponen yang kompleks.

Penyelesaian Ideal: Komponen Pemuatan Generik

Penyelesaian yang paling bijak ialah mencipta komponen yang memaparkan mesej pemuatan kami atau komponen utama kami berdasarkan pembolehubah.

type Props = PropsWithChildren<{
  isLoading: boolean;
}>;

const LoadingWrapper = ({ children, isLoading }: Props): JSX.Element => {
  if (isLoading) {
    return <div>Loading...</div>;
  }

  return <>{children}</>;
};

Penggunaan dalam Komponen Kami

const Example = (): JSX.Element => {
  const { users, isLoading } = useUsers();

  return (
    <div className="container">
      ...
      <LoadingWrapper isLoading={isLoading}>
        <UsersList users={users} />
      </LoadingWrapper>
    </div>
  );
};

Pemfaktoran ini memusatkan logik pemaparan bersyarat dan menyatukan penggunaan pemuatan mesej, menawarkan kod yang lebih bersih dan lebih boleh diselenggara.

Temui Keajaiban Suspense

Tetapi sekarang, jika saya memberitahu anda bahawa komponen yang baru kami buat ini sudah terbina dalam React. Lebih hebat lagi, ia ajaib! Tiada lagi pengurusan manual keadaan isLoading!

Bagaimana?

Dengan React's Suspense (versi React >= 16.6), semuanya menjadi lebih ringkas dan bersih. Suspense membolehkan anda mengisytiharkan secara jelas kepada React bahawa komponen sedang menunggu data tak segerak dan React menguruskan segala-galanya untuk kami.

Melaksanakan useSuspenseQuery

Mari gunakan useSuspenseQuery untuk mengurus keadaan pemuatan secara automatik. Begini caranya:

Cangkut untuk Mengambil Pengguna

export const useUsersSuspense = () => {
  const { data } = useSuspenseQuery<User[]>(
    ...
  );

  return {
    users: data?.slice(0, 4) || [],
    // Without the isLoading
  };
};

Penggunaan dalam Komponen dengan Suspense

Sekarang, mari kemas kini komponen Contoh kami untuk menggunakan Suspense:

const UsersComponent = (): JSX.Element => {
  const { users } = useUsersSuspense();

  return <UsersList users={users} />;
};

const Example = (): JSX.Element => {
  return (
    <div className="container">
      <div className="user-action">
        <h1>Users</h1>
        <div>
          <button>Add users</button>
        </div>
      </div>
      <Suspense fallback={<div>Loading...</div>}>
        <UsersComponent />
      </Suspense>
    </div>
  );
};

Kelebihan Suspense

Dengan Suspense, kami memusatkan pengurusan keadaan pemuatan di satu tempat, menjadikan kod lebih mudah dibaca dan diselenggara. Pengunduran Suspense dipaparkan secara automatik selagi data tidak tersedia, menghapuskan keperluan untuk mengurus keadaan isLoading secara manual.

Selain itu, Suspense menggalakkan pasukan pembangunan untuk memfaktorkan kod mereka. Dengan menggunakan komponen pemuatan piawai dan pengendali keadaan tak segerak, pembangun boleh mencipta modul boleh guna semula dan konsisten, sekali gus meningkatkan kualiti kod dan kebolehselenggaraan dalam jangka panjang.

Kesimpulan

Menggunakan Suspense dan useSuspenseQuery merevolusikan pengurusan keadaan pemuatan dalam aplikasi React. Pendekatan ini bukan sahaja memudahkan kod tetapi juga meningkatkan pengalaman pengguna dengan memastikan pemaparan yang lancar dan konsisten. Peralihan daripada useQuery kepada useSuspenseQuery ialah evolusi semula jadi untuk aplikasi yang lebih bersih dan cekap.

Selain itu, penyepaduan Suspense menggalakkan pasukan pembangunan untuk memfaktorkan kod mereka. Kesimpulannya, mengguna pakai Suspense dan useSuspenseQuery bukan sekadar peningkatan teknikal, tetapi juga satu langkah ke arah amalan pembangunan yang lebih sihat dan berkesan.

Surat Berita Saya :D

Atas ialah kandungan terperinci Berhenti menggunakan useQuery daripada React-Query !. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!