When attempting to use my useRedirect custom hook in MainLayout.js, a fast re-renders occurs and gives me these error.

Attempt:

I believe this may be because of object and function references in memory are changing on every re-render. I tried using useMemo and useCallback, but they do not work (or maybe I made something wrong). I will not provide the attempt code so that it will not flood the question.

Code:

// MainLayout.js

const convoPartner = JSON.parse(localStorage.getItem("convoPartner"))

useRedirect(`/c/${convoPartner._id}`, () => !!convoPartner )



// useRedirect.js

export const useRedirect = (path, validator) => {
    const navigate = useNavigate()

    useEffect(() => {
        if (validator()) {
            navigate(path)
        }
    }, [path, validator, navigate])
}