<div id="readability-page-1" class="page"><div>
            <p>[Error] React Hook "useState" is called conditionally.</p>
          </div></div>

zineeworld

Error
React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?
useState 는 무조건 최상단에 선언해야 한다.
✅ function component 본문의 최상위 수준에서 호출하세요 .
✅ custom Hook 본문의 최상위 수준에서 호출하세요 .
  조건이나 루프 내에서 Hook을 호출하지 마세요.
  조건문 다음에 Hooks를 호출하지 마세요 return.
  이벤트 핸들러에서 Hooks를 호출하지 마세요.
  클래스 구성 요소에서 Hooks를 호출하지 마세요.
  ` useMemo`, `useReducer`또는 ` useEffect`에 전달된 함수 내에서 Hook을 호출하지 마세요.
 
Problem
export const useThrottleFn = <Args>(
	fn: Function,
    throttle: number,
) => {
        if (throttle === 0) return (args: Args) => fn(args)
        const [lastThrottle, setLastThrottle] = useState<number>(0) // useState가 여기에 있음
        
        return (args: Args): void => {
        	const now = new Date().valueOf()
            if (now - lastThrottle >= throttle) {
            	fn(args)
                setLastThrottle(now)
            }
        }
    }
}
Solution
export const useThrottleFn = <Args>(
	fn: Function,
    throttle: number,
) => {
        const [lastThrottle, setLastThrottle] = useState<number>(0) // useState를 제일 먼저 선언
        if (throttle === 0) return (args: Args) => fn(args)
        
        return (args: Args): void => {
        	const now = new Date().valueOf()
            if (now - lastThrottle >= throttle) {
            	fn(args)
                setLastThrottle(now)
            }
        }
    }
}
 
참고
https://velog.io/@gyomni/React-Hook-useEffect-is-called-conditionally
https://react.dev/warnings/invalid-hook-call-warning

[Error] React Hook "useState" is called conditionally.

댓글