How to load and use functions from a js script?

I am loading an external js file on aReact Next js page.
How to access the function (FooInit) of init.js?

export default function Home() {
  useEffect(() => {
    FooInit() // how to access FooInit?
  }, [])

  return (
    <>
      <Script beforeInteractive src="https://foo.boo/js/init.js"
      />
    </>
  )
}

To access the FooInit function from the external JavaScript file in your React Next.js component, you can follow these steps:

• Make sure the external script has loaded before calling the function.
  You can use the onLoad event handler of the Script component.
• Access the FooInit function from the window object since it's a global
  function.

Here's an example implementation:

import React, { useEffect } from 'react';
import Script from 'next/script';

export default function Home() {
  useEffect(() => {
    if (typeof window !== 'undefined' && window.FooInit) {
      window.FooInit();
    }
  }, []);

  const handleScriptLoad = () => {
    if (typeof window !== 'undefined' && window.FooInit) {
      window.FooInit();
    }
  };

  return (
    <>
      <Script
        beforeInteractive
        src="https://foo.boo/js/init.js"
        onLoad={handleScriptLoad}
      />
    </>
  );
}

In this example, the handleScriptLoad function will be called once the external script has loaded. Inside this function, we check if the FooInit function is available in the window object and call it if it exists. We also do the same check and call in the useEffect hook for cases when the script is already loaded and cached by the browser.

By following these steps, you can successfully access and call the FooInit function from the external JavaScript file within your Next.js React component.