ESLint doesn't suggest useEffect necessary subscribers (CRA + TS + ESLint + Prettier)

Viewed 124

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"
  }
0 Answers
Related