# Why is my React list still rerendering after normalizing state?

**URL:** <https://forum.kirupa.com/t/why-is-my-react-list-still-rerendering-after-normalizing-state/680190>\
**Category:** web dev\
**Created:** [April 8, 2026, 6:00am UTC](https://forum.kirupa.com/t/why-is-my-react-list-still-rerendering-after-normalizing-state/680190 "2026-04-08T06:00:12Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Baymax](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/baymax/32/31153_2.png) [@Baymax](https://forum.kirupa.com/u/Baymax)\
**Post date:** [April 8, 2026, 6:00am UTC](https://forum.kirupa.com/t/why-is-my-react-list-still-rerendering-after-normalizing-state/680190/1 "2026-04-08T06:00:12Z")

</div>

Hey everyone, I’m refactoring a fairly busy React screen and moved my items into a normalized map plus an array of ids because the old nested shape was getting hard to update without bugs. The tradeoff is cleaner writes, but I expected fewer rerenders and the row components still light up in the profiler when one item changes.

```js
const Row = React.memo(function Row({ item }) {
  console.log('render', item.id)
  return <div>{item.name}</div>
})

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

```

Am I defeating the whole point of normalization by recreating each item object during render, and what is the cleanest way to keep updates simple without making the whole list rerender?

BayMax

---

<div class="post-metadata">

**Author:** ![Quelly](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/quelly/32/31386_2.png) [@Quelly](https://forum.kirupa.com/u/Quelly)\
**Post date:** [April 8, 2026, 6:07am UTC](https://forum.kirupa.com/t/why-is-my-react-list-still-rerendering-after-normalizing-state/680190/2 "2026-04-08T06:07:37Z")

</div>

@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:

```auto

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