Efficiently Render Script Tags in React 19 Components

In React 19, managing script tags efficiently within components can lead to performance enhancements and simpler code structures.

Originally, using script tags directly in a React component involved complex setups, like using useEffect to dynamically add JavaScript code. For instance, a component might dynamically inject script tags to load external widgets. This approach, while functional, resulted in multiple script tags and duplicate iframe elements. This duplication not only cluttered the output but also negatively impacted performance by loading scripts multiple times.

The workaround for this would be to manually hoist any common scripts and maybe load them when they weren't needed by any components.

With React 19 we now have a more effective method. This involves directly placing the script tag within the React component's return statement. This approach ensures that React handles the script loading, avoiding the duplication of script tags.

By implementing the script tags this way, the loading initiator becomes React DOM, which efficiently manages script loading and deduplication. This setup prevents multiple requests for the same script when the component is rendered multiple times, enhancing the overall application performance.

Furthermore, directly embedding the script tag simplifies the code, making the component cleaner and more maintainable.

Transcript

[00:00] We have an XPost here, XPost here that will allow us to share this whole page or share a specific ship. And this is working because of this ShareOnX component that we've got. And that ShareOnX component is going to use a useEffect to dynamically add the XWidget JavaScript stuff here. And we're doing this because we want to encapsulate all of the logic around this share on X component inside of that component. And this works out okay, like it technically is functioning, but If you take a look at the output, we have two script tags in addition to the iframes that those script tags create.

[00:35] And if we go over to the network, we'll notice we were loading the X widget in two different places, two different times, and all of the things that those widgets are doing are going to have to run twice. So It's not good, not good at all. And so what we can do instead is simply render the script tag and React will take care of all this for us. So we do still want to load the widgets here, so we're going to leave that in place, but we can get rid of that ref. We can add a script tag directly in our component, async, pointing to the widget, all of that works just fine.

[01:07] And now if I save, you'll notice it's still working and we're only loading one of them. And another thing that's kind of interesting is that the script tag doesn't show up in here at all. Going over here to the Network tab, we'll see that the initiator is React DOM. And so React is going to be managing not only loading the script for us but also deduping so that if we're rendering multiple of these components, which of course we are, it doesn't end up requesting that same JavaScript file again, making our applications more performant. And take a look at this code, a lot simpler as well.

[01:41] So that is rendering the script tag directly in your components.