I have the following loop (simplified):
const ExpensiveItems = useMemo(() => {
return items.map((item, idx) => {
const style = {
marginTop: V_GAP,
...(idx === items.length - 1 && { marginBottom: V_GAP }),
};
return <ExpensiveComponent style={style} item={item} />;
});
}, [items]);
return loading ? <div>Loading...</div>
: <div>{ExpensiveItems}</div>
Whenever, items
changes will the ExpensiveComponent
function be called N times where N is the length of items
. Or will React diff the props first and only call the ExpensiveComponent
function again if and only if the props have changed?
This is possibly premature optimization, but if the ExpensiveComponent
function will be called N times each time the items
array changes, I’d like to avoid calling it N
times if possible, since usually at most 1 item in the items
array will change at a given time.
So the question is: If re-calling items.map
will call the ExpensiveComponent
function N
times, is there a way to optimize this map
function further so that if a single item in the items
array changes, I don’t do that?