#push to array render

26 messages · Page 1 of 1 (latest)

hushed elk
#

Hi there. I wonder if there is possible to push element to the array that is rendered on the screen without creating completely new array for that. Im trying to do that with useState, but if thats wrong just let me know

broken fjordBOT
#
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)

winged ibex
#

but for sure, we need more details for it

hushed elk
#

well for now im doing setNewItem(item => [...item,newItem]) maybe im wrong but it creates a new array with old items and a new item at the end = rerenders whole array on screen?

winged ibex
#

yep, you shouldnt mutate state at all

#

this is way to go

#

also state updates lead to rerenders to make sure evertyhing are okay

hushed elk
#

So with big realtime data I need to somehow overcome full array rerender?

winged ibex
#

memoizing

hushed elk
#

in some simpler explanation?

winged ibex
#

how are you setting your state

hushed elk
#

const [firestoreDatabase, setFirestoreDatabase] = useState<any[]>([]);

and then in my useEffect that watches for data in realtime db setFirestoreDatabase((old) => [...old, data]);
and then just {firestoreDatabase.map((post, index) => (//HTML CODE//)

winged ibex
#

what is wrong with it

hushed elk
winged ibex
#

when you add new item, your array being new array so it rerenders

#

but its the working way of react

hushed elk
#

that might be problematic with realtime database that might get big enough to lag

#

but thanks, I will try finding other way than using useState

winged ibex
#

you cant set things without state tho

#

we can say VDOM preventing you from going

#

i could recommend a thing, make a performance test to your DEV server via Profiling at DevTools

#

and see that which things rerendering when you add items

#

then try to wrap that components or state with memo, callback or anything

#

thus you can find what causes rerender and why

#

also if you have big data, its better to split them into routes, pages or maybe apis
finally, if you are rendering a long list and having problems with speed, its better to look for "react-window" kind of libs, "virtual rendering"