이제 코드의 상단에서 사용되지 않는 useEffect, useState, 그리고 lib/posts에서 불러온 함수와 상수를 모두 지워도 됩니다.

어떤가요? 컴포넌트의 코드가 아주 간결해졌지요?

더 좋은 점은 이걸 Profile 컴포넌트에서 또 한번 사용할 수 있다는 점입니다! Profile 컴포넌트는 다음과 같이 수정해주세요.

components/Profile.js

(...)
import usePosts from '../hooks/usePosts';

function Profile({userId}) {
  const [user, setUser] = useState(null);
  const {posts, noMorePost, refreshing, onLoadMore, onRefresh} = usePosts(
    userId,
  );

  useEffect(() => {
    getUser(userId).then(setUser);
  }, [userId]);

  if (!user || !posts) {
    return (
      <ActivityIndicator style={styles.spinner} size={32} color="#6200ee" />
    );
  }

  return (
    <FlatList
      style={styles.block}
      data={posts}
      renderItem={renderItem}
      numColumns={3}
      keyExtractor={(item) => item.id}
      ListHeaderComponent={
        <View style={styles.userInfo}>
          <Avatar source={user.photoURL && {uri: user.photoURL}} size={128} />
          <Text style={styles.username}>{user.displayName}</Text>
        </View>
      }
      onEndReached={onLoadMore}
      onEndReachedThreshold={0.25}
      ListFooterComponent={
        !noMorePost && (
          <ActivityIndicator
            style={styles.bottomSpinner}
            size={32}
            color="#6200ee"
          />
        )
      }
      refreshControl={
        <RefreshControl onRefresh={onRefresh} refreshing={refreshing} />
      }
    />
  );
}

(...)

이번에도 마찬가지로 코드 상단에 불필요한 import 문들은 지워도 됩니다.

컴포넌트를 만드는 도중에 지금과 같이 반복되는 로직들이 보인다면 적극적으로 커스텀 Hook을 만들어서 코드를 재사용해보세요. 프로젝트의 유지보수성을 높여줄 것입니다.