Bereaksi Kait Kustom

Kait adalah fungsi yang dapat digunakan kembali.

Saat Anda memiliki logika komponen yang perlu digunakan oleh banyak komponen, kita dapat mengekstrak logika tersebut ke Hook kustom.

Kait Kustom dimulai dengan "penggunaan". Contoh: useFetch.

Bangun Kait

Dalam kode berikut, kami mengambil data di Homekomponen kami dan menampilkannya.

Kami akan menggunakan layanan JSONPlaceholder untuk mengambil data palsu. Layanan ini sangat bagus untuk menguji aplikasi ketika tidak ada data yang ada.

Untuk mempelajari lebih lanjut, lihat bagian JavaScript Fetch API .

Gunakan layanan JSONPlaceholder untuk mengambil item "todo" palsu dan menampilkan judul di halaman:

import { useState, useEffect } from "react";
import ReactDOM from "react-dom";

const Home = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/todos")
      .then((res) => res.json())
      .then((data) => setData(data));
 }, []);

  return (
    <>
      {data &&
        data.map((item) => {
          return <p key={item.id}>{item.title}</p>;
        })}
    </>
  );
};

ReactDOM.render(<Home />, document.getElementById("root"));

Logika pengambilan mungkin juga diperlukan di komponen lain, jadi kami akan mengekstraknya ke dalam Hook khusus.

Pindahkan logika pengambilan ke file baru untuk digunakan sebagai Hook kustom:

import { useState, useEffect } from "react";

const useFetch = (url) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((data) => setData(data));
  }, [url]);

  return [data];
};

export default useFetch;

import ReactDOM from "react-dom";
import useFetch from "./useFetch";

const Home = () => {
  const [data] = useFetch("https://jsonplaceholder.typicode.com/todos");

  return (
    <>
      {data &&
        data.map((item) => {
          return <p key={item.id}>{item.title}</p>;
        })}
    </>
  );
};

ReactDOM.render(<Home />, document.getElementById("root"));

Contoh Dijelaskan

Kami telah membuat file baru bernama useFetch.jsyang berisi fungsi yang disebut useFetchyang berisi semua logika yang diperlukan untuk mengambil data kami.

Kami menghapus URL hard-code dan menggantinya dengan urlvariabel yang dapat diteruskan ke Hook kustom.

Terakhir, kami mengembalikan data kami dari Hook.

Di index.js, kami mengimpor useFetchHook kami dan menggunakannya seperti Hook lainnya. Di sinilah kami meneruskan URL untuk mengambil data.

Sekarang kita dapat menggunakan kembali Hook kustom ini di komponen apa pun untuk mengambil data dari URL apa pun.