One way is to normalize the data. You can read about it here: https://redux.js.org/tutorials/essentials/part-6-performance-normalization#normalizing-data
Another way is to use shallowEqual
. https://react-redux.js.org/api/hooks#equality-comparisons-and-updates
// (1)
import { shallowEqual } from 'react-redux';
import { MyEvent, getEventsByUser } from './state/events.slice';
import { useAppSelector } from './state/hooks';
export function EventsRow({ user }: { user: string }) {
console.warn('Events Row rendered for user: ' + user);
const events: MyEvent[] = useAppSelector(
(state) => getEventsByUser(state, user),
// (2)
shallowEqual
);
return (
<div id={`user-${user}`}>
{events.map((x) => (
<div>{x.title}</div>
))}
</div>
);
}