Occasionally (not always), I would get this error when reloading the page:
useDir.ts:47 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
I have no idea which is the dependency inside useEffect
that’s changing on every render:
useDir.ts:
import { useEffect, useState } from 'react';
import { Folder } from '@repo/ui/types';
import { getAllFileIds } from '@repo/ui/helpers';
import { v4 as uuidv4 } from 'uuid';
type FilterFunction<T> = (file: T) => boolean;
export function useDir<T extends { id: string }>(
files: T[],
filterFunction: FilterFunction<T> = () => true,
) {
const [filteredFiles, setFilteredFiles] = useState<T[]>([]);
const [folders, setFolders] = useState<Folder[]>([
{
id: uuidv4(),
name: 'Root',
folders: [],
fileIds: [],
},
]);
function handleClickFolder(folder: Folder) {
const allFileIds = getAllFileIds(folder);
const filteredByFolder =
files?.filter((file: T) => allFileIds.includes(file.id)) || [];
setFilteredFiles(filteredByFolder);
}
function initRootFolder(currentUserFiles: T[]) {
setFolders((prevFolders: Folder[]) => {
const updatedFolders = [...prevFolders];
const rootFolder = updatedFolders.find(
(updatedFolder) => updatedFolder.id === folders[0]?.id,
);
if (rootFolder) {
rootFolder.fileIds = currentUserFiles.map((file) => file.id);
}
return updatedFolders;
});
}
useEffect(() => {
if (files) {
const currentUserFiles = files.filter((file: T) => filterFunction(file));
setFilteredFiles(currentUserFiles);
initRootFolder(currentUserFiles);
}
}, [files]);
return {
folders,
setFolders,
handleClickFolder,
filteredFiles,
};
}
Maybe this is the offending line?
setFilteredFiles(currentUserFiles);
If so, how to solve this issue?