컴포넌트에서 하나 이상의 useEffect를 사용해야합니까?


118

적용 할 몇 가지 부작용이 있으며이를 구성하는 방법을 알고 싶습니다.

  • 일회용으로
  • 또는 여러 useEffects

성능과 아키텍처 측면에서 무엇이 더 낫습니까?

답변:


178

따라야하는 패턴은 useCase에 따라 다릅니다.

첫째 , 초기 마운트 중에 이벤트 리스너를 추가하고 마운트 해제시 정리해야하는 상황과 특정 리스너를 정리하고 소품 변경시 다시 추가해야하는 또 다른 경우가있을 수 있습니다. 이 경우 두 가지 다른 useEffect를 사용하면 관련 논리를 함께 유지하고 성능 이점을 얻는 것이 좋습니다.

useEffect(() => {
   // adding event listeners on mount here
   return () => {
       // cleaning up the listeners here
   }
}, []);

useEffect(() => {
   // adding listeners everytime props.x changes
   return () => {
       // removing the listener when props.x changes
   }
}, [props.x])

둘째 : 상태 또는 소품이 세트간에 변경 될 때 API 호출 또는 기타 부작용을 트리거해야하는 경우가있을 수 있습니다. 이 경우 useEffect모니터링 할 관련 값이 있는 싱글을 사용하는 것이 좋습니다.

useEffect(() => {
    // side effect here on change of any of props.x or stateY
}, [props.x, stateY])

셋째 : 다른 값의 변경에 대해 다른 조치를 취해야하는 세 번째 경우입니다. 이 경우 관련 비교를 서로 다른useEffects

useEffect(() => {
   // some side-effect on change of props.x
}, [props.x])

useEffect(() => {
   // another side-effect on change of stateX or stateY 
}, [stateX, stateY])

1
위의 두 번째세 번째 예 사이의 중간 지점은 어떻 습니까? : 상태 / 소품의 하위 집합이 변경 될 때 실행되는 로직이 있지만 각각 실행해야하는 공통 코드 외에 실행해야하는 별도의 로직이 있습니까? [](여전히 변경을 기다리는 상태 / props 의 하위 집합 이기 때문에) 사용하지 않을 것이지만 코드를 재사용하고 싶습니다. 따로 사용 useEffects하고 공유 코드를 각각 개별적으로 호출하는 함수에 넣습니까?
ecoe

3
아래 답변에서 알 수 있듯이 React 팀은 관심사별로 후크를 분리 할 것을 제안하므로 여러 useEffect호출 로 분할 합니다.
hakazvaka

33
나는 당신이 useCase를 어떻게 작성했는지를 좋아합니다.
VerticalGrain

항상 정의 순서대로 트리거됩니까? 즉, effect1은 항상 먼저 호출되고 effect2는?
computrius

1
@computrius ,React will apply every effect used by the component, in the order they were specified.
August Janse 2011 년

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.