Frame re-renders on each load event inside iframe

[igorbt]

React bubble up to the Frame component (iframe) each load event that happen in elements rendered inside it, even if browsers normally would stop this at iframe border. This is why on each such load (for example image load) Frame->handleLoad is called and the unconditional setState there would re-render the Frame.
For now I'm using a workaround like this:

<Frame>
  <div onLoad={ev => ev.stopPropagation()}>{children}</div>
</Frame>

But it would be nice to have a fix in the library. For example at least:

  handleLoad = () => {
    if (!this.state.iframeLoaded) {
      this.setState({ iframeLoaded: true });
    }
  };

or, maybe checking that the event target is really the iframe.

[ryanseddon]

Wanna have a go at a PR seems like you know how to fix this, I would agree that checking the event target is the frame might be the better approach

[ryanseddon]

Wanna try v5.2.2-alpha.0 prerelease. The changes in their should fix this in theory.

[AnthonyCrowcroft]

I'm getting a weird error with the Frame Component causing rerenders outside of an act when testing and was curious if there is any known ongoing issues in this regard?

[ryanseddon]

Fixed in upcoming PR.

Problem: Load events from child elements inside the iframe bubble up to the Frame component, causing unnecessary re-renders.

Solution: Modified handleLoad() to check if the event target is the iframe element itself, ignoring load events from child elements.

Changes:

• src/Frame.jsx: Added event target check in handleLoad() method
• Added test case to verify the fix

This prevents performance issues when images, scripts, or other resources load inside the iframe content.