What's The React Way To Handle Shared Helper Functions?

Question

I'm somewhat new to React, and I'm trying to figure out where the best place is to put various functions that need to be used across my app.

For example, I have a function some code that returns a document_type key based on the document extension that is passed to it.

I also have a romanize function that takes a number and turns it into a roman numeral.

I also have a set of functions that are grouped around making API calls and parsing the response.

All of these need to be accessed in various places across the app. It's my understanding that the "React Way" is composability through component creation, but it's hard for me to see how these would make sense as components since components have to return JSX I believe.

Answer 1

You could create e.g. a utils file, export your helpers from there, and import them when needed:

// utils.js

export function romanize(str) {
  // ...
}

export function getDocumentType(doc) {
  // ...
}

// App.js

import { romanize } from './utils';

Answer 2

There are some situations where you will need a helper functions like these and setting those up in a util or helpers folder is a great way to handle that.

However, to take full advantage of React, I'd suggest thinking about if there is a way you could make a shared component instead. For functions such as your romanize function, you can make a React component that formats the number you pass it and displays it in a span. This is the same approach react libraries use, for example the react-intl library recommends using their <FormattedMessage /> component instead of their formatMessage helper function.

For example,

const RomanNumeral = ({ number }) => {
    // romanize logic here
    return <span>{result}</span>
}

Then you can use it like so:

<RomanNumeral number={5} />