Title: How to correctly call useFetch custom hook
Tags: javascript;reactjs
Question: I'm working on a react project where I have created an API and that I want to use for my react project, I'm dealing with react hooks and not able to call API correctly. I have tried couple of things, but I keep getting one or other kind of error.
Latest method I have tried is giving me this error
Line 8:20:  React Hook &quot;useFetch&quot; is called in function &quot;filterList&quot; which is neither a React function component or a custom React Hook function
Code for filterList.js look like this
/* to filter the products based on the categories */
import useFetch from './apiService'
export default function filterList(arr, method, courses) {
const URL = "http://localhost:8000/api/getCourses";
const result = useFetch(URL, {});
courses = result;
console.log(courses, 'Inside filterList')
if(method == null) return courses;
else {
return courses.filter(course =&gt; {
const categoryArray = course.category.split(" ");
if(arr.length &gt; 0) {
if(categoryArray.some(r =&gt; arr.indexOf(r) &gt;= 0)) {
return course;
}
}
else {
return courses;
}
return courses;
})
and code for apiService.js where I have created useFetch function look like this
import { useEffect, useState } from 'react';
// to fetch the data from api
const useFetch = (url, defaultData) =&gt; {
const [data, updateData] = useState(defaultData);
useEffect(() =&gt; {
async function fetchData() {
const response = await fetch(url);
const json = await response.json();
updateData(json);
}
fetchData();
}, [url]);
return data;
export default useFetch;
Please let me know what is the thing that I'm doing wrong and what should be correct method to do this.
Comment: As it is said you can only call hooks inside components and other hooks. So, you need to rename `filterList` to be `useFilterList`. And make sure that `useFilterList` is also only used in hooks or components.

Comment: It should not. Give it a try. Hooks are defined by having `use*` prefix.

Comment: Yes, it is wrong. `() => {..}` is yet another function that neither component nor a hook.

Comment: @YuryTarabanko -  In this case I'm using `filterList` in App.js which is again defined as function `const App = () => { ... }` so if I change this to `useFilterList` it will throw me same error, right? In this case how to make this working?

Comment: I did and it's throwing me same error. I'm using this in `useEffect(() => {
setCourses(useFilterList([], null));}` in App.js. Anything that I'm doing wrong here?

Comment: So what should I do in this case. I'm kind of lost. I want to use this in `const App = () => { ... }`

Comment: Also I'm referring to [this](https://codesandbox.io/s/react-hooks-demo-u7xd9?file=/src/index.js) example if it helps. Even after implementing same way I'm getting above error.

Comment: Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/225327/discussion-between-marwari-and-yury-tarabanko).



{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 0, 'CommentCount': 8, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2020:00:11/30/20', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><reactjs>', 'Title': 'How to correctly call useFetch custom hook', 'ViewCount': 372, 'id': 65073464, 'user_AboutMe': '', 'user_AccountId': 7977925.0, 'user_DisplayName': 'marwari', 'user_Reputation': 171.0, 'user_Views': 47.0, 'user_id': 8008998.0}}