React18 useEffectEvent

기존 useEffect에서의 외부 함수 호출

외부함수가 일반함수일 때: 의존성 배열에 함수를 포함하지 않으나 외부함수에 사용되는 디펜던시를 포함

function logSearch(results) {
	console.log(`검색어: ${keyword}, 필터: ${filters}, 결과 수: ${results.length}`);
}

useEffect(() => {
    fetchResults(keyword).then(results => {
      logSearch(results);
    });
}, [keyword, filters]);

• filters가 변경될 때마다 effect가 실행되므로 의도되지 않은 API 호출 발생
• filters를 의존성 배열에서 제거하면 문제를 해결할 수 있지만 ESLint 경고 발생하므로 올바른 접근이 아님

외부 함수가 useCallback으로 감싸져 있을 때: 함수를 의존성 배열에 포함 필요

const logSearch = useCallback((results) => {
	console.log(`검색어: ${keyword}, 필터: ${filters}, 결과 수: ${results.length}`);
}, [keyword, filters]);

useEffect(() => {
    fetchResults(keyword).then(results => {
      logSearch(results);
    });
}, [keyword, logSearch]);

• 일반함수 호출과 마찬가지로 filters가 변경될 때마다 logSearch 함수가 재생성되어 effect가 실행되므로 의도되지 않은 API 호출 발생

useEffectEvent

React 18.3에서 도입된 새로운 Hook으로, 내부의 로직 중 의존성 추적이 필요하지 않은 부분을 분리할 수 있게 해줍니다.

특징

 

• Effect 내부에서 사용되는 함수를 의존성 없이 최신 값으로 유지
• 항상 최신 props와 state를 참조
• 제한되는 경우
  • useEffect 외부에서 호출 불가
  • async 함수로 선언 불가
  • 다른 함수에 콜백으로 전달 불가

 

const logSearchEvent = useEffectEvent((results) => {
	console.log(`검색어: ${keyword}, 필터: ${filters}, 결과 수: ${results.length}`);
});

useEffect(() => {
    fetchResults(keyword).then(results => {
      logSearchEvent(results);
    });
}, [keyword]); // filters 제거 가능

• useEffect가 filters를 의존성으로 가지지 않으므로 불필요한 호출이 발생하지 않음
• logSearchEvent 호출 시에도 항상 최신 filters 값 사용