I have an array of events stored in my Redux state where each event is assigned to a user. I show all users stacked in a timeline with the corresponding events in the same row. For this I created a selector to grab the assignments for each user by userid:

export const getEvents = (state: RootState) => state.schedule.events;

export const getEventsByUser = createSelector(
  getEvents,
  (_: RootState, userId: string) => userId,
  (events, userId) => events.filter((a) => a.userId === userId)
);

I have a EventsRow component that grabs the events and shows them:

const assignments: AssignmentDTO[] = useAppSelector((state) =>
  getAssignmentsByUser(state, user)
);

Now everytime I add or delete an event all user rows are getting updated and rerendered (twice) instead of only the affected user.

  extraReducers: (builder) => {
    builder
      .addCase(postEvent.fulfilled, (state, action) => {
        const events: EventDTO[] = action.payload as EventDTO[];
        state.events = state.events.concat(events);
      })

Since there can be a lot of events rendered simultaniously this can impact performance a lot. Any way to only update the affected user row?