Reactjs react 导致不必要的回归

我正在创建一个聊天应用程序，在try 实现链接预览时遇到了一些问题(当您发送链接时，我想从网址加载标题和图像).从下面的代码中您可以看到，我正在映射文本数组中的每个"文本消息"，并呈现一个名为ChatMessage的组件.每个ChatMessage组件代表来自组中用户的消息.打开聊天后，消息就会被加载，链接也会被预览.我遇到的问题是，在我从另一个用户发送或接收的每条消息上，所有ChatMessage组件都会重新呈现，因此所有链接都会再次预览(数据再次从网址获取，这导致链接在一瞬间显示网址，然后在从useEffect加载后显示加载的数据).

我怎样才能防止这种情况？如何才能只加载一次链接，而不是每次收到新消息或自己发送新消息时加载链接？下面是代码.

- -

{members.length > 0 && text.map((m, index) => { return <ChatMessage key={index} text={text} m={m} index={index} isMessageSending={isMessageSending} /> })}

-ChatMessage.jsx -

export const ChatMessage = memo(({ text, m, index, isMessageSending }) => {
    // "m" prop is a message object containing message and timestamp when it was sent.
    // "text" prop is all messages in a chat
    const { usersRef } = useContext(PageContext);
    const [userMessageData, setUserMessageData] = useState({});
    const isSentByMe = m.sentBy === auth.currentUser.uid;
    const [linkData, setLinkData] = useState({});

    // this useEffect is supposed to be called when the m.message changes. Why does it get called again when i send a new message? Each message represents this component so it shouldn't be "related" to other messages.
    useEffect(() => {
        if(!m.message) return;

        let foo = async () => {

            if (isValidUrl(m.message)) {
                const data = await fetchDataFromLink(m.message);
                setLinkData(data.result);
            } else {
                setLinkData({});
            }
        }
        foo();
    }, [m.message]);

    return (
        <div> ... </div>
    )

我try 使用备忘录和useCallback加载链接预览，但一旦我点击发送消息按钮，它仍然会继续重新呈现.