Level 80
@ignaciodev I’m going to take a stab it’s your useEffect callback that has a call to router.reload inside of it…
Aug 8, 2024
5
Level 2
Why does my Inertia page reload infinitely?
import StorefrontLayout from '@/Layouts/Storefront/StorefrontLayout'
import { useEffect, useState } from 'react'
import { router } from '@inertiajs/react'
function Index({ carts, user }) {
useEffect(() => {
console.log('Component mounted')
router.reload({
only: ['user'],
preserveState: true,
preserveScroll: true,
replace: true,
onSuccess: page => { console.log('SUCCESS', page) }
})
}, [])
return <></>
}
Index.layout = page => <StorefrontLayout children={page} />
export default Index
Level 2
@martinbean but it should only be called on first render, since I'm passing an empty array to the useEffect and setting preserveState to true? Or am I wrong to think that?
Level 80
but it should only be called on first render,
@ignaciodev Then put it in an onMounted callback instead:
import { onMounted } from 'vue';
onMounted(() => {
// Do whatever you need to do when the component is mounted...
});
But I don’t really understand what it is you’re actually trying to do. Why are you manually reloading the page in the first place?
Level 2
@martinbean I'm on React, not vue. I am displaying a skeleton first, then loading the data. Wrapping the reload in a setTimeout as a workaround has fixed the issue.
Level 2
I fixed it by wrapping the router.reload inside a setTimeout
1 like
Please or to participate in this conversation.