I am new to UI development.So just had design question and wanted to get some thoughts if the approach I am taking is correct.

Use Case: I have to conditionally load a large third party Marketing JS file. And then use this JS API's in 2 of my components.

Design I have:

1. Create Provider Component just to load this JS file and isScriptLoaded state to capture if it's 'loaded' or 'failed'. NOTE: There could be more props besides isScriptLoaded in future that I might need to flow down to children.

2. Create a render less i.e.render => (return null) Child-1 Component that would just make an API call if isScriptLoaded is 'loaded' to redirect the page based on response.

3. Create Child-2 Component that would just make an API call if isScriptLoaded is 'loaded' , to load dynamic content on current page.

Does above design look ok ?

NOTE: I cannot lazy load as it's recommended by vendor to load script right in the beginning to avoid bad user experience.

Thanks!