I have a useFolder
hook that accepts a fetchFn
as an argument:
page.tsx:
<code>const {
folders,
} = useFolders({
// `fetchFolders` returns `Promise<Folder[]>`
fetchFn: () => fetchFolders({ objectType: 'icons' }),
});
</code>
<code>const {
folders,
} = useFolders({
// `fetchFolders` returns `Promise<Folder[]>`
fetchFn: () => fetchFolders({ objectType: 'icons' }),
});
</code>
const {
folders,
} = useFolders({
// `fetchFolders` returns `Promise<Folder[]>`
fetchFn: () => fetchFolders({ objectType: 'icons' }),
});
useFolders.tsx:
<code>useEffect(() => {
const initializeFolders = async () => {
const localFolders =
typeof window !== 'undefined' ? localStorage.getItem(storageKey) : null;
if (localFolders) {
const parsedFolders = JSON.parse(localFolders);
setFolders(
parsedFolders.length === 0 ? defaultRootFolder : parsedFolders,
);
} else if (fetchFn) {
const apiFolders = await fetchFn();
setFolders(apiFolders.length === 0 ? defaultRootFolder : apiFolders);
} else {
setFolders(defaultRootFolder);
}
setFoldersLoaded(true);
};
initializeFolders();
}, [storageKey, fetchFn]);
</code>
<code>useEffect(() => {
const initializeFolders = async () => {
const localFolders =
typeof window !== 'undefined' ? localStorage.getItem(storageKey) : null;
if (localFolders) {
const parsedFolders = JSON.parse(localFolders);
setFolders(
parsedFolders.length === 0 ? defaultRootFolder : parsedFolders,
);
} else if (fetchFn) {
const apiFolders = await fetchFn();
setFolders(apiFolders.length === 0 ? defaultRootFolder : apiFolders);
} else {
setFolders(defaultRootFolder);
}
setFoldersLoaded(true);
};
initializeFolders();
}, [storageKey, fetchFn]);
</code>
useEffect(() => {
const initializeFolders = async () => {
const localFolders =
typeof window !== 'undefined' ? localStorage.getItem(storageKey) : null;
if (localFolders) {
const parsedFolders = JSON.parse(localFolders);
setFolders(
parsedFolders.length === 0 ? defaultRootFolder : parsedFolders,
);
} else if (fetchFn) {
const apiFolders = await fetchFn();
setFolders(apiFolders.length === 0 ? defaultRootFolder : apiFolders);
} else {
setFolders(defaultRootFolder);
}
setFoldersLoaded(true);
};
initializeFolders();
}, [storageKey, fetchFn]);
It’s producing this error in the useEffect()
above:
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.
This is the whole hook.
How to fix this?