List rendering changing haphazardly. Works in local dev environment but not in production build

[opaque hound]

Summary

I have this component that reverses transcription and then renders them, it works perfectly locally by showing the list in the reverse order. But when I do yarn build and yarn start this is how it works.

1. It shows the list in a not reversed order.
2. Then after sometime shows the list in the reverse order.

I am using nextjs 13, and this happens only when I generate and run a build.
This is how the code rendering the transcriptions looks like.

type Props = {
  transcriptions: Transcription[]
  currentTranscription: string
  isAdminView?: boolean
}
const TranscriptionsComponent: React.FC<Props> = ({
  transcriptions,
  currentTranscription,
  isAdminView = false,
}) => {
  const reversedTranscriptions = useMemo(
    () => [...transcriptions].reverse(),
    [transcriptions],
  )

  return (
    <div className="dashboard-inner">
      <div className="dashboard-inner-header">Transcript</div>
      <div className="transcriptions-card-wrap">
        {!isAdminView && (
          <SessionTranscriptLoadingCard text={currentTranscription} />
        )}
        <Transcriptions transcriptions={transcriptions} />
        {reversedTranscriptions
          .filter((transcription) => transcription.text !== '')
          .map((transcription) => (
            <SessionTranscriptCard
              key={transcription._id}
              text={transcription.text}
              time={transcription.time}
              sentimentType={transcription.sentimentType}
            />
          ))}
      </div>
    </div>
  )
}

[grizzled mason]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[robust thunder]

It's impossible that your code inside useMemo isn't executing or .reverse() isn't reversing your array, so I think it's probably because of the transcriptions variable itself. Maybe it is already reversed before passing into your component?

You may do some console.log to ensure that, since I can't reproduce the problem for you

[opaque hound]

No it's not reversed in local, using yarn dev but when I do yarn build and yarn start. It is first shown as not reverse and then it is reversed.

const handleFinalisedMessage = useCallback(
    async (messages: any) => {
      let finalisedMessage: Transcription[] = []
      for (const message of messages) {
        const { content } = message.payload
        const {
          suggested,
          polarity: { score },
        } = message.sentiment || {
          polarity: { score: 0 },
          suggested: 'neutral',
        }
        finalisedMessage = [
          ...finalisedMessage.reverse(),
          {
            text: content,
            time: new Date(),
            score: score ?? 0,
            sentimentType: suggested ?? 'neutral',
            _id: crypto.randomUUID(),
          },
        ]
      }

      setTranscriptions((prev) => [...prev, ...finalisedMessage])
      updateSessionInsightSentiment([
        ...finalisedMessage.map((m) => ({
          label: m.text,
          polarity: (m?.sentimentType ?? 'neutral') as Polarity,
          score: m.score ?? 0,
          date: m?.time?.toISOString(),
        })),
      ])
    },
    [updateSessionInsightSentiment],
  )

I have this callback function that executes. And then I return the transcription from the custom hook which has this callback function.

[robust thunder]

I think it's likely the problem of messages (since it's from somewhere else)

...finalisedMessage.reverse()
What does this line mean? It will reverse finalisedMessage every time you add a new item