Rendering a list pattern
I've been running into variations of this problem concerning the need to create an entirely new data constructs when needing to map through some data to render something:
imagine I have an array of items stored as state:
const [items, setItems] = useState<string[]>([]);
Then I would like to append a string to items, in react I would have to call setItems by creating an entirely new array since react notices that the array has changed and does the rerender again:
setItems((prev) => [...prev, newItem]);
items.map((item) => <SomeComponent key={item}/ >)
this seems really bad for performance if there are many items in the array, is there an alternative way to do this?
imagine I have an array of items stored as state:
const [items, setItems] = useState<string[]>([]);
Then I would like to append a string to items, in react I would have to call setItems by creating an entirely new array since react notices that the array has changed and does the rerender again:
setItems((prev) => [...prev, newItem]);
items.map((item) => <SomeComponent key={item}/ >)
this seems really bad for performance if there are many items in the array, is there an alternative way to do this?
Similar Threads
Was this page helpful?
