한 컴포넌트에 여러개의 useEffect를 써도 될까?

회사에서 새로운 feature를 개발하는 과정에서 한 컴포넌트에서 두개의 useEffect를 사용할 일이 생겼다 근데 문득 의문이 들기 시작했다 이렇게 코드를 써도 될까? 퍼포먼스나 best practice에 어긋나는건 아닌가?

열심히 구글링 함

결과

각 use case의 따라 여러개를 써는 것 혹은 하나만 쓰는것을 추천하는것으로보인다.

예를 들어 내가 두개의 useEffect가 필요했던 이유는
1. 해당 컴포넌트가 랜더 됬을시 한 A라는 state값을 리셋을 시켜줘야하는 기능이 필요
2. B라는 state값을 감지하면서 내가 원하는 컨디션으로 변경이 되었을때 한 api를 자동으로 호출해야하는 기능이 필요

각각 서로 다른 값을 바라보고 다른 로직을 실행하는 경우에는 useEffect를 분리해서 관리를 해주어도 무방하다.

예시 code

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

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

하지만 하나의 state나 props를 바라보면서 그 값의 변화의 따라 어떠한 로직을 실행해야한다면 하나의 useEffect로 관리해서 그 내부에서 분기처리를 하는게 추천되는것같다.

예시코드

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

참고링크

https://stackoverflow.com/questions/54002792/in-general-is-it-better-to-use-one-or-many-useeffect-hooks-in-a-single-component