Skip to main content

React Component Curry

· 2 min read
John Reilly
John Reilly
OSS Engineer - TypeScript, Azure, React, Node.js, .NET

Everyone loves curry don't they? I don't know about you but I'm going for one on Friday.

When React 0.14 shipped, it came with a new way to write React components. Rather than as an ES2015 class or using React.createClass there was now another way: stateless functional components.

These are components which have no state (the name gives it away) and a simple syntax; they are a function which takes your component props as a single parameter and they return JSX. Think of them as the render method of a standard component just with props as a parameter.

The advantage of these components is that they can reduce the amount of code you have to write for a component which requires no state. This is even more true if you're using ES2015 syntax as you have arrow functions and destructuring to help.Embrace the terseness!

Mine's a Balti​

There is another advantage of this syntax. If you have a number of components which share similar implementation you can easily make component factories by currying:

function iconMaker(fontAwesomeClassName: string) {
  return (props) => <i className={`fa ${fontAwesomeClassName}`} />;
}

const ThumbsUpIcon = iconMaker('fa-thumbs-up');
const TrophyIcon = iconMaker('fa-trophy');

// Somewhere in else inside a render function:

<p>
  This is totally <ThumbsUpIcon />
  .... You should win a <TrophyIcon />
</p>;

So our iconMaker is a function which, when called with a Font Awesome class name produces a function which, when invoked, will return a the HTML required to render that icon. This is a super simple example, a bhaji if you will, but you can imagine how useful this technique can be when you've more of a banquet in mind.