Address review comments

Author: petyosi

examples/messaging/src/App.js

@@ -10,7 +10,7 @@ import {
   InfiniteScrollPaginator,
   MessageInput,
   MessageInputFlat,
-  VirtualizedMessageList as TheMessageList,
+  MessageList as TheMessageList,
   Thread,
   Window,
 } from 'stream-chat-react';

src/components/MessageList/VirtualizedMessageList.js

@@ -15,7 +15,7 @@ import { usePrependedMessagesCount } from './hooks/usePrependMessagesCount';
 import { useShouldForceScrollToBottom } from './hooks/useShouldForceScrollToBottom';
 import MessageNotification from './MessageNotification';
 
-const prependOffset = 10000;
+const PREPEND_OFFSET = 10 ** 7;
 
 /**
  * VirtualizedMessageList - This component renders a list of messages in a virtual list. Its a consumer of [Channel Context](https://getstream.github.io/stream-chat-react/#channel)
@@ -64,7 +64,7 @@ const VirtualizedMessageList = ({
   const messageRenderer = useCallback(
     (messageList, virtuosoIndex) => {
       const streamMessageIndex =
-        virtuosoIndex + numItemsPrepended - prependOffset;
+        virtuosoIndex + numItemsPrepended - PREPEND_OFFSET;
       // use custom renderer supplied by client if present and skip the rest
       if (customMessageRenderer) {
         return customMessageRenderer(messageList, streamMessageIndex);
@@ -152,7 +152,7 @@ const VirtualizedMessageList = ({
         }}
         itemContent={(i) => messageRenderer(messages, i)}
         components={virtuosoComponents}
-        firstItemIndex={prependOffset - numItemsPrepended}
+        firstItemIndex={PREPEND_OFFSET - numItemsPrepended}
         startReached={() => {
           if (hasMore) {
             loadMore(messageLimit);

src/components/MessageList/hooks/usePrependMessagesCount.js

@@ -5,24 +5,24 @@ import { useRef, useMemo } from 'react';
  * @param {Array<{ id: string }> | undefined} messages,
  */
 export const usePrependedMessagesCount = (messages) => {
-  const firstMessageId = useRef(messages && messages.length && messages[0].id);
-  const earliestMessageId = useRef(
-    messages && messages.length && messages[0].id,
-  );
+  const currentFirstMessageId = messages?.[0]?.id;
+  const firstMessageId = useRef(currentFirstMessageId);
+  const earliestMessageId = useRef(currentFirstMessageId);
   const previousNumItemsPrepended = useRef(0);
+
   const numItemsPrepended = useMemo(() => {
     if (!messages || !messages.length) {
       return 0;
     }
     // if no new messages were prepended, return early (same amount as before)
-    if (messages[0]?.id === earliestMessageId.current) {
+    if (currentFirstMessageId === earliestMessageId.current) {
       return previousNumItemsPrepended.current;
     }
 
     if (!firstMessageId.current) {
-      firstMessageId.current = messages[0].id;
+      firstMessageId.current = currentFirstMessageId;
     }
-    earliestMessageId.current = messages[0].id;
+    earliestMessageId.current = currentFirstMessageId;
     // if new messages were prepended, find out how many
     // start with this number because there cannot be fewer prepended items than before
     for (