Correct way to share functions between components in React

Question

I have multiple components which all need to do the same thing. (A simple function which maps over their child components and does something to each one). At the moment I am defining this method in each of the components. But I only want to define it once.

I could define it in the top level component and then pass it down as a prop. But that doesn't feel quite right. It is more a library function than a prop. (It seems to me).

What is the correct way of doing this?

Answer 1

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>

Answer 2

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;

Answer 3

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

1. Create a Helpers.js file:

export function myFunc(){ return this.state.name; //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(){ super() this.myFunc = myFunc.bind(this) }

4. In your render function use it:

   `render(){

   {this.myFunc()} }`

Answer 4

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)

util/FetchUtil.js

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({});

Source: https://reactjs.org/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactcreateclass

Component (which reuses FetchUtil)

components/App.jsx

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) {
    super(props);
    this.state = {categories: []};
  }

  componentWillMount() {
    window
      .fetch('/rest/service/v1/categories')
      .then(FetchUtil.handleError)
      .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} />
        </Grid>
      </Grid>
    );
  }
}

export default App;

Answer 5

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...

<SomeItem
    ref={(instance) => {this.childA = instance}}
/>

<SomeOtherItem
    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.

Answer 6

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.

Answer 7

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).

Answer 8

Shouldn't you use a Mixin for this ? See https://facebook.github.io/react/docs/reusable-components.html

Although they are falling out of favour see https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750

Might be useful