본문 바로가기

Grew from/Trouble Shooting

React custom hook "Should have a queue. This is likely a bug in React" error message.

리액트로 커스텀훅 만들다가 직면한 에러.

최적화 신경쓰다가 한쪽에는 useCallback을 감싸주고 한쪽에는 처리를 안해서 경우에 따라서 다르게 함수 캐싱된것과 안된것이 반환되므로 발생한 에러였다.

물론 아래코드는 onChageText 함수 자체가 if문 안에 있을 필요가 없으므로 useCallback으로 감싼 함수 하나만 있으면 됬다.

// onChangeText가 value에 따라 다르게 반환되므로 에러임
if (value < 0) {
    alert('0보다 작은 값은 입력할 수 없습니다.');
    onChangeText = val => {
        setValue(0);
    };
} else {
    onChangeText = useCallback(val => {
        setValue(val);
    });
}

// 아래와 같이 useCallback으로 감싼 onChangeText 하나만 생성
onChangeText = useCallback(val => {
    setValue(val);
});
if (value < 0) {
    alert('0보다 작은 값은 입력할 수 없습니다.');
    setValue(0);
} 

나랑 경우는 다르지만 힌트를 얻었던 사이트

github.com/facebook/react/issues/14979