React에서 useEffect() 내부에 함수를 생성하는 것과 다른 파일에서 가져오는 것의 차이점은 무엇입니까?

Question

직장에서 이런 코드를 우연히 발견했습니다

으아아아

여기서 useEffect()에 updateValues()라는 함수가 있다는 것을 알 수 있는데, 이 함수는 여러 상태 업데이트를 수행할 수 있습니다. 성능 문제를 해결하려면 이 기능을 다른 파일로 내보내라는 지시를 받았습니다.

으아아아

이런 것이 실제로 React에서 문제가 되는 것인지 궁금합니다. 공식 React 문서는 useEffect()의 여러 함수 예제를 제공하지만 가비지 수집에 대해서는 거의 언급하지 않습니다. 가비지 수집이 적절한 시점에 가져온 함수를 제대로 파괴할지 ​​궁금합니다.

내 가정은 함수나 다른 것을 가져오면 필요하지 않더라도 메모리에 남아 있는 무언가를 생성한다는 것입니다.

useEffect() 내에서 메모리와 가비지 수집이 어떻게 작동하는지에 대한 설명을 찾고 있기 때문에 이 질문이 "의견 기반" 질문인지 확실하지 않습니다.

Answer 1

이 작업을 권장하는 이유는 구성 요소 코드가 실행될 때마다 useEffect가 생성 하기 때문입니다. 이는 렌더링되는 것보다 더 자주 발생할 수 있습니다. 이 모든 것들은 만들어지는 시간의 90%가 사용되지 않으므로 생성 및 가비지 수집이 쓸모가 없습니다. 따라서 구성 요소 외부로 이동할 수 있는 항목이 많을수록 좋습니다. 가져온 함수(또는 함수형 구성 요소 외부에서 생성한 함수)가 가비지 수집되는 경우에는 한 번만 생성되는 반면 구성 요소에서 정의한 모든 항목은 수백 또는 수천 번 생성되므로 그다지 중요하지 않습니다.

솔직히 당신의 기능과 사용법이 좀 이상해요. 나는 그것이 단지 의사 코드라고 가정하고 있습니다. 그렇지 않다면 useEffect 함수 본문이 다음과 같이 더 좋을 것이기 때문입니다

으아악

또한 개발자가 더 잘 이해할 수 있는 방식으로 구성 요소 외부의 기능을 정의하는 데 도움이 되는 useReducer 사용을 고려해 보세요.