Reactjs 如何创建自定义的react钩子？

我开始学习react，我很难理解定制的react钩子。我想创建一个钩子，在这里我可以传递从API调用接收到的数组，并创建另一个带有排序数据的数组，以便于访问。我的第一个问题是，当我导入hook时，它被称为无限时间，直到应用程序崩溃，所以我必须添加if语句。现在，当我尝试使用setArray并从API调用传递响应时，它返回undefined。我写的函数运行得很好，但我不知道如何使用它作为钩子。我寻找了一些教程/文档，但我不能真正理解：为什么我的钩子被称为无限次，为什么它返回未定义

提前感谢您的回答

App.js

import React, {useState, useEffect} from 'react';
import {useFilter} from "./useFilter";
import './App.css';

function App() {


  const [weather, setWeather] = useState([]);
  const [query, setQuery] = useState("");
  const [searchValue, setSearchValue] = useState("");
  const [filteredArray, setArray] = useFilter([]);

  useEffect(() => {
    if(query !== ""){
      fetchCall();
    }
  },[query]);
  
  const fetchCall = async () =>{
    const request = await fetch(`http://api.openweathermap.org/data/2.5/forecast?q=${query}&appid=${APP_KEY}&units=metric`);
    const response = await request.json();
    setArray(response.list);
  }

  const search = (e) =>{
    setSearchValue(e.target.value);
  }

  const submitValue = e =>{
    e.preventDefault();
    setQuery(searchValue);
  }

  return (
    <div className="App">
      <form onSubmit={submitValue}>
        <input type="text" placeholder="enter city name" onChange={search}></input>
        <button type="submit">getWeather</button>
      </form>
    </div>
  );
}

export default App;

@编辑 我试着创造一个新的钩子。现在它不会无限次运行，也不会检索任何错误。我目前的问题是，每次我在输入中键入内容时，它都会运行，在第一页加载时会运行两次，而我调用它的唯一位置是：

  const fetchCall = async () =>{
    const request = await fetch(`http://api.openweathermap.org/data/2.5/forecast?q=${query}&appid=${APP_KEY}&units=metric`);
    const response = await request.json();
    setArray(response.list);
  }

这对我来说没有意义，因为例如，请求没有这个钩子触发那么多次。此外，我还在此处将响应传递给此组件：

setArray(response.list);

当我在组件中输入console.log（'response'）时，它检索空数组

setArray(response.list);