"React Hook useEffect has a missing dependency", but including it or removing the dependency array both make for incorrect behavior?

I am working on a React page that has a built in file manager. I have a DocumentTable.js component, which is responsible for displaying the current list of files available, and it has (among others) the following three functions that call each other:

const getParamPath = useCallback((path, operation, currentFolderPath, fileName) => {

    const paramPath = (

        path +
        "/?operation=" + operation +
        ((fileName === undefined) ? "" : ("&fileName=" + currentFolderPath + fileName))
    )

    return paramPath
},
    []
)

const getAllFiles = useCallback((path, currentFolderPath, fileName) => {

    const setData = (fileData) => {

        const newFolderPath = fileName === undefined ? currentFolderPath : (currentFolderPath + fileName + "/")

        fileDataSetter(fileData)
        folderPathSetter(newFolderPath)
    }

    dataGetter(getParamPath(path, "0", currentFolderPath, fileName), setData)
},
    [dataGetter, getParamPath, fileDataSetter, folderPathSetter]
)

useEffect(() => {

    getAllFiles(path, currentFolderPath)
},
    [getAllFiles, path]
)

It starts with useEffect() loading in with the path and the currentFolderPath variables inherited from the parent component. It's one of the functions that call getAllFiles(), which sends a request to the backend API for the list of documents available in the starting folder. It uses various functions also inherited from the parent components (dataGetter, fileDataSetter, folderPathSetter) to accomplish this, and also calls the last of the three, getParamPath(), which is the one building the pathstring with the query parameters for the backend API. It has the fileName when needed, but also an operation variable that will tell the backend what it needs to do (0 - display everything, 1 - download file, 2 - rename file, 3 - delete file, etc.).

If the user clicks on a file, it gets downloaded to their computer. If they click on a folder however, the currentFolderPath variable, which starts out as an empty string, gets updated to include the fileName and a / smybol, then the page rerenders with the list of files in that folder, thanks to the useEffect.

All of this is not terribly important for my problem though, which is as simple, as the compiler constantly throwing warnings because of the useEffect dependencies, namely:

React Hook useEffect has a missing dependency: 'currentFolderPath'. Either include it or remove the dependency array react-hooks/exhaustive-deps

However the catch is that right now the program is working perfectly as intended if not for this one warning, whereas if I remove the dependency array, obviously useEffect will be called infinitely as soon as I open the page, while on the other hand if I include currentFolderPath in the array, the useEffect will constantly rerender at the starting folder, eventually resulting in more and more backend errors.

My question would be, how could I clean up this warning without breaking functionality? This is the first warning I got where it seems like it's supposed to just stay ignored forever if I want a working program. Am I doing something incorrectly?

Every warning is configured from your lint checks. You just have to find the lint rule that causes this and disable it. Disabling can also be done based on scope: for whole project, for whole file, or for next line.

In your case add:

// eslint-disable-next-line react-hooks/exhaustive-deps

like:

useEffect(() => {
getAllFiles(path, currentFolderPath)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [getAllFiles, path]);