React Hook React.useEffect has a missing dependency: ‘convertToTreeDataNode’. Either include it or remove the dependency array

  Kiến thức lập trình

I am invoke a function in useEffect like this:

React.useEffect(() => {
        if (folderTree && folderTree.length > 0) {
            const treeData: TreeDataNode[] = convertToTreeDataNode(folderTree);
            setTexFileModel(treeData);
        }
    }, [folderTree]);

the folderTree is come from redux dispath listener:

const { folderTree } = useSelector((state: AppState) => state.file);

After I added the eslint, shows error:

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

I have read the How to fix missing dependency warning when using useEffect React Hook and tried the suggestion, use callback and move the function to the useEffect, still did not fixed this issue. What is the best way to fix the eslint warning? I have tried like this:

React.useEffect(() => {
        function innerInvoke(){
            if (folderTree && folderTree.length > 0) {
                const treeData: TreeDataNode[] = convertToTreeDataNode(folderTree);
                setTexFileModel(treeData);
            }
        }
        innerInvoke();
    }, [folderTree]);

still did not fixed this issue.

LEAVE A COMMENT