Script tag wrapped

ComponentScriptTag.jsx

import React from "react";
import ReactDom from "react-dom";

class App extends React.Component {
  onClick = () => {
    this.setState({clicked: "sure"});
  }

  onLoaded = () => {
    console.log("loaded");
  }

  render() {
    return (
      <div>
        <Script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.7.5/immutable.js" onLoad={this.onLoaded}>
          <View />
        </Script>
      </div>
    );
  }
}

class View extends React.Component {
  render() {
    const foobar = Immutable.Map({foobar: "foobar"}).toJS();
    return (
      <div> something: {foobar.foobar} </div>
    );
  }
}

class Script extends React.Component {
  state = {
    loaded: false
  }

  shouldComponentUpdate(nextProps, nextState) {
    return nextState.loaded;
  }

  componentDidMount() {
    const {src, onLoad} = this.props;

    this.loadScript(src)
      .then(() => {
        if (onLoad) {
          onLoad();
        }

        this.setState({loaded: true});
      });
  }

  loadScript = (src) => {
    return new Promise(function (resolve, reject) {
      let script = document.createElement('script');
      script.src = src;
      script.onload = resolve;
      script.onerror = reject;
      document.head.appendChild(script);
    });
  }

  render() {
    if (this.state.loaded === false)
      return null;

    return this.props.children;
  }
}

ReactDom.render(<App />, document.getElementById("app"));