> For the complete documentation index, see [llms.txt](https://olga-f.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://olga-f.gitbook.io/react/how-to-decrease-unnecessary-re-renders.md).

# How to decrease unnecessary re-renders

{% hint style="warning" %}
Fix your slow renders first. Then deal with the "unnecessary re-renders"
{% endhint %}

A React Component can re-render for any of the following reasons:

* Its props change
* Its internal state changes
* It is consuming context values that have changed
* Its parent re-renders

|    |
| -: |

When our components are re-rendered even though no DOM updates were needed, we can optimize that component to be memoized via `React.memo`.

{% hint style="info" %}
Wrapping *everything* in `React.memo` can actually slow down your app in some cases and in all cases it makes your code more complex. So it's much better to use it more intentionally.
{% endhint %}

```jsx
function Menu({
  items,
  getMenuProps,
  getItemProps,
  highlightedIndex,
  selectedItem,
}) {
  return (
    <ul {...getMenuProps()}>
      {items.map((item, index) => (
        <ListItem
          key={item.id}
          getItemProps={getItemProps}
          item={item}
          index={index}
          isSelected={selectedItem?.id === item.id}
          isHighlighted={highlightedIndex === index}
        >
          {item.name}
        </ListItem>
      ))}
    </ul>
  )
}

Menu = React.memo(Menu)
```