[React] Warning: unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering. (React Video Problems)

  리액트 코드에서 컴포넌트가 mount되기도 전에 컴포넌트 갱신을 시도할 때 발생하는 에러 메시지이다. 그런데 아무리 찾아봐도 내 코드에서는 그런 실수를 한 적이 없다.

  답은 정말 의외의 곳에서 나온다. 리액트는 video element의 muted 속성을 제대로 처리하지 못 한다. (웹 프로젝트 주제로 많이 추천되는 유튜브 클론 프로젝트를 해본 사람이라면 이미 크롬 정책으로 인해 video element의 자동 재생을 위해서는 muted 속성을 통해서 동영상을 무음 처리해야 한다는 사실을 알고 있을 것이다. 그런데 muted 속성을 넣어주는 순간 리액트는 위와 같은 이슈를 일으킨다.

  간단하게 정리하면 이유는 이렇게 추측된다. 기본적으로 JSX element에서 우리가 value와 같은 attribute를 지정할 때에는 그것이 초기값에서 그치는 것이 아니라 지속적으로 적용되는 값이다. 예를 들어서 우리가 input element의 value를 "123"으로 지정하면 해당 input의 value는 항상 "123"일 것이다. 그러나 우리가 video element에 원하는 것은 이게 아니다. 우리는 초기 설정이 muted가 되기를 원하는 것이지 동영상이 쭉 무음처리되는 것을 원하는 것이 아니다. 바로 이 부분에서 다른 JSX 속성과 video muted 속성 사이의 차이를 일으킨다. (자세한 내용은 관련 이슈 링크 확인)

  다행히도 테스트 코드에서 위와 같은 warning이 발생한다면 다음과 같은 코드로 간단하게 해결할 수 있다.