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

Question

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?

Tushar Shahi · Accepted Answer · 2025-04-14 10:41:13Z

0

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]);

answered Apr 14 at 10:41

Tushar Shahi

21.6k2 gold badges25 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user30266210 Apr 14 at 10:59

So React gives warnings even when there is no good reason to, and we just have to disable them? Seems a little excessive, but I guess it makes the warning go away. Thanks.

Tushar Shahi Apr 14 at 11:01

Oh wait, no. The lint rule is correct to give the warning as 90% of the times that is what is needed. But as a developer you know your code better. and sometimes (the rest 10% of the times) this might not be needed. So you can disable it. React just wants you to have the most latest version of the values in useEffect callbacks, but do you need it according to your business logic or not? That is the question

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related