Repository: next.js
Issue: `next/image` (including future) doesn't provide a way to opt out of rerenders via memo when using useRouter
Labels: bug

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

```
Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 21.6.0: Wed Aug 10 14:25:27 PDT 2022; root:xnu-8020.141.5~2/RELEASE_X86_64
Binaries:
      Node: 16.16.0
      npm: 8.11.0
      Yarn: 1.22.18
      pnpm: N/A
Relevant packages:
      next: 12.2.5
      eslint-config-next: 12.2.3
      react: 18.2.0
      react-dom: 18.2.0

warn  - Latest canary version not detected, detected: "12.2.5", newest: "12.2.6-canary.6".
        Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
        Read more - https://nextjs.org/docs/messages/opening-an-issue
```

### What browser are you using? (if relevant)

_No response_

### How are you deploying your application? (if relevant)

_No response_

### Describe the Bug

I have a page with hundreds of table cells and an image in each of those table cells (so my page contains hundreds of images). When an image is selected, a sidebar opens with details, and I replace the URL in the location bar using `useRouter`.

I've been having performance issues when selecting an image — the interaction would take 500ms+, so I've been going through my code to optimize everything.

I'm able to optimize everything via memoization except for the `next/image` component (I'm actually using `next/future/image` but I've checked with both).

When I replace/push a new query string using `useRouter`, the whole tree rerenders. This is fine for most of my components because of my memoization. However, every `Image` component always rerenders (according to the React dev tools because of a context change). I've tried to wrap the `Image` component with `useMemo` but no matter what I try, the `Image` component rerenders.

If I replace the Next `Image` component with a plain `img`, my memoization is perfect and those `img` components do not rerender. However, I really want to use the `Image` component because of all the features it offers.

Is there any way to stop the `Image` component rerendering when the context/router changes? Am I missing something?

If there isn't a way currently, perhaps this is a bug? It seems quite important to have control over when the component rerenders when using `useRouter` or making a change in the context.

#### Update

Looking at the ranked chart in the profiler, it seems it may be `ImageConfigContext` and/or `RouterContext` causing these rerenders. As mentioned above, I can stop my own components rerendering by memoizing them, but that doesn't seem possible with the Next `Image` component.

---

```tsx
import Image from 'next/future/image';
import { memo, useMemo } from 'react';

import { styled } from '~/theme/stitches.config';

// ...

function ImageTile({
  alt,
  height,
  isSelected,
  onClick,
  src,
  width,
}: {
  alt: string;
  height: number;
  isSelected?: boolean;
  onClick: () => void;
  src: string;
  width: number;
}) {
  return (
    <Button onClick={onClick}>
      <Image alt={alt} height={height} src={src} width={width} />
    </Button>
  );

}

export default memo(ImageTile);
```

I have also tried wrapping the `Image` element in `useMemo` like below but it still rerenders due to a context change.

```tsx
// ...

  const imageEl = useMemo(() => (
    <Image alt={alt} height={height} src={src} width={width} />
  ), [alt, height, src, width]);
  
  return (
    <Button onClick={onClick}>
      {imageEl}
    </Button>
  );

// ...
```

### Expected Behavior

The Next `Image` component should provide a way to prevent rerender during a context change (like `useRouter` changing).

### Link to reproduction

https://codesandbox.io/s/gifted-hermann-ygwj5u?file=/components/MyTile.tsx

### To Reproduce

Using the regular Next `Image` component (non-memoized) (line 12 of `MyTile.tsx`), the render takes 547ms:

<img width="648" alt="Next Image component render" src="https://user-images.githubusercontent.com/1597139/187334982-f84c3343-0f6a-4102-92d0-d2b8f181fd8d.png">

Using the `memoedImage` component (line 13 of `MyTile.tsx`), the render takes 684ms:

<img width="650" alt="Memoized Next Image component render" src="https://user-images.githubusercontent.com/1597139/187334919-d8811fe3-88bf-4ff6-9b1b-971d5b3a1eb9.png">

Using the native `img` component (line 14 of `MyTile.tsx`), the render takes 43ms (~12× faster):

<img width="648" alt="Native img component render" src="https://user-images.githubusercontent.com/1597139/187334836-f0728212-9337-45f7-b059-253270f3f257.png">