Accepted answer

If you use something like browserify then you can have an external file i.e util.js that exports some utility functions.

var doSomething = function(num) {
 return num + 1;

exports.doSomething = doSomething;

Then require it as needed

var doSomething = require('./util.js').doSomething;


Shouldn't you use a Mixin for this ? See

Although they are falling out of favour see

Might be useful


Sounds like a utility function, in that case why not put it in a separate static utility module?

Otherwise if using a transpiler like Babel you can make use of es7's static methods:

class MyComponent extends React.Component {
  static someMethod() { ...

Or else if you are using React.createClass you can use the statics object:

var MyComponent = React.createClass({
  statics: {
    customMethod: function(foo) {
      return foo === 'bar';

However I don't advise those options, it doesn't make sense to include a component for a utility method.

Also you shouldn't be passing a method down through all your components as a prop it will tightly couple them and make refactoring more painful. I advise a plain old utility module.

The other option is to use a mixin to extend the class, but I don't recommend that as you can't do it in es6+ (and I don't see the benefit in this case).


Another solid option other than creating a util file would be to use a higher order component to create a withComponentMapper() wrapper. This component would take in a component as a parameter and return it back with the componentMapper() function passed down as a prop.

This is considered a good practice in React. You can find out how to do so in detail here.


I'll show two styles below, and you'll want to choose depending on how much the components' logic relate to each other.

Style 1 - Relatively related components can be created with callback references, like this, in ./components/App.js...

    ref={(instance) => {this.childA = instance}}

    ref={(instance) => {this.childB = instance}}

And then you can use shared functions between them like this...

this.childA.investigateComponent(this.childB);  // call childA function with childB as arg
this.childB.makeNotesOnComponent(this.childA);  // call childB function with childA as arg

Style 2 - Util-type components can be created like this, in ./utils/time.js...

export const getTimeDifference = function (start, end) {
    // return difference between start and end

And then they can be used like this, in ./components/App.js...

import React from 'react';
import {getTimeDifference} from './utils/time.js';

export default class App extends React.Component {
    someFunction() {
        console.log(getTimeDifference("19:00:00", "20:00:00"));

Which to use?

If the logic is relatively-related (they only get used together in the same app), then you should share states between components. But if your logic is distantly-related (i.e., math util, text-formatting util), then you should make and import util class functions.


Here are some examples on how you can reuse a function (FetchUtil.handleError) in a React component (App).

Solution 1: Using CommonJS module syntax

module.exports = {
  handleError: function(response) {
    if (!response.ok) throw new Error(response.statusText);
    return response;

Solution 2: Using "createClass" (React v16)


const createReactClass = require('create-react-class');

const FetchUtil = createReactClass({
  statics: {
    handleError: function(response) {
      if (!response.ok) throw new Error(response.statusText);
      return response;
  render() {

export default FetchUtil;

Note: If you are using React v15.4 (or below) you need to import createClass as follows:

import React from 'react';
const FetchUtil = React.createClass({});


Component (which reuses FetchUtil)


import Categories from './Categories.jsx';
import FetchUtil from '../utils/FetchUtil';
import Grid from 'material-ui/Grid';
import React from 'react';

class App extends React.Component {
  constructor(props) {
    this.state = {categories: []};

  componentWillMount() {
      .then(response => response.json())
      .then(categories => this.setState({...this.state, categories}));

  render() {
    return (
      <Grid container={true} spacing={16}>
        <Grid item={true} xs={12}>
          <Categories categories={this.state.categories} />

export default App;


If you want to manipulate state in helper functions follow this:

  1. Create a Helpers.js file:

    export function myFunc(){ return; //define it according to your needs }

  2. Import helper function in your component file:

    import {myFunc} from 'path-to/Helpers.js'

  3. In your constructor add that helper function to the class

    constructor(){ this.myFunc = myFunc.bind(this) }

  4. In your render function use it:

    render(){ <div>{this.myFunc()}</div> }


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 = () => {

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/file'

And then use these functions within the component like this:


Related Query

More Query from same tag