Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] Replay load/error events that happen earlier than commit #13862

Closed
wants to merge 1 commit into from

Conversation

sebmarkbage
Copy link
Collaborator

If we create an img/image/link those might fire their load event before we commit. If that happens, we need to store the event so that we can replay it during the commit phase.

I had an idea to fix it but this is still WIP because I actually need to test if this approach works.

  • Write code
  • Write unit tests
  • Write fixtures

If we create an img/image/link those might fire their load event
before we commit. If that happens, we need to store the event so that
we can replay it during the commit phase.
@sophiebits
Copy link
Collaborator

Is it not possible to receive more than one event before mount?

@sizebot
Copy link

sizebot commented Oct 16, 2018

ReactDOM: size: 🔺+0.6%, gzip: 🔺+0.3%

Details of bundled changes.

Comparing: 21a79a1...33a2d73

react-dom

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-dom.development.js +0.1% +0.1% 660.48 KB 661.37 KB 154.35 KB 154.53 KB UMD_DEV
react-dom.production.min.js 🔺+0.6% 🔺+0.3% 95.72 KB 96.26 KB 31.18 KB 31.28 KB UMD_PROD
react-dom.development.js +0.1% +0.1% 655.82 KB 656.71 KB 152.97 KB 153.13 KB NODE_DEV
react-dom.production.min.js 🔺+0.6% 🔺+0.6% 95.71 KB 96.26 KB 30.77 KB 30.94 KB NODE_PROD
ReactDOM-dev.js +0.2% +0.1% 673.12 KB 674.14 KB 153.62 KB 153.83 KB FB_WWW_DEV
ReactDOM-prod.js 🔺+0.1% 🔺+0.3% 287.46 KB 287.62 KB 52.79 KB 52.95 KB FB_WWW_PROD
react-dom.profiling.min.js +0.5% +0.4% 98.5 KB 99.04 KB 31.33 KB 31.45 KB NODE_PROFILING
ReactDOM-profiling.js 0.0% +0.3% 293.66 KB 293.71 KB 54.16 KB 54.34 KB FB_WWW_PROFILING
react-dom.profiling.min.js +0.5% +0.4% 98.43 KB 98.96 KB 31.82 KB 31.96 KB UMD_PROFILING

scheduler

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
scheduler.development.js n/a n/a 0 B 19.17 KB 0 B 5.74 KB UMD_DEV
scheduler.production.min.js n/a n/a 0 B 3.16 KB 0 B 1.53 KB UMD_PROD

Generated by 🚫 dangerJS

@sebmarkbage
Copy link
Collaborator Author

sebmarkbage commented Oct 16, 2018

@sophiebits No, because you can't change the src. At least not without resuming of host nodes which we don't have yet. If there's only one resource, it either loads or errors.

This PR replays these events even after mount which is a bug though.

@sebmarkbage
Copy link
Collaborator Author

The timing of these events are a bit weird. I guess they will fire in the "layout" phase. So it'll fire before componentDidMount of the parent that rendered it. It's also before the ref on the image has fired so you don't even have a ref on it yet. This is consistent with onFocus/Blur events of auto-focused elements.

It's a bit weird that it is so late but not fully after initialization. However, it is good because it means you can setState at this point. setState before commit gets sketchy.

@NE-SmallTown
Copy link
Contributor

Does audio/video/script/source also need this?

@necolas necolas added the React Core Team Opened by a member of the React Core Team label Jan 8, 2020
</ConcurrentMode>,
);

// someHowGetAnImage.dispatchEvent(loadEvent);
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@trueadm I think we’ll need to spy on document.createElement by wrapping it so we can detect which img instance React creates.

We can’t use a ref to simulate this because it doesn’t resolve in time.

@facebook-github-bot
Copy link

Hi @sebmarkbage!

Thank you for your pull request.

We require contributors to sign our Contributor License Agreement, and yours needs attention.

You currently have a record in our system, but the CLA is no longer valid, and will need to be resubmitted.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks!

@gaearon
Copy link
Collaborator

gaearon commented Apr 3, 2022

This was fixed in #23316.

@gaearon gaearon closed this Apr 3, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed React Core Team Opened by a member of the React Core Team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants