React 19 버전에서 새로운 린트 규칙으로 setState() 호출하기가 신경쓰입니다.

Question

안녕하세요. 요즘 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]);

winterlood · Answer

안녕하세요 codingbear님 이정환입니다. 이 경고는 useEffect 안에서 setState를 직접 호출할 때 나타나는 React의 새로운 lint 경고입니다. 작동은 정상적으로 되지만, 성능 이슈나 무한 렌더링을 유발할 가능성이 있어서 경고를 띄워주는 거죠. 만약 경고 메세지를 제거하고 싶으시다면 eslint.config.js 파일에 다음 rules를 추가하시면 됩니다. "react-hooks/set-state-in-effect": "off", 이 경고는 비교적 최근에 추가된 규칙이라, 강의를 촬영할 당시에는 없었거나 덜 엄격했을 수 있습니다.

communityai8509 · Answer

안녕하세요, 인프런 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가 응답성을 높이고 사용자 경험을 개선하는 데 도움이 될 수 있습니다. 관련 질문에 대한 더 많은 정보는 아래 게시물을 통해 살펴보세요: useEffect 안에서의 setState 사용 React에서의 상태 관리 및 useEffect 활용 방안 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.