title: Dynamically loaded CSS in React not working intermittently
body: <p>I've made a "pluggable" system in React, which dynamically runs tiny "apps" which consist of an HTML, JS and CSS file. The HTML and CSS files are optional. They intercommunicate through the window object.</p>
  
  <p>I'm dynamically loading the three files here, but I'm having the problem that my CSS classes fail to work 1/5 of the time. They don't even seem to get parsed since I cannot manually apply them in Chrome devtools either.</p>
  
  <p>I've tried using both <code>link</code> and <code>style</code> tags to load the CSS, but both have the same problem. Even a 1000ms setTimeout between the CSS and HTML injection doesn't help. CSS parsing consistently fails roughly every third time the component mounts..</p>
  
  <p>I've tried Chrome, Firefox, and Safari. Same problem in all three.</p>
  
  <p>I'm kind of stuck, I'd love to get some feedback on this..</p>
  
  <p><strong>Here is a video of the issue: (the "app" here is a simple SVG file viewer) <a href="http://www.giphy.com/gifs/dvHjBBolgA1xAdyRsv" rel="nofollow noreferrer">http://www.giphy.com/gifs/dvHjBBolgA1xAdyRsv</a></strong></p>
  
  <pre><code>  const windowInitialized = useElementBlockInitialization({
      id: elementBlockID,
      payload: payload,
      onResult: onResult
    });
    const [styleAndHTMLInitialized, setStyleAndHTMLInitialized] = useState(false);
  
    // after some properties are set in Window, run this effect
    useEffect(() =&gt; {
      let gettingStyleAndHTML = false;
      if (windowInitialized) {
        gettingStyleAndHTML = true;
        getStyleAndHTML().then(({ styleBody, htmlBody }) =&gt; { // async function that fetches some html and css as a string (both potentially null)
          if (gettingStyleAndHTML) {
            if (styleBody) {
              const styleElement = document.createElement('style');
              styleElement.type = 'text/css';
              styleElement.appendChild(document.createTextNode(styleBody));
              document.head.appendChild(styleElement);
            }
            if (htmlBody) {
              // containerElement is a ref
              containerElement.current.innerHTML = htmlBody;
            }
            setStyleAndHTMLInitialized(true);
          }
        });
      }
      return () =&gt; {
        gettingStyleAndHTML = false;
      };
    }, [windowInitialized]);
  
    // after the CSS and HTML is injected, run this hook
    useEffect(() =&gt; {
      if (styleAndHTMLInitialized) {
        const scriptElement = document.createElement('script');
        scriptElement.setAttribute('data-eb-container-id', containerElementID);
        scriptElement.setAttribute('data-eb-id', elementBlockID);
        scriptElement.setAttribute('src', makeElementBlockBaseURL() + '.js');
        document.head!.appendChild(scriptElement);
  
        return () =&gt; {
          scriptElement.remove();
        };
      }
      return;
    }, [styleAndHTMLInitialized]);
  
    // only render the container once the window properties are set
    return windowInitialized ? (
      &lt;Container ref={containerElement} id={containerElementID} /&gt;
    ) : null;
  </code></pre>