[React][ESLint] useEffect - Race condition (Effect callbacks are synchronous to prevent race conditions. put the async funtion inside:)

이런 ESLint의 경고 메시지를 받았다.

Effect callbacks are synchronous to prevent race conditions. 
put the async funtion inside:

Effect 콜백함수는 race condition을 방지하기 위해 동기적이어야 하기 때문에,
비동기 함수를 콜백함수 내부에 넣는 것을 제안하고 있다.

무슨 의미일까?

Race condition?

다중 프로세스 환경에서 두 개 이상의 프로세스가 동시에 수행 될 때 발생되는 비정상적인 상태
동시에 프로세스가 수행되면 실행 결과의 일관성을 보장하기 어렵다.

동시에 프로세스가 실행된다는 말이 무슨 의미일까?

여러 개의 비동기 함수를 동시에 실행한다는 뜻이다.
이 경우 매 실행마다 어떤 함수의 결과값이 먼저 리턴될지 보장할 수 없다.

경고메시지가 뜬 부분의 코드는 다음과 같다.

useEffect(async () => {

    await fetchTimeDelay(1000);
    await fetchProductsData(page);
  }, [page]);

2개의 비동기 함수가 동시에 실행되기 때문인 것 같다.

useEffect를 aync로 선언하지 않고 내부에 비동기 함수를 선언해 새로 만들어주었다.

  useEffect(() => {
    const loadFirstTime = async () => {
      await fetchTimeDelay(1000);
      await fetchProductsData(page);
    };
    loadFirstTime();
  }, [page]);

경고 메시지가 사라진 것을 보니, 적절하게 처리한 것 같다.

Reference

• https://darrengwon.tistory.com/275