how the hell did yall do this (react perf question)
anyone here know how t3chat renders new message blocks without rerendering the entire message? am trying to replicate this but can't seem to figure it out (notice how my list of blocks is rerendered every time a new block comes in vs t3chat only rendering new blocks) 🤔
my only guess is that t3chat isn't using a list of blocks?
https://media.discordapp.net/attachments/1380760436328366112/1395598551463100606/what.mov?ex=687d022f&is=687bb0af&hm=b7a1905fb64b9bec01ee7cc711a07ec8067420618b0b9ee245c720dd32c05bcb&
https://media.discordapp.net/attachments/1380760436328366112/1395598552050303197/bad.mp4?ex=687d022f&is=687bb0af&hm=010a291a1e6540ae71643f9b6a2335246679a91c7c29ce16d8b37aa24de7cead&
5 Replies
when new blocks are added, each previous block does NOT rerender since it's memoized (good). however, the parent block list component itself rerenders, as its subscribed to the list of blocks (which is changing when new text streams in)
https://media.discordapp.net/attachments/1383970286306726049/1396232186830651462/image.png?ex=687d560e&is=687c048e&hm=4566daf65fa6f534a64bc5b3dbf35fa576c186747c077b72887fd00546286a70&=&format=webp&quality=lossless&width=1936&height=1188
is it possible
that what he does is using .append alike which create new dom and rerender it over n over when streams
after that paragraph stream is over make other new paragraphs by .append new html element again. which also has same logic rerender when streams over n over
Don’t have an answer but what tool are you using to analyze rerenders? 🙂
hmm this makes sense
thank you
using react-scan, best react tool of all time!! https://react-scan.com/
React Scan
React Scan automatically detects and highlights components that cause performance issues in your React app. Drop it in anywhere – script tag, npm, you name it!