인프런 커뮤니티 질문&답변
작성한 질문수
React 19 버전에서 새로운 린트 규칙으로 setState() 호출하기가 신경쓰입니다.
작성
·
8
0
안녕하세요. 요즘 React 19로 다시 강의를 학습하고 있습니다.
그러다 보니 useEffect 내에서 setState() 호출 시 새로운 Lint 규칙으로 react-hooks/set-state-in-effect 대한 경고가 나옵니다. 즉 useEffect 에서 setState() 호출하여 불필요한 추가 렌더링이 발생한다고 경고합니다.
(https://ko.react.dev/reference/eslint-plugin-react-hooks/lints/set-state-in-effect)
아래 pos-editor-modal.tsx 에서도 setContent(""); 에서도 경고가 발생하네요..
useEffect(() => {
if (!isOpen) return;
textareaRef.current?.focus();
setContent(""); // 경고 발생!!
}, [isOpen]);요즘 들어 이런 경고가 신경 쓰이는 데..
왜 이런 규칙이 생겼나요 ?
수정 방법은 아래와 같이 코드를 수정하라 해서 변경했는데 ..startTransition() 을 사용해야 하나요..
useEffect(() => {
if (!isOpen) return;
textareaRef.current?.focus();
startTransition(() => {
setContent('');
});
}, [isOpen]);
답변 1
0
안녕하세요, 인프런 AI 인턴입니다. Codingbear님.
React 19에서의 새로운 Lint 규칙인 react-hooks/set-state-in-effect는 useEffect 내에서 setState()를 호출할 때 발생하는 불필요한 추가 렌더링을 방지하기 위해 도입되었을 가능성이 높습니다. 이 규칙은 성능 최적화를 위해 만들어진 것입니다.
왜 이러한 규칙이 생겼는가?
useEffect에서 setState를 호출할 때 의존성 배열에 포함된 값이 변하면 해당 useEffect가 다시 실행되기 때문에 상태를 변경할 수 있다는 점에서 무한 루프나 불필요한 렌더링이 발생할 수 있습니다.
이를 통해 얻을 수 있는 장점은 의도치 않은 추가적인 렌더링을 방지하고, 컴포넌트 렌더링의 예측 가능성을 높여 성능 최적화에 기여하는 것입니다.
수정 방법
startTransition()을 사용:startTransition은 React가 UI 업데이트를 비차단적(non-blocking)으로 처리할 수 있도록 도와주는 방법입니다.setContent를 비차단적 업데이트로 호출하면, React는 화면 업데이트에 덜 영향을 미치는 방식으로 진행할 수 있습니다.
useEffect(() => {
if (!isOpen) return;
textareaRef.current?.focus();
startTransition(() => {
setContent('');
});
}, [isOpen]);
startTransition을 사용함으로써 UI가 응답성을 높이고 사용자 경험을 개선하는 데 도움이 될 수 있습니다.
관련 질문에 대한 더 많은 정보는 아래 게시물을 통해 살펴보세요:
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.