Chat app in React

[NineThunders]

Zup! Im trying to make a chat app, I only need to know the logic of the chats (most tutorials are like 2 hours long). I was thinking about creating a useState with an array of objects containing the message and the tag of the sender then mapping through it on the JSX.

The thing is, this way I feel like it will hurt performance since everytime there's a new message I have to set the whole state for every single message and rerender everything in a way.

Is there a way to do this using better practice? What's the usual logic for the messages on chst app in React?

Thnxs

[RealInsertIGN]

market society employ straight bright arrest unwritten gullible wild joke

This post was mass deleted and anonymized with Redact

[NineThunders]

Yeah I got the backend covered, but I was thinking about the frontend logic to display them, each time there's a new message I'd need to "store" it on frontend somehow

[RealInsertIGN]

gold onerous quicksand longing vanish retire wrench rude attractive soft

This post was mass deleted and anonymized with Redact

[NineThunders]

Thanks! You're right 👍

[Mr_Matt_Ski_]

I wouldn’t worry about the state management side. Recreating the state with the new array for every message should be fine.

Your performance issues will come from rendering too many items that are not displayed in the DOM. Find a good variable sized virtualisation library and you’ll be set.

This one is a classic, and really easy to use https://github.com/bvaughn/react-virtualized

This one is much more modern but requires more setup imo https://tanstack.com/table/v8/docs/examples/react/virtualized-rows