React has gotten a little funny of late – a few years ago, it was normal to embrace the Object-Oriented paradigm, writing each component as a class and doing lots of this-binding.

Today, however, hooks and functional components have taken over React, and with it, a style of programming unusual for front-end frameworks is growing in popularity: Functional Programming.

This programming style has been in use for many years: Lisp, Haskell, Clojure, and OCaml are all established, though mainly out of the mainstream, languages with a rich history and broad application. Thinking ‘functions are first-class citizens’ sounds strange, especially to new JavaScript developers who have spent most of their time in Python or Java that come from an Object-Oriented perspective.

That’s why in this post, we will go over the basics of Functional Programming, how we compose functions, a handy implementation of a ‘pipe’ function that will compose functions, the process of currying and functions-as-return-value, and how we can use these concepts in React using Higher-Order Components.