Bug: <img/> renders twice in firefox with react 18

This issue has been tracked since 2022-09-09.

React version: 18.2.0

Steps To Reproduce

  1. Insert a tag <img/> with src
  2. Go to Firefox inspect tool to the tab network
  3. Reload the page and watch image request in network

Link to code example: https://codesandbox.io/s/unruffled-jerry-9hli44?file=/src/App.js

The current behavior

There are two request for image in firefox, image renders twice
image

The expected behavior

There is one request and one render in firefox

MiguelMachado-dev wrote this answer on 2022-09-10
-2

It really happens, even on Chrome/Edge. But I think this is due to StrictMode. Could please try deleting StrictMode on index.js?

It will look like this.

root.render(<App />);

On StrictMode react render twice. https://reactjs.org/docs/strict-mode.html

StrictMode renders components twice (on dev but not production) in order to detect any problems with your code and warn you about them

kapibaara wrote this answer on 2022-09-12
-1

It really happens, even on Chrome/Edge. But I think this is due to StrictMode. Could please try deleting StrictMode on index.js?

It will look like this.

root.render(<App />);

On StrictMode react render twice. https://reactjs.org/docs/strict-mode.html

StrictMode renders components twice (on dev but not production) in order to detect any problems with your code and warn you about them

it doesn't help, in my example in codesandbox I tried to remove StrictMode, but the behavior is the same, there are two requests in network tab
Аnd on Chrome, if you open this https://c1i5n8.csb.app/ there are no two requests in network tab

MiguelMachado-dev wrote this answer on 2022-09-12
-3

There is, check https://codesandbox.io/s/unruffled-jerry-9hli44?file=/src/index.js
On Edge and Firefox I still getting 2 requests, disabling strict-mode it stops.

sigorilla wrote this answer on 2022-09-12
-1

@MiguelMachado-dev, Just check this example (without StrictMode): https://codesandbox.io/s/goofy-stonebraker-pf0wg7?file=/src/index.js (https://pf0wg7.csb.app/)

And there is screenshot with two requests:

image

What i'm doing wrong?

MiguelMachado-dev wrote this answer on 2022-09-12

Not sure, it does not happen to me. We should then wait for more people to see this. It only happen to me when using StrictMode.

Edge:
image

Firefox:
image

Both browsers up to date.

arpitj007 wrote this answer on 2022-09-12

It really is an issue. Where can we find the root cause of this problem?

arpitj007 wrote this answer on 2022-09-12

@MiguelMachado-dev How can I contribute to fixing this bug?

MiguelMachado-dev wrote this answer on 2022-09-12

@MiguelMachado-dev How can I contribute to fixing this bug?

Do you know how to fix it?

If you know, you can fork the project and open a PR. Or a solution, you can comment here how he can fix it properly.

sult4novars wrote this answer on 2022-09-13

Hi! I repeated this case in https://codesandbox.io/ with clean HTML and get same result, then I try same code with corgi in https://codepen.io/sult4novars/pen/NWMRzRX and get one request)

sigorilla wrote this answer on 2022-09-13

Maybe it depends on OS? I have MacOS 12 (M1), Firefox 104.0.2

And I reproduced it on codepen: https://codepen.io/sult4novars/pen/NWMRzRX

sult4novars wrote this answer on 2022-09-13

Maybe it depends on OS? I have MacOS 12 (M1), Firefox 104.0.2

And I reproduced it on codepen: https://codepen.io/sult4novars/pen/NWMRzRX

i have same params MacOS 12.6 (M1, 8gb ), Firefox 104.0.2

image

sult4novars wrote this answer on 2022-09-13

Maybe it depends on OS? I have MacOS 12 (M1), Firefox 104.0.2

And I reproduced it on codepen: https://codepen.io/sult4novars/pen/NWMRzRX

ooo I reproduced to but when I reload page this case not reproduced
but i check status and see NS_BINDING_ABORTED and search this status, and what I found https://stackoverflow.com/questions/704561/ns-binding-aborted-shown-in-firefox-with-httpfox

sult4novars wrote this answer on 2022-09-13

Maybe it depends on OS? I have MacOS 12 (M1), Firefox 104.0.2

And I reproduced it on codepen: https://codepen.io/sult4novars/pen/NWMRzRX

try with new image https://codepen.io/sult4novars/pen/NWMRzRX

when I first reload:
image

when i try to reload many times
image

kapibaara wrote this answer on 2022-09-14

when i try my example with react 17, there are not two requests in firefox
https://codesandbox.io/s/wizardly-lena-yobcgz?file=/src/index.js

More Details About Repo
Owner Name facebook
Repo Name react
Full Name facebook/react
Language JavaScript
Created Date 2013-05-24
Updated Date 2022-10-03
Star Count 195549
Watcher Count 6650
Fork Count 40505
Issue Count 1119

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date