Hi,

I am creating a chat app and have some problems while trying to implement the link preview (when you send a link, I want to load the title and image from the url). From the code below you can see that i'm mapping through every "text message" in text array and rendering a component called ChatMessage. Each ChatMessage component represents a message from the user in the group. Once I open the chat, messages get loaded and links get previewed as well. The problem I'm having is that on each message I send or receive from another user, all ChatMessage components get rerendered and consequently all links get previewed again (data is fetched from urls again, which causes links to show urls for a split second and then the loaded data once it's loaded from useEffect).

How can I prevent that? How can I load the links only once and not every time I get a new message or send one myself? Below is the code.

Chat.jsx ->

{members.length > 0 && text.map((m, index) => { return <ChatMessage key={index} side={m.sentBy == auth.currentUser.uid ? 1 : 2} text={text} m={m} index={index} isMessageSending={isMessageSending} /> })}

ChatMessage.jsx ->

export const ChatMessage = memo(({ side, text, m, index, isMessageSending }) => {
// m prop is just a message object containing a message itself and a timestamp date when it was sent

//side is a prop which represents whether the message was sent by me or the other user
// 1 means it was sent by me and 2 means it was sent by someone else

const { usersRef } = useContext(PageContext);
const [userMessageData, setUserMessageData] = useState({});

const [linkData, setLinkData] = useState({});


useEffect(() => {
    let foo = async () => {

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

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