useEffect 내부에서 setState를 사용하려면 어떻게 처리해야 할까요...??

[aahreum]

관련 PR

• [✨ Feature/48] 이미지 폼 컴포넌트 구현 Taskify-Frontend#61

관련 내용 논의 디스코드

https://discord.com/channels/1386597391473446923/1428598746719064115/1441347779875049605

문제 상황

• 이미지 업로드 폼을 구현하던 중 한 가지 문제를 발견했습니다.

useEffect(() => {
  if (!file) {
   setPreview(null) // Error!
   return;  
 }
}, []);

[{
	"resource": "...",
	"owner": "eslint11",
	"code": "react-hooks/set-state-in-effect",
	"severity": 8,
	"message": "Error: Calling setState synchronously within an effect can trigger cascading renders\n\nEffects are intended to synchronize state between React and external systems such as manually updating the DOM, state management libraries, or other platform APIs. In general, the body of an effect should do one or both of the following:\n* Update external systems with the latest state from React.\n* Subscribe for updates from some external system, calling setState in a callback function when external state changes.\n\nCalling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended. (https://react.dev/learn/you-might-not-need-an-effect).\n\n/Users/ahreum/Documents/myfolder/coding/lecture/codeit_sprint/taskify-frontend/src/components/common/ImageUploader.tsx:49:5\n  47 |\n  48 |     const url = URL.createObjectURL(value);\n> 49 |     setPreview(url);\n     |     ^^^^^^^^^^ Avoid calling setState() directly within an effect\n  50 |\n  51 |     return () => {\n  52 |       URL.revokeObjectURL(url);",
	"source": "eslint",
	"startLineNumber": 49,
	"startColumn": 5,
	"endLineNumber": 49,
	"endColumn": 15,
	"origin": "extHost1"
}]

린트 설정 중 react-hooks/set-state-in-effect가 활성화 되어있어서
useEffect 내부에서 setState를 사용할 수 없다고 에러가 발생하고 있습니다...

이 부분을 해결하려고 찾아보니 비동기적으로 setState를 실행할 수 있게 하면 된다고 해서
이렇게 타임아웃으로 감싸는 방식으로 구현하려고 하는데 괜찮은 방식일지 궁금합니다!

useEffect(() => {
  const timeout = setTimeout(() => {
    if (!file) {
      setPreview(null);
      return;
    }

    const url = URL.createObjectURL(file);
    setPreview(url);
  }, 0);

  return () => clearTimeout(timeout);
}, [file]);

[aahreum]

추가적으로 관련 내용을 찾아보면서 동기적 setState, cascading render라는 개념을 알게되었는데..
이 부분도 잘 이해가 되지 않습니다...

[aahreum]

지금 발생하는 에러가 실행에러가 아니라 린트 에러여서
'react-hooks/set-state-in-effect': 'off'로 린트 설정을 제외시켜서 간단하게 해결할까라는 생각도 들었는데...
너무 회피하는 해결법일까요..?

[tkp12345]

라이브코딩떄도 함께 이야기 했지만 useState를 사용하실떄는 항상 렌더링 이 필요한 ,
렌더링을 일으켜야할 상태가 필요할떄 사용하셔야 합니다

지금 같은경우는 파일을 업로드하면 렌더링을 해줘야 변경된 파일이 적용되 보일텐데요
그래서 const [file, setFile] = useState<File | null>(null); 인경우는 분명히 렌더할 필요가 있어보입니다
setFile 을 쓰는시점을 파일을 변경할태이고 그에따라 file 값을 변경시켜 컴포넌트가 변경된 file 적용되도록 렌더링 시켜야겠죵

다만

const [preview, setPreview] = useState<string | null>(null); 같은 경우에는 useState 로 선언할 이유가 보이지않습니다
preview 값에 따라 렌더가 로직상 필요해보이지않습니다

preview 값은 file 값에 따라 변하는 의존값이기에
const preview = file ? URL.createObjectURL(file) : null; 선언 해주면 될것같습니다 file 변할때마다 변경되야 하는값이니까요

아마 린트에서 에러를 띄워준것도 useEffect 내부에서 setState 를 사용하지 마라가 아니라
"너 굳이 왜 deps 에있는 file 에따라 변하는 변수 (preview) 를 useState 로 선언해서 effect 내부에서 호출해 그럼 무한루프 돌수도있을껄 ?" 이라고 에러를 보내준다고 보면 좋을것같습니다

[tkp12345]

정리하면 useEffect 내부에서 setState 를 처리해도 됩니당 :)

다만 useEffect 의 deps 에있는 의존성 변수와
useEffect 내부에쓰인 setState 의 state 가 연관성이 있다면

다시한번더 해당 state 가 setState 쓰여도 되는지 의심해 봐야합니다

이해가 안되시거나 잘못 말씀드린것이라면 말씀해주세요~

[tkp12345]

맞죠 좋습니다 저런 js 객체가아닌 URL.createObjectURL 은 사용이 끝나고 컴포넌트가 언마운트시에 URL.revokeObjectURL 없애줘야합니다

다만 코드상에서 deps 에 preview 가 있는데 setPreview 를 effect 내부에서 실행하는것은 조금 위험해 보입니다

아래처럼 이펙트 내부에서 클린업만 해줘도 좋지않을까용 ? 🤡

  const [file, setFile] = useState<File | null>(null);

  
  useEffect(() => {
    if (!preview) return;

    return () => {
      URL.revokeObjectURL(preview);
    };
  }, [preview]);

[tkp12345]

useEffect(() => {
    마운트 or deps 변경 시 실행

  return () => {
      언마운트 시점 + deps 변경되기 직전에 실행
  };
}, []);

[aahreum]

와😲 감사합니다!!!!!! 🙇‍♀️🙇‍♀️🙇‍♀️🙇‍♀️

[aahreum]

@jung518 우연님! 이 부분 참고하셔서 PR 수정해주시면 좋을 것 같아요!!!!!!!!!!

[tkp12345]

[tkp12345]

아래내용을 읽어보시면 조금 도움이 되실것같습니다
참고로 공식문서의 내용을 볼떄는 두번은 씹어먹어야 맛이나옵니다 ㅇㅇ

공식문서 Effect가 필요하지 않은 경우
https://ko.react.dev/learn/you-might-not-need-an-effect

[aahreum]

해결 방안

• useState로 정말!!! 관리되어야 하는 값인지 다시 한번 생각해보기
• preview는 UI에 필요한 값이지만 state로 관리될 필요 없음
• preview는 file의 의존값(파생값) -> file이 바뀔때마다 새로 계산되는 값
  • file이 있으면 null 없으면 URL.createObjectURL(file) -> state로 관리하게 되면 불필요한 렌더링만 생기게 됨

useEffect(() => {
  if (!preview) return;

  return () => {
    URL.revokeObjectURL(preview);
  };
}, [preview]);

file이 바뀌면 preview도 새 문자열이 되고 이전 preview는 cleanup에 의해 revoke

[aahreum]

useEffect

• useEffect도 정말 필요한지 생각해보자 (key 사용하기)
  https://ko.react.dev/learn/you-might-not-need-an-effect#resetting-all-state-when-a-prop-changes