stream-chat-react/dist/components/MessageList/hooks/VirtualizedMessageList/useMessageSetKey.js

React components to create chat conversations or livestream style chat

import { useEffect, useRef, useState } from 'react';
export const useMessageSetKey = ({ messages }) => {
    /**
     * Logic to update the key of the virtuoso component when the list jumps to a new location.
     */
    const [messageSetKey, setMessageSetKey] = useState(+new Date());
    const firstMessageId = useRef(undefined);
    useEffect(() => {
        const continuousSet = messages?.find((message) => message.id === firstMessageId.current);
        if (!continuousSet) {
            setMessageSetKey(+new Date());
        }
        firstMessageId.current = messages?.[0]?.id;
    }, [messages]);
    return {
        messageSetKey,
    };
};