{
"path": "/posts/react-component-curry",
"site": "at://did:plc:yy3apqjlms24kso7ahn7lbmb/site.standard.publication/3mova7c4nho2b",
"tags": [
"react"
],
"$type": "site.standard.document",
"title": "React Component Curry",
"description": "React 0.14 introduces stateless functional components to reduce code for components where state isnt required, while also allowing for currying.",
"publishedAt": "2016-10-05T00:00:00.000Z",
"textContent": "Everyone loves curry don't they? I don't know about you but I'm going for one on Friday.\n\n\n\nWhen 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.\n\nThese 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.\n\nThe 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!\n\nMine's a Balti\n\nThere 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:\n\nSo 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.",
"canonicalUrl": "https://johnnyreilly.com/posts/react-component-curry"
}