Invalid hook call

Answered

Pacific sand lance posted this in #help-forum

Pacific sand lanceOP

2023-09-28T07:40:56.000Z

I was trying to call a function for delaying before redirecting to an another page but it returns an error

Invalid hook call. Hooks can only be called inside of the body of a function component

I'm really confused, here's my code

function DelayRedirect() {
    useEffect(() => {
        const delay = 5000
        const timeoutId = setTimeout(() => {
            router.push('/')
        }, delay);
        return clearTimeout(timeoutId)
    }, [])
}

Answered by joulev

async handleSubmit() {
await fetch(â€¦);
await new Promise(resolve => setTimeout(resolve, 5000));
router.push(â€¦)
}

View full answer

31 Replies

@Pacific sand lance I was trying to call a function for delaying before redirecting to an another page but it returns an error Invalid hook call. Hooks can only be called inside of the body of a function component I'm really confused, here's my code javascript function DelayRedirect() { useEffect(() => { const delay = 5000 const timeoutId = setTimeout(() => { router.push('/') }, delay); return clearTimeout(timeoutId) }, []) }

joulev

2023-09-28T07:42:59.000Z

The code is fine, show more code

Clown

2023-09-28T07:42:59.000Z

As it says, you cannot use useEffect inside a function. You have to use it inside a function component

@Clown As it says, you cannot use useEffect inside a function. You have to use it inside a function **component**

Pacific sand lanceOP

2023-09-28T07:43:36.000Z

but i just put it inside of a function

@joulev The code is fine, show more code

Pacific sand lanceOP

2023-09-28T07:43:42.000Z

wait

Clown

2023-09-28T07:43:53.000Z

Yeah but where are calling it

@joulev The code is fine, show more code

Pacific sand lanceOP

2023-09-28T07:46:18.000Z

const router = useRouter()
function DelayRedirect() {
    useEffect(() => {
        const delay = 5000
        const timeoutId = setTimeout(() => {
            router.push('/')
        }, delay);
        return clearTimeout(timeoutId)
    }, [])
}

export default function Pendaftaran() {
...
    const handleSubmit = async (event) => {
        event.preventDefault()
        setSubmitting(true)
        try {
            const userbody = { 
                bunch of data 
            }
                
            await fetch('/api/submitdata', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(userbody)
            })

            setSubmitting(false)

        } catch (error) {
            console.error(error)
            setSubmitfail(true)
            setSubmitted(false)
            }
        setSubmitted(true)
        DelayRedirect()
    }

return (
...
)
}