I follow the approach of creating libraries for cases like this in my applications, and so far this works pretty well for me.

In this case, I would create a new module, e.g. {ComponentRoot}/lib/user.js which exports a function getFullName(user) or possibly getFullName(firstName, lastName, country), depending the circumstances.

Now it is just a matter of importing the module where you require the functionality, no global functions needed:

import React from 'react'
import {getFullName} from '../lib/user'

const Title = ({user}) =>
    <div>
        {getFullName(user)}
    </div>

We place our library folder on the same level as the components folder etc., but whatever works best for you should do.

Utils.js with latest Javascript ES6 syntax

Create the Utils.js file like this with multiple functions, etc

const someCommonValues = ['common', 'values'];
    
export const doSomethingWithInput = (theInput) => {
   //Do something with the input
   return theInput;
};
    
export const justAnAlert = () => {
   alert('hello');
};

Then in your components that you want to use the util functions, import the specific functions that are needed. You don't have to import everything

import {doSomethingWithInput, justAnAlert} from './path/to/Utils.js'

And then use these functions within the component like this:

justAnAlert();
<p>{doSomethingWithInput('hello')}</p>

So, first of all, your assumption that multiple imports means multiple script executions is probably not true. I just tried it in Node JS and it seems like the re-imported modules were not ran again.

However, you can avoid multiple resource requests by caching the result in a service module. Here's a simple example on stackblitz. The service module only contains a function getData which returns either a promise issuing a request (which also caches the received data) or directly resolves to cached data (if they exist).

    // log this everytime the script is being executed
console.log('get-data.js module being executed');

// just an example
const resourceUrl = 'https://raw.githubusercontent.com/bahamas10/css-color-names/master/css-color-names.json';

let cachedData = null;

const getData = () => {
    if (cachedData === null) {
        console.log('get-data: requesting data');
        return fetch(resourceUrl, {})
        .then(response => {
            cachedData = response.json();
            return cachedData;
        });
    } else {
        console.log('get-data: returning cached data');
        return Promise.resolve(cachedData);
    }
};

export { getData };

In the example, getData is getting executed in an interval every 5s. As you can see though from the log statements only the first call results in a request for fresh data; otherwise the cached data are being served.

I'm also importing getData twice (once in "index.js" and once in "header.js") but the console.log statement in "get-data.j" is only getting executed once. So it's very likely not being executed again after the first import.

If you want to get more fancy, there are a couple of other—arguably more complicated—ways to implement a "global" utility function. For example:

• Redux middleware, Redux async middleware
• Dependency injection