Reageer op maat gemaakte haken

Haken zijn herbruikbare functies.

Als je componentlogica hebt die door meerdere componenten moet worden gebruikt, kunnen we die logica extraheren naar een aangepaste Hook.

Aangepaste haken beginnen met "gebruiken". Voorbeeld: useFetch.

Bouw een haak

In de volgende code halen we gegevens op in onze Homecomponent en geven deze weer.

We zullen de JSONPlaceholder -service gebruiken om nepgegevens op te halen. Deze service is geweldig voor het testen van applicaties wanneer er geen bestaande gegevens zijn.

Bekijk de JavaScript Fetch API- sectie voor meer informatie.

Gebruik de JSONPlaceholder-service om nep-todo-items op te halen en de titels op de pagina weer te geven:

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

De ophaallogica kan ook nodig zijn in andere componenten, dus we zullen dat extraheren in een aangepaste Hook.

Verplaats de ophaallogica naar een nieuw bestand om te gebruiken als een aangepaste 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"));

Voorbeeld uitgelegd

We hebben een nieuw bestand met de naam gemaakt useFetch.jsdat een aangeroepen functie useFetchbevat die alle logica bevat die nodig is om onze gegevens op te halen.

We hebben de hardgecodeerde URL verwijderd en vervangen door een urlvariabele die kan worden doorgegeven aan de aangepaste Hook.

Ten slotte retourneren we onze gegevens van onze Hook.

In index.js, we importeren onze useFetchHook en gebruiken deze zoals elke andere Hook. Dit is waar we de URL doorgeven om gegevens van op te halen.

Nu kunnen we deze aangepaste Hook opnieuw gebruiken in elk onderdeel om gegevens van elke URL op te halen.