여러 개의 useEffect를 분기해서 설정할 때 문제가 있을까요?

Question

다음과 같이 조건에 따라 다른 useEffect를 실행시키려고 합니다.

const DataForm = (props: {condition, paramA, paramB} )=> {
  if (condition) {
    useEffect(() => {
      // handle param A
    }, [paramA])
  } else {
    useEffect(() => {
      // handle param B
    }, [paramB])
  }
};

이런식으로 작성하는 케이스를 별로 본 적이 없는 것 같은데 혹시 문제가 되거나 고려해야 할 부분이 있을까요?

강병진 · Answer

리액트 훅은 최상위에서만 호출되어야 한다는 규칙이 있습니다

https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level

작성하신 예시처럼 조건문 안에서 effect hook을 실행하면 에러가 발생할거에요. Effect hook 안에 조건을 작성하고 해당 조건을 충족하면 무언가를 실행하는 것이 맞습니다!