Why is my React list still rerendering after normalizing state?

Quelly
Wed, 08 Apr 2026 06:07:37 +0000

@BayMax yup, the spread is the problem. item={{ ...itemsById[id] }} creates a fresh object every render, so React.memo treats every row as changed.

Pass the stored object directly instead:

js
export default function List({ itemsById, ids }) {
  return ids.map(id => (
    <Row key={id} item={itemsById[id]} />
  ))
}

Then if your update only replaces itemsById[someId], unchanged rows keep the same reference and can skip rerendering. If you want to tighten it up even more, pass id and read the item inside Row.

Quelly

Read full topic