[recoil] Error: Invalid hook call

문제: useResetRecoilState 를 함수 내 메서드에서 선언했더니, invalid hook call 문제 발생

 

원인: hooks 는 function component 내부에서만 선언 가능하다. 이번 경우엔, component 영역이 아닌, onInput 이라는 함수 영역 내에서 선언했기 때문에 hooks의 규칙을 위반한다.

 

해결: component 내부에 useResetRecoilState();를 다른 변수에 할당하여, onInput() 함수 내부에서 사용한다.

 

 

 

오류 코드

    const onInput = (e: React.ChangeEvent<HTMLInputElement>) => {
        const input = e.target.value.toLowerCase();

        useResetRecoilState(selectedContact); // 해당 라인을 onInput 외부에서 선언해주자.
        setSearchInput(input);
    };

 

 

올바른 코드

    const resetContacts = useResetRecoilState(selectedContact);

    const onInput = (e: React.ChangeEvent<HTMLInputElement>) => {
        const input = e.target.value.toLowerCase();

        resetContacts();
        setSearchInput(input);
    };