React Hook useEffect 缺少依赖项：“hideLoader”和“showLoader”。 包括它们或删除依赖数组

Question

how can i solve this error => React Hook useEffect has missing dependencies: 'hideLoader' and 'showLoader'. Either include them or remove the dependency array react-hooks/exhaustive-deps

if i'm using [showLoader, hideLoader] as dependencies then hideLoader is not working? how can i fix this... showLoader is always showing spinner even axios fetch data!

FullPageLoader.js

import React from "react";
import Spinner from './loader/spinner.gif

const FullPageLoader = () => {
    return (
        <div className="text-center">
            <img src={Spinner} className="fp-loader" alt="loading" style={{ marginTop: '8%' }} />
        </div>
    );
};

export default FullPageLoader;

useFullPageLoader.js

import React, { useState } from "react";
import FullPageLoader from "../FullPageLoader";

const useFullPageLoader = () => {
    const [loading, setLoading] = useState(false);

    return [
        loading ? <FullPageLoader /> : null,
        () => setLoading(true), //Show loader
        () => setLoading(false) //Hide Loader
    ];
};

export default useFullPageLoader;

App.js

import useFullPageLoader from "../components/hook/useFullPageLoader";

const [loader, showLoader, hideLoader] = useFullPageLoader();

useEffect(() => {
    const fetchItems = async () => {
        try {
            showLoader();
            const res = await axios.get(`${process.env.REACT_APP_API_URL}/api/approved/`);
            setItems(res.data)
            hideLoader();
        }
        catch (err) {
            console.log(`😱 Axios request failed: ${err}`);
        }
    }
    fetchItems();
}, [hideLoader, showLoader]);

Answer 1

It's telling you what to do:

const [loader, showLoader, hideLoader] = useFullPageLoader();

useEffect(() => {
    const fetchItems = async () => {
        try {
            showLoader();
            const res = await axios.get(`${process.env.REACT_APP_API_URL}/api/approved/`);
            setItems(res.data)
            hideLoader();
        }
        catch (err) {
            console.log(`😱 Axios request failed: ${err}`);
        }
    }
    fetchItems();
}, [showLoader, hideLoader]); // add dependencies here...