20.01.11 TIL - useEffect 주의할 점

useEffect 의 dependency 에 상태값인 객체를 넣어선 안되는 이유

[] dependency에 객체를 잘못 넣으면 무한루프를 돌 수 있다. dependency에 있는 값을 이전값과 현재값에서 바뀌었는지 아닌지 비교할때 다른값들은 그 값 자체를 비교하는데 객체는 주소값을 참조하고 있어서 객체 안에 실제로 담고있는 값들은 같은값이더라도 객체의 주소값을 바뀌는 상황이 있다면 계속 무한루프를 돌수 있다. 예를들어 불변성을 지켜주기위해 객체에 계속 재할당을 하는 객체인 상태라면 재할당 할때마다 주소값이 바뀌어서 무한루프를 돌 수 있다.

useEffect 함수에 async 를 붙여서는 안되는 이유

useEffect 함수에 async를 달아서도 안된다.
async 함수는 자체적으로 프로미스 객체를 반환한다.
하지만 useEffect 의 return 문에는 언마운트 시에 실행되는 함수가 와야해서 async를 쓰면 안된다.
async를 쓰려면 useEffect 안의 다른 함수에 사용해야 한다.