I'm trying to populate data from an array through a recursive function, and this function would get called upon each time the data or search value is updated. I understand that to avoid call stack being exceeded a base case should be established, but in my case I thought I had that covered. I have also tried out using an increment counter to reset the call stack when it hits a certain value, but that didn't seem to work.
How can I avoid the maximum call stack issue from occurring? Any help is greatly appreciated, thanks.
const filteredTreeData = useMemo(() => {
function getObjects(array, target) {
return array?.reduce((r, { title, key, children = [] }) => {
if (title.toLowerCase().includes(target.toLowerCase())) {
// Check and loop their children
if (children?.length) {
getObjects(children, target)
} else {
r?.push({ title, key });
}
}
else return;
children = getObjects(children, target);
if (children?.length) {
r?.push({ title, key, children })
}
return r;
}, []);
}
return search.length > 0 ? getObjects(treeData, search) : treeData
}, [treeData, search])