Reagisci agli hook personalizzati

I ganci sono funzioni riutilizzabili.

Quando si dispone di una logica componente che deve essere utilizzata da più componenti, è possibile estrarre tale logica in un Hook personalizzato.

Gli Hook personalizzati iniziano con "usa". Esempio: useFetch.

Costruisci un gancio

Nel codice seguente, stiamo recuperando i dati nel nostro Homecomponente e li stiamo visualizzando.

Utilizzeremo il servizio JSONPlaceholder per recuperare dati falsi. Questo servizio è ottimo per testare le applicazioni quando non ci sono dati esistenti.

Per saperne di più, controlla la sezione JavaScript Fetch API .

Utilizza il servizio JSONPlaceholder per recuperare elementi "todo" falsi e visualizzare i titoli sulla pagina:

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

La logica di recupero potrebbe essere necessaria anche in altri componenti, quindi la estrarremo in un Hook personalizzato.

Sposta la logica di recupero in un nuovo file da utilizzare come Hook personalizzato:

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

Esempio spiegato

Abbiamo creato un nuovo file chiamato useFetch.jscontenente una funzione chiamata useFetchche contiene tutta la logica necessaria per recuperare i nostri dati.

Abbiamo rimosso l'URL codificato e lo abbiamo sostituito con una urlvariabile che può essere passata all'Hook personalizzato.

Infine, stiamo restituendo i nostri dati dal nostro Hook.

In index.js, stiamo importando il nostro useFetchHook e lo utilizziamo come qualsiasi altro Hook. È qui che passiamo l'URL da cui recuperare i dati.

Ora possiamo riutilizzare questo Hook personalizzato in qualsiasi componente per recuperare i dati da qualsiasi URL.