How to use Sisense.js in React [Linux]
Step-by-Step Guide:
Step 1:
Understand the Difference Between React and Vanilla JS
React doesn’t directly execute scripts inside JSX because it manages a virtual DOM.
When you add a <script> tag in React, it may not run as expected. React’s rendering process can remove or re-render the element before the script executes.
Sisense.js, on the other hand, was designed for traditional web pages, where scripts can manipulate the DOM freely. That’s why, in React, we must load Sisense.js dynamically and control its initialization manually.
Step 2:
Dynamically Load Sisense.js
To start, create a helper function that loads external scripts into the page <head>. This ensures the script is added only once and resolves when it’s ready to use.
This helper will guarantee the script is only loaded once. The function works as a promise, so it will wait until the script is fully loaded before continuing, and it avoids duplicate <script> tags when components re-render.
The Sisense Class will be attached to the window of the React application so you can access it.
Step 3:
Initialize Sisense Inside useEffect
Next, use your loadScript helper inside a React useEffect hook.
React components re-render frequently, so this ensures Sisense.js initializes only once when the component mounts.
Important: You still need a <div> with the ID sisenseApp for Sisense.js to attach itself.
Inside the useEffect the script loads once when the component mounts. This grants only one injection; also, the useRef values persist between renders, preventing duplicate initialization.
Step 4:
Prevent Duplicate Widgets
Without proper control, Sisense widgets may duplicate between renders or re-initializations.
To avoid this, the example above uses useRef to store both the Sisense app instance and the widget instance.
Before reloading, it checks if those references already exist:
and
That ensures that the script will load only once, the Sisense app connects only once, and the widget renders only once (no duplicates even if React re-renders).
Why This Approach Works in React
This pattern aligns with React’s lifecycle and virtual DOM behavior, ensuring a lifecycle-friendly approach where the script loads only when the component mounts. It’s also re-render safe, as the useRef hook keeps Sisense instances stable across renders. Additionally, built-in checks prevent duplicate widget creation, making the solution both reliable and reusable across multiple dashboards or widgets with minimal adjustments.
Conclusion:
Integrating Sisense.js into a React application requires managing when and how the script is loaded, since React doesn’t execute scripts directly in JSX.
By dynamically injecting Sisense.js and controlling its initialization using useEffect and useRef, you can safely embed Sisense dashboards and widgets without duplication or race conditions.
This approach is React-friendly, scalable, and reliable. Making it a solid base for embedding Sisense.js using modern hooks from React..
References/Related Content
A Fully Demo Using Sisense.js in React - Sisense
Other Way to Implement Using Older React Version - Sisense
Implement Sisense.js in Standard React Application - Sisense
Learn About Sisense.js Limitations - Sinsense
UseEffect Documentation - React
UseRef Documentation - React
Disclaimer: This post outlines a potential custom workaround for a specific use case or provides instructions regarding a specific task. The solution may not work in all scenarios or Sisense versions, so we strongly recommend testing it in your environment before deployment. If you need further assistance with this, please let us know.
