[hook] useEffect

 

useEffect의 비교방식

Object.is(prevDep, nextDep)

 

 

잘못된 패턴

1. 매번 {value} obj가 생성되는 경우 

컴포넌트 함수 안에서 선언된 배열·객체·함수는 리렌더링마다 다시 생성된다

function Component({ value }: { value: number }) {
  useEffect(() => {
    console.log("effect");
  }, [{ value }]); // ❌ 매 렌더마다 새 객체
}

 

useEffect(() => {
  ...
}, [[1, 2, 3]]); // ❌ 매 렌더마다 새 배열

 

2.  props 객체를 그대로 의존성에 넣기

useEffect(() => { ... }, [props]); // 부모 리렌더 → 매번 실행 가능

 

 

3. 함수도 동일한 문제

useEffect(() => { ... }, [() => doSomething()]);

 

 

옳바른 패턴

 

1. 필요한 필드만 분해

useEffect(() => {
  ...
}, [prop.value, prop.type]);

2. useMemo로 고정

const options = useMemo(() => ({ a, b }), [a, b]);

useEffect(() => {
  ...
}, [options]);