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

This issue has been created 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-09-27
Star Count 195296
Watcher Count 6655
Fork Count 40431
Issue Count 1113

YOU MAY BE INTERESTED

Issue Title Created Date Comment Count Updated Date
"Error: line 0: Could not save file" 9 2018-08-16 2022-07-03
Failed to write and RAM consumption 4 2019-11-22 2022-07-25
Don't repeatedly log the same errors 0 2021-12-10 2022-09-26
repetition of words in the success stories page 1 2021-04-18 2022-09-17
[cbs] Migrate to opaque pointers 1 2022-07-08 2022-09-19
Alternatives for non-standard sub_group::shuffle_up/down/xor and yet-to-be-implemented atomic_fence 1 2022-07-11 2022-07-16
Clang plugin segfaulting with unregistered passes 3 2022-07-11 2022-07-16
PATCH HTTP verb support 0 2021-07-03 2022-07-21
Makefile.vars hasn't been update for the new release 3 2021-06-11 2022-07-22
Add custom insert of docker arguments. 2 2022-09-01 2022-09-19
View add tabLabel props,ts will output an error,View not have this props,how to fix 1 2021-09-16 2022-09-13
Discord doesn't notify me when a message with mention has arrived. 8 2019-08-20 2022-09-24
AHP search timing parameter 3 2021-02-12 2022-08-27
Not able to record video 2 2020-12-09 2022-07-16
Use importlib_metadata instead of pkg_resources to ensure compatibility with condacolab 0 2021-12-31 2022-08-30
对于opus格式的边录边转码,以及解码播放 0 2021-06-26 2022-09-26
Python Usage examples are needed badly to make use of this library 0 2021-08-20 2022-08-20
Numerous API's Calls 1 2021-10-04 2022-09-21
[Question] Rate Limit by invalid attempt 0 2021-02-02 2022-09-21
Whitespaces are being removed from parameter content 4 2021-12-14 2022-09-19
Support Dapr as a Logic Apps Action Type 1 2020-06-23 2022-07-09
Incorrect `f32::NAN as u64/u128` conversion 2 2021-09-01 2022-09-07
Repo description needs updating 1 2021-05-08 2022-06-29
Use "JOIN-ON" clause when joining tables in SQL 0 2022-02-10 2022-03-14
Review SQL queries used in db_plugin.cpp 1 2022-02-10 2022-03-14
prevent deletion of remote zones with users defined 0 2022-02-10 2022-03-14
Wrong transform of LiDAR sensor 2 2022-01-05 2022-09-25
Amplify Studio visual data modeling dosn't support @directive 0 2022-08-05 2022-08-09
Speed won't go below 0.07x speed. 2 2021-04-13 2022-08-22
Message design for displaying fediverse engagement (duplicate) 0 2021-08-12 2022-09-08
Logging stopping to work after a while in Meteor projects 3 2021-10-09 2022-09-02
🤗 [Question]: Gofiber Streaming with Proxy Middleware 1 2022-07-08 2022-09-25
Breaking change in minor version? 15 2022-06-11 2022-08-27
localForge: Reload - no data 1 2020-05-27 2022-08-03
Run into MemoryError when loading Imagenet22K 2 2021-12-25 2022-09-21
EI_EXPOSE_REP and EI_EXPOSE_REP2 on Java immutable Objects 1 2021-08-02 2022-09-24
F# Compiler Community Session - Typechecker - An Online Chat with Don, Vlad and Community 8 2021-03-08 2022-09-07
Introduce a MIME type for F# resources 0 2021-09-04 2022-09-07
[FEATURE] 希望系统管理员默认拥有修改系统内任意一个项目的权限 1 2021-12-25 2022-08-02
Gni & Android Hotspot 4 2021-03-19 2022-09-18
unbound function 0 2021-04-12 2022-01-22
[FEATURE] Can't use format parameter which is new in JuiceFS 0 2022-04-18 2022-08-23
在paddledetection中,自制数据集VOC格式转YOLO格式 2 2022-08-15 2022-09-21
Problem with update Powertoys on Windows 11 pro 2 2022-05-28 2022-09-23
[Feature Request]: Flink runner savepoint backward compatibility 3 2022-06-15 2022-08-22
Website says "socket.io 3.0 is here" but the latest version is 4 3 2021-03-27 2022-09-25
Integrate GraphQL schemas 2 2022-01-19 2022-09-18
Fluent API to select DISTINCT column for r2dbcEntityTemplate.select() while using projection with select.as() 1 2021-04-16 2022-09-20
Limits on number of parameters, metrics, etc 4 2021-11-04 2022-09-04
SqlConnectionStringBuilder.Encrypt - documentation is not correct 1 2021-12-06 2022-09-22