Copying state in reducer is causing slowness - reactjs

Question

I have a reducer which is giving me some slowness. I have identified the step which clones/copies a part of my state as the slow step.
export default function itemReducer(state = initialState, action) {
case ITEM_FETCH_IMPACT_UPDATE:
{
let index = action.payload.index
slow step-> let items = [...state.items];
items[index] = {...items[index], overallIsLoading: true};
return {...state, items}
};
}
items is a fairly large array of about 300 objects, with each object having ~10 properties. How should I go about speeding this up while maintaining best Redux/React practices?

Answer 1

That's a use case for using Immer for Writing Immutable Updates.
Writing immutable update logic by hand is frequently difficult and prone to errors. Immer allows you to write simpler immutable updates using "mutative" logic, and even freezes your state in development to catch mutations elsewhere in the app. We recommend using Immer for writing immutable update logic, preferably as part of Redux Toolkit.
With Immer drafts, or any immutable library, such code will become:
const index = action.payload.index;
state.items[index].overallIsLoading = true;
And it will patch the state and return immutable data.
See the recommendation on Redux Style Guide.

Answer 2

I think copying is done twice, first time when you declare items, then when you return a new state.
If splitting the state itself is not a viable option, then my suggestion is to reduce the number of copying to once:
export default function itemReducer(state = initialState, action) {
case ITEM_FETCH_IMPACT_UPDATE:
return {
...state,
items: state.items.map((item, ind) => {
if(ind===action.payload.index){
return {
...item,
overallIsLoading:true
}
} else {
return item;
}
})
}
}

Answer 3

If I try that code with 3000 items then it still runs in microseconds. I'm not sure you identified the problem correctly or just provided the wrong code.
const a = new Array(3000).fill('').map(() =>
(
'abcdefghijklmnopqrstuvwxyz1' +
'234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ'
)
.split('')
.reduce((result, key) => {
result[key] = Math.random();
return result;
}, {})
);
const now = performance.now();
const b = [...a]
const c = [...a]
const d = [...a]
const e = [...a]
const f = [...a]
console.log('that took:',performance.now()-now)