useEffect exhaustive-deps-warning

React Hook useEffect has a missing dependency: 'xxx'. Either include it or remove the dependency array. (react-hooks/exhaustive-deps)

해결방법

1. 사용하고 있는 state를 useEffect deps 배열 위치에 추가해준다.

2. setState 함수 인자로 함수형 업데이트를 사용한다.

 

* useEffect 내부에 함수를 사용하는 경우 해결방법

- 함수와 함수가 사용하는 state 값을 useEffect deps 배열 위치에 추가해준다.

- useCallback을 사용하여 함수를 랩핑 정의한다. (리랜더링될 때마다 함수를 생성하게 되어 새 참조값을 받아 함수를 재실행하게 된다.)

 

 

 

참고: exhaustive-deps-warning

https://kyounghwan01.github.io/blog/React/exhaustive-deps-warning/#_1-useeffect%E1%84%82%E1%85%A2-state%E1%84%85%E1%85%B3%E1%86%AF-%E1%84%82%E1%85%A5%E1%87%82%E1%84%8B%E1%85%A5%E1%84%8C%E1%85%AE%E1%86%B7