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.
const OwnerPage = () => {
const onOpen = useAgencyModal((state) => state.onOpen);
const isOpen = useAgencyModal((state) => state.isOpen);
const params = useParams();
const [owner, setOwner] = useState<User | null>(null);
const [agency, setAgency] = useState<any>([]);
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch(`/api/owner/${params.ownerId}`, {
method: "GET",
});
const data = await response.json();
setAgency(data.agency);
setOwner(data.owner);
console.log("agency: " + data.agency);
console.log("owner: " + data.owner);
} catch (error) {
console.error("Error occurred while fetching data:", error);
}
};
fetchData();
}, [params.ownerId]);
const memoizedData = useMemo(() => {
return { agency, owner };
}, [agency, owner]);
useEffect(() => {
if (memoizedData.agency !== null) {
if (!isOpen) {
onOpen();
}
} else {
redirect(`/dashboard/owner/${params.ownerId}/dashboard`);
}
}, [memoizedData.agency, isOpen, onOpen, params.ownerId]);
return null;
};