When I tried to create custom hook I have faced some issue. ESLint hasn't suggest me subscribers for useEffect. (fetch hadn't been suggested and i filled it manually) I also tried eslint-plugin-react-hooks, it doesn't work too.
useEffect(() => {
fetch();
}, [fetch]);
Same issue for useCallback
full code of custom hook
import { useState, useEffect, useCallback } from "react";
import { server } from "./server";
interface State<TData> {
data: TData | null;
}
export const useQuery = <TData = any>(query: string) => {
const [state, setState] = useState<State<TData>>({
data: null,
});
const fetch = useCallback(() => {
const fetchApi = async () => {
const { data } = await server.fetch<TData>({ query });
setState({ data });
console.log(`${data} loaded (useQuery hook)`);
};
fetchApi();
}, [query]); // HERE
useEffect(() => {
fetch();
}, [fetch]); // AND HERE
return { ...state, refetch: fetch };
};
ESLint config
{
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended",
"prettier/@typescript-eslint",
"plugin:prettier/recommended"
],
"plugins": ["react", "@typescript-eslint", "prettier"],
"env": {
"browser": true,
"jasmine": true,
"jest": true
},
"rules": {
"prettier/prettier": [
"error",
{
"endOfLine": "auto"
}
]
},
"settings": {
"react": {
"pragma": "React",
"version": "detect"
}
},
"parser": "@typescript-eslint/parser"
}
devDependencies
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^3.0.2",
"@typescript-eslint/parser": "^3.0.2",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-prettier": "^3.1.3",
"prettier": "^2.0.5"
}