Helpers in stateless functional components

Question

With the introduction of Stateless functional components in react we have multiple ways to add helper methods to our component. What is the defined standard practice in regards to helper functions?

The helper-functionis not indended to be a general utility function. (which means it is only used for this specific component)

Place them inside the component-function?

export const myComponent = (props) => {
    const myHelper = (value) => {
        // Insert logic
    };       

    return <div>{myHelper(props.mystate.value)}</div>;
};

Place them outside the function, but in the same file?

const myHelper = (value) => {
    // Insert logic
};

export const myComponent = (props) => {    
    return <div>{myHelper(props.mystate.value)}</div>;
};

Or is there an alternative way that is commonly used?

Answer 1

If you put the helper function inside the component function, everytime the component function gets executed, it will create a new instance of the helper function and after the function was executed the instance possibly gets garbage collected. So typically I would put it outside.

Of course there are exceptions, if you use an arrow function, you might need the lexical scope and therefor put it inside the component function, but if it's a pure function, I would say it should go outside.

Answer 2

If you intend to reuse the helper function, put it outside the stateless component function, either in same file or another, and export it:

export const myHelper = (value) => {
    // Insert logic
};

Otherwise, it's up to you to decide - whatever makes sense to keep things organized.

Answer 3

You could do something like this, if you want to keep your stateless component pure:

const helpers = { helper: text => text.toUpperCase() }

const makeGreeter = helpers => props => <div>helpers.helper(props.greet)</div>;
const greeter = makeGreeter(helpers);
export default greeter;

This way, your component is a closure encapsulating its own helpers and it has predictable behavior.

As a note: If you modify helper, and you could, because objects are mutable, greeter wouldn't be a pure function.