.

app/components/chat-message.tsx

@@ -1,6 +1,6 @@
 import { Clock } from "lucide-react";
-import React from "react";
 import { useShallow } from "zustand/react/shallow";
+import { useFetchUser } from "~/hooks/use-fetch-user";
 import type { Message } from "~/lib/api/types";
 import { useUsersStore } from "~/stores/users-store";
 import ChatMessageAttachment from "./chat-message-attachment";
@@ -12,16 +12,13 @@ interface ChatMessageProps {
 }
 
 export default function ChatMessage({ message }: ChatMessageProps) {
-    const { user, fetchUsersIfNotPresent } = useUsersStore(
+    const { user } = useUsersStore(
         useShallow((state) => ({
             user: state.users[message.authorId],
-            fetchUsersIfNotPresent: state.fetchUsersIfNotPresent,
         })),
     );
 
-    React.useEffect(() => {
-        fetchUsersIfNotPresent([message.authorId]);
-    }, []);
+    useFetchUser(message.authorId);
 
     const formatMessageDate = (date: Date) => {
         const now = new Date();