FlashListMessageItem.js

import React, {useMemo, useRef, useState} from 'react';
import {replaceMentionValues} from 'react-native-controlled-mentions';
import {useChatStore} from '../store/chatStoreProvider';

const giveMessage = message => {
  var noMessage = message === undefined || message === null || message === '';
  return noMessage === true
    ? undefined
    : replaceMentionValues(message, value => value.original);
};
const MesssageItem = props => {
  const {chatStore} = useChatStore();
  // message data
  const messageData = props.message;
  if (messageData === null || messageData === undefined) return null;
  // Recycling
  const lastItemId = useRef(messageData.sub_id);
  const {is_Group, usersKey} = chatStore?.chatswithDetailsLight;
  const [isOneLine, setIsOneLine] = useState(true);
  const [itemsPositionLayout, setitemsPositionLayout] = useState(null);
  const [profile, setProfile] = useState(messageData?.details?.profile);
  const [name, setName] = useState(messageData?.details?.name);
  const [message, setMessage] = useState(giveMessage(messageData?.message));
  const [isforwarded_Message, setIsforwarded_Message] = useState(
    messageData?.isforwarded_Message,
  );
  const [
    {
      itsText,
      itsMedia,
      itsVideo,
      itsImage,
      itsAudio,
      itsDocument,
      itsJoinedRoom,
      itsUnblock,
      itsStory,
      itsCreatedRoom,
      itsDay_group,
    },
    setAllMessagesTypes,
  ] = useState(messageData?.typeOfMessage);

  // Recycling update
  if (messageData.sub_id !== lastItemId.current) {
    lastItemId.current = messageData.sub_id;
    setIsOneLine(true);
    setitemsPositionLayout(null);
    setProfile(messageData?.details?.profile);
    setName(messageData?.details?.name);
    setMessage(giveMessage(messageData?.message));
    setIsforwarded_Message(messageData?.isforwarded_Message);
    setAllMessagesTypes(messageData?.message);
  }

  // Issue
  // some messages are not "itsMedia" in the props they are other types of message
  // but then "itsMedia" is still true when should be false when scrolling or pushing new messages

  if (itsMedia === true) {
    console.log('itsMedia'); // this should not run when the props "typeOfMessage" is not "itsMedia"
    if (
      messageData.filesData === undefined ||
      messageData.filesData.length === 0
    ) {
      // because current messageItem is not "itsMedia" the "filesData" is empty which is correct
      // but then "itsMedia" being true will cause issue down below
      console.log('messageData', messageData);
      console.log('messageData.filesData', messageData.filesData);
    }
  }
  // lately i have noticed some messages are also taking other types of message typeOfMessage which causes empty message box or errors
  
  return <View>{/* Message stuffs here */}</View>;
};

just wondering why you need useState on each field and not just displaying the data?
one tip you could try profiling with https://github.com/welldone-software/why-did-you-render to check if your list & items doesn't render too often

just wondering why you need useState on each field and not just displaying the data? one tip you could try profiling with https://github.com/welldone-software/why-did-you-render to check if your list & items doesn't render too often

Hello, hmm interesting, will try ur suggestion and the "why-did-you-render" , thanks.