컴포넌트에서 이벤트에 콜백 함수를 등록하는 건 useEffect에서 하면 됩니다. 그리고 useEffect에서 반환하는 cleanup 함수에서 콜백 함수를 등록 해지하는 작업을 해야 합니다. 현재 useEffect의 deps 배열에 onRefresh가 있기 때문에, 결국 onRefresh가 바뀔 때마다 콜백 함수를 등록하고 기존에 등록한 콜백 함수는 해지됩니다. onRefresh는 언제 바뀌는지 usePosts의 코드를 다시 한번 확인해볼까요?

hooks/usePosts.js - onRefresh

const onRefresh = async () => {
  if (!posts || posts.length === 0 || refreshing) {
    return;
  }
  const firstPost = posts[0];
  setRefreshing(true);
  const newerPosts = await getNewerPosts(firstPost.id, userId);
  setRefreshing(false);
  if (newerPosts.length === 0) {
    return;
  }
  setPosts(newerPosts.concat(posts));
};

onRefresh 함수는 현재 usePosts Hook 함수가 호출될 때마다 새로 만들어지고 있습니다. 즉, 컴포넌트가 렌더링될 때마다 이 함수가 바뀌는 것입니다. 이 함수가 실제로 바뀌어야 하는 시점은 posts, refreshing, userId가 바뀔 때입니다. FeedScreen의 useEffect에서 이 함수를 사용하고 있으니, useCallback을 사용해 해당 함수에서 의존하는 값이 바뀔 때만 새로운 함수를 사용하도록 만들어줍시다.