Double Rendering of React
React StrictMode에서 컴포넌트가 두 번 렌더링되는 현상과 개발 모드의 동작을 확인한 기록.
npx create-react-app을 이용해 CRA 패키지를 설치해서 console.log를 이용해 컴포넌트를 렌더링하던 중 이상한 부분을 감지했다.
같은 렌더링이 두 번 발생했다. yarn이 아닌 npx를 사용한 것이 문제인지, useState를 사용한 것이 문제인지 알 수 없었지만, 역시나 이번에도 공식 문서와 구글에서 해답을 찾을 수 있었다.
StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구입니다. Fragment와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화합니다. StrictMode는 개발 모드에서만 활성화되기 때문에, 프로덕션 빌드에는 영향을 끼치지 않습니다.
또한 StrictMode는 아래와 같은 부분에서 도움이 된다고 한다.
- 안전하지 않은 생명주기를 사용하는 컴포넌트 발견
- 레거시 문자열 ref 사용에 대한 경고
- 권장되지 않는 findDOMNode 사용에 대한 경고
- 예상치 못한 부작용 검사
- 레거시 context API 검사
여기서 React.StrictMode를 날려주자 마자, 두 번이나 렌더링하던 것이 사라졌다. 추가로, npx로 CRA 패키지를 설치하면 자동으로 StrictMode가 설정된다고 한다.
또한 구글에서 리액트 개발팀인 Dan Abramov가 Github issue에 남긴 텍스트를 찾을 수 있었다.
It is expected that setState updaters will run twice in strict mode in development. This helps ensure the code doesn’t rely on them running a single time (which wouldn’t be the case if an async render was aborted and alter restarted). If your setState updaters are pure functions (as they should be) then this shouldn’t affect the logic of your application. setState 업데이트는 개발 모드의 StrictMode에서는 두 번 실행될 것입니다. 이것은 코드가 단일 실행에 의존하지 않도록 해줍니다 — 비동기 렌더링이 중단되거나 재시작된 경우에는 해당되지 않습니다. 만약 당신의 setState가 깨끗한 함수라면, 이는 당신의 애플리케이션의 논리에 영향을 미치지 않을 것입니다.
React.StrictMode causes setState to fire twice · Issue #12856 · facebook/react
원문: Medium