[ ERROR ] - next error (Unhandled Runtime Error)

Unhandled Runtime Error
Error: Rendered more hooks than during the previous render.

위와 같은 에러가 나는 이유는 조건에 따라 hook을 요청할 때 발생하는 에러이다. 이를 해결하기 위해서는 hook을 조건 내부가 아닌 최상단위에 작성하여 주면 된다.

예를 들면 아래와 같은 경우 위의 에러가 난다.

import {useEffect, useState} from 'react';

const Home = ({auth}) => {
    if (auth) {
        const [ count, setCount ] = (0);
        
        useEffect(()=>{
        	console.log('welcome to home')
        },[])
    }
    
    return (
        <>
            <div>count : {count}</div>
        </>
    )
}

export default Home

위의 문제를 해결하려면 useState와 useEffect와 같은 hook을 최상단으로 올려주면 된다.

import {useEffect, useState} from 'react';

const Home = ({auth}) => {

    const [ count, setCount ] = (0);

    useEffect(()=>{
        console.log('welcome to home')
    },[])
        
    if (auth) {
    }
    
    return (
        <>
            <div>count : {count}</div>
        </>
    )
}

export default Home

 

 

출처 

https://bobbyhadz.com/blog/react-rendered-more-hooks-than-during-previous-render#:~:text=The%20error%20%22Rendered%20more%20hooks,t%20use%20hooks%20inside%20conditions.