Reagovat Custom Hooks

Háčky jsou opakovaně použitelné funkce.

Když máte logiku komponent, kterou je třeba používat pro více komponent, můžeme tuto logiku extrahovat do vlastního Hooku.

Vlastní háky začínají na „použití“. Příklad: useFetch.

Postavte si háček

V následujícím kódu načítáme data v naší Homekomponentě a zobrazujeme je.

K načítání falešných dat použijeme službu JSONPlaceholder . Tato služba je skvělá pro testování aplikací, když neexistují žádná data.

Chcete-li se dozvědět více, podívejte se do sekce JavaScript Fetch API .

Použijte službu JSONPlaceholder k načtení falešných „úkolů“ a zobrazení názvů na stránce:

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 načítání může být potřeba i v jiných komponentách, takže ji extrahujeme do vlastního Hooku.

Přesuňte logiku načtení do nového souboru, který bude použit jako vlastní Hook:

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

Příklad vysvětlen

Vytvořili jsme nový soubor s názvem useFetch.jsobsahující funkci nazvanou useFetch, která obsahuje veškerou logiku potřebnou k načtení našich dat.

Odstranili jsme pevně zakódovanou adresu URL a nahradili ji urlproměnnou, kterou lze předat vlastnímu háku.

Nakonec vracíme naše data z našeho Hooku.

V index.js, dovážíme náš useFetchháček a používáme ho jako jakýkoli jiný háček. Zde předáváme adresu URL, ze které se mají načítat data.

Nyní můžeme tento vlastní Hook znovu použít v jakékoli komponentě k načtení dat z libovolné adresy URL.