I've created a simple useFetch custom hook which allows me to call any Url I want :

import React, { useState, useEffect } from 'react';


export default function useFetch(url) {
  console.log(url)
  const [data, setData] = useState([]);
 
  useEffect(() => {
    fetch(url)
      .then((response) => {
        if (response.ok) return response.json();
        setData([]);
      })
      .then((data) => {
       
        setData(data)})
      .catch((err) => {
        console.error(err);
        setData([]);
      });
  }, [url]);

 
  return { data} ;
}

In my Main component I'm loading a static list of items.( via useEffect with [] becuase it's static)

I currently do it via :

export function Courses() {
   
  const [langs, setLangs] = useState([]);

  useEffect(() => {
    getData(config.url).then((f) => setLangs(f));
  }, []);
...

Where getData is:

export function getData(uri) {
  return fetch(uri).then(response =>
    response.json()
  );
}

The problem is that I can't (don't know how) I can use my useFetch here becuase it can't be inside useEffect , and that's why I've created the additional getData method.

ps -

In other "details" component I use useFetch perfectly fine :

export default function Details({ langId }) {
  const { data: teachers } = useFetch(`${config.url}/${langId}`);
  ...

The problem is only in the main component where I don't want to fetch manually . I want to use my useFetch. How can I do that ?

I want that Courses will load the static list only once via useFetch