React Custom Hook

 

Custom hooks must start with keyword is 'use'. Like : useFetchData().

Custom hooks are functions that use one or more times.

Custom hooks create with used also react hook if needed.

app.js file code

import { createContext, useState } from 'react';

import useFetch from './customhooks/useFetch';

function App() {

  const dataFetch = useFetch('Pass API path');

  return (

    <div className="App">

      {dataFetch.map((res) => {

        return (<h4 key={res.id}>

          res.title

        </h4>

        )

      })}

    </div>

  );

}

export default App;

customhooks/useFetch.js

import { useEffect, useState } from "react";

const useFetch = (url) => {

    const [responses, setResponses] = useState([]);

    useEffect(() => {

        fetch(url)

            .then((res) => res.json())

            .then((data) => { setResponses(data) })

    }, []);

    return responses;

}

export default useFetch;