Skip to content

Image component causes unnecessary re-renders when defaultSource is emply #2792

@retyui

Description

@retyui

Is there an existing issue for this?

  • I have searched the existing issues

Describe the issue

Image component changes state onLoad event, that causes lots of unnecessary re-renders if defaultSource is empty:

these lines:

updateState(LOADING);
if (onLoadStart) {
onLoadStart();
}
requestRef.current = ImageLoader.load(
uri,
function load(e) {
updateState(LOADED);
if (onLoad) {
onLoad(e);
}
if (onLoadEnd) {
onLoadEnd();
}
},
function error() {
updateState(ERRORED);

Expected behavior

No set state inside Image component if defaultSource is empty

Steps to reproduce

  1. Render the image: <Image defaultSource={null} source={...} />
  2. Open a React Profile to check renders

Test case

https://codesandbox.io/skip

Additional comments

Here is a patch (if we ignore those state changes nothing changes image will be displayed as it was before)

react-native-web+0.17.7+001+no-image-state-change.txt

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions