In Angular/Ngrx Store filtering through 10k objects is slow, but when I return a copy of the...

I've found a weird occurrence, when working with Ngrx Store and Angular. Basically the goal of my task is shown in this example with about 10k entries in the Person[]:

My goal is to show certain people with specific surnames. This is the first revision I came up with, which is very slow:

export const selectPerson = createSelector(
selectCitizensState,
(citizensState: CitizensState): Person[] => citizensState.people ?? []
);


export const selectPeopleWithSurname = createSelector(
selectPerson,
selectSelectedSurnames,
(people: Person[], surnames: string[]) => {
if (surnames.length === 0) {
return people;
}
return people.filter((person) => surnames.includes(person.surname));
}
);


I came up with this on accident and it's way faster then the code above:

export const selectPerson = createSelector(
selectCitizensState,
(citizensState: CitizensState): Person[] => [...(citizensState.people ?? [])]
);


Why is that so? I am just creating a shallow copy of the store property. I can imagine that it has something to do with Ngrx's change detection or something, but I am not sure.

Continue reading...