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>

Just instantiate the class and export it at the top level of one of your modules. For example:

./First.jsx:

// class UtilityClass {/* ...*/}

export const utilityClass = new UtilityClass();

export function ReactComponent () {
  const doSomething = () => {
    return utilityClass.doingSomething();
  };
}

Then, in every other module where you want to use it (in other components, etc.), just import and use it:

./Second.jsx:

import {utilityClass} from './First';

export function SecondReactComponent () {
  const doSomething = () => {
    return utilityClass.doingSomething();
  };
}

One aspect is performance: if you write a component to display the date like you did above, you can mark it with PureRenderMixin, as the rendered output relies only on the the props. This might speed up the rendering a bit, as the formatting only needs to be done when the date changes.

From clean code point of view, I would either write a component or use a non-react utility function that just formats the date to a string - no need to couple the date formatting and dom elements. Something like:

function formatDate(dateValue){
    if(dateValue == null)
        return ""
    return new Date(dateValue).toLocaleDateString()
}