List rendering changing haphazardly. Works in local dev environment but not in production build
Unanswered
Blanc de Hotot posted this in #help-forum
Blanc de HototOP
### 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
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.
```ts
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>
)
}
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.
```ts
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>
)
}
4 Replies
It's impossible that your code inside
You may do some
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 youBlanc de HototOP
No it's not reversed in local, using
I have this callback function that executes. And then I return the transcription from the custom hook which has this callback function.
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.
I think it's likely the problem of
messages (since it's from somewhere else)What does this line mean? It will reverse...finalisedMessage.reverse()
finalisedMessage every time you add a new itemBlanc de HototOP
Yes the finalisedMessage should be reversed everytime. I don't know how it works well on dev but in prod doesn't