title: Wait for external script to load before the React component
body: <p>I have a NextJS app and the page structure loosely looks like this:</p>
  
  <pre><code>&lt;Head&gt;
  &lt;Navigation&gt;
  &lt;Page&gt;
  &lt;Footer&gt;
  </code></pre>
  
  <p>I have a DTM script that I need to load in the <code>&lt;Head&gt;</code> component and then there are tags that I am firing in the <code>&lt;Page&gt;</code> component. But the problem is, the tags in <code>&lt;Page&gt;</code> starts firing before the DTM script get's loaded onto the page. </p>
  
  <p>So, is there a way to let the DTM script in the <code>&lt;Head&gt;</code> tag load first before the <code>&lt;Page&gt;</code> component loads? I was looking to use "componentwillmount" but it's being deprecated. </p>
  
  <p>Can someone please advice how can I tackle this issue?</p>