Introduction
Some use cases require loading a specific Javascript script conditionally, this article will demonstrate how to dynamically load a javascript file in React once a particular condition is met.
How To Dynamically load a JavaScript file in React
Consider we have the requirement to load the script only once the user is logged in.
In this case, once we have the user details identified, we can fire the loading script functionality.
Example
import React, { useState, useEffect } from 'react';
import './style.css';
export default function App() {
const [user, setUser] = useState(false);
const [scriptLoadingState, setScriptLoadingState] = useState('IDLE');
useEffect(() => {
if (user) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://www.google-analytics.com/analytics.js';
script.onload = function () {
setScriptLoadingState('LOADED');
};
script.onerror = function () {
setScriptLoadingState('FAILED');
};
document.body.appendChild(script);
}
}, [user]);
return (
<div>
<button
onClick={() => setUser(true)}
style={{ width: '200px', height: '30px', fontSize: '16px' }}
>
Login
</button>
<h2>
Script Loading State:{' '}
<span
style={{
color:
scriptLoadingState === 'IDLE'
? 'grey'
: scriptLoadingState === 'LOADED'
? 'green'
: 'red',
}}
>
{scriptLoadingState}
</span>
</h2>
</div>
);
}
In the above example, we have two component state variables:
- user: a boolean flag to simulate the user logged-in state.
- scriptLoadingState: a string value that reflects the script loading state.
What happens next, is that once the user opens the App, the script initially won’t be loaded, until the user clicked on the Login button, which will update the user to true, then we’ve used the useEffect
hook to listen for the user state change, once that happens, the useEffect
hook will be executed, and the following logic will be executed:
- An element of type
script
is created. - The
script
type is set totext/javascript
. - Scrip
src
is set to the google analytics script. - Callback functions are attached to the events
onload
/onerror
respectively, to update thescriptLoadingState
variable. - Then, we do append the
script
tag into the webpagebody
.
Now, navigating to the browser, we can see initially the script loading state is IDLE, and there’s no request in the console Network tab issued to fetch the google analytics script, as shown below:

By clicking on the Login button, we can see the script loading state is updated to LOADED, and an HTTP request is issued to GET the google analytics script, as shown below:

That’s it! And as always happy coding.
Photo from Unsplash.