React Özel Kancalar

Kancalar yeniden kullanılabilir işlevlerdir.

Birden çok bileşen tarafından kullanılması gereken bileşen mantığına sahip olduğunuzda, bu mantığı özel bir Hook'a çıkartabiliriz.

Özel Kancalar "kullanım" ile başlar. Örnek: useFetch.

Bir Kanca Oluştur

Aşağıdaki kodda, Homebileşenimize veri getiriyoruz ve onu görüntülüyoruz.

Sahte verileri almak için JSONPlaceholder hizmetini kullanacağız. Bu hizmet, mevcut veri olmadığında uygulamaları test etmek için harikadır.

Daha fazla bilgi edinmek için JavaScript Getirme API'si bölümüne bakın.

Sahte "yapılacaklar" öğelerini almak ve başlıkları sayfada görüntülemek için JSONPlaceholder hizmetini kullanın:

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"));

Getirme mantığına diğer bileşenlerde de ihtiyaç duyulabilir, bu yüzden bunu özel bir Hook'a çıkaracağız.

Özel Kanca olarak kullanılacak yeni bir dosyaya getirme mantığını taşıyın:

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"));

Örnek Açıklama

Verilerimizi getirmek için gereken tüm mantığı useFetch.jsiçeren bir işlevi içeren adlı yeni bir dosya oluşturduk .useFetch

Sabit kodlanmış URL'yi kaldırdık ve onu urlözel Hook'a geçirilebilecek bir değişkenle değiştirdik.

Son olarak, verilerimizi Hook'umuzdan döndürüyoruz.

İçinde index.js, Kancamızı ithal ediyoruz useFetchve diğer Kancalar gibi kullanıyoruz. Bu, verileri almak için URL'yi ilettiğimiz yerdir.

Artık herhangi bir URL'den veri almak için bu özel Kancayı herhangi bir bileşende yeniden kullanabiliriz.