Creare custom hook in React

In React gli hook sono fondamentali, e ce ne sono svariati già inclusi.

Nessuno vieta di crearne di nostri custom.

Supponiamo di dover richiamare dei dati in diverse pagine; volendo possiamo creare un hook che accetta in input l'url e ci restituisce i dati.

Quindi ad esempio nel file myHook.ts:

import {useState, useEffect} from "react";

const MyHook = (url: string) => {
  const [data, setData] = useState(null);

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

  return [data];
};

export default MyHook;

Nel nostro componente poi facciamo una cosa del genere:

import React from 'react';
import MyHook from "./myHook";

function App() {

  const [data] = MyHook("https://jsonplaceholder.typicode.com/posts");

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

}

export default App;

Enjoy!