5 ms·
React will nag you to give the array elements unique keys so that it can track them. If you do that, it will generally be able to avoid manipulating the DOM for
by fabian2k 5y ago
React will nag you to give the array elements unique keys so that it can track them. If you do that, it will generally be able to avoid manipulating the DOM for those elements of the array that did not change. It will still render (= execute the JS of the component) all of them by default, how expensive that is depends entirely on the content of your components.
If that is a problem you can use React.memo() to prevent rerendering of those components if their inputs did not change.
- wereHamster 5y agoWell, it's only efficient if the component which renders each element in the list gets a stable key AND is React.memo() AND the props passed to the components do not make the React.memo() pointless. For example the following will not be particularly efficient, because a fresh callback is passed to the component on each render. <> {array.map((data) => ( <SomeComponent data={data} onClick={() => { alert('nope'); }} /> )} </>
- fabian2k 5y agoThat's what useCallback is for. And it really depends on how heavy the child components are on whether all this makes a noticeable difference.