Functional Techniques with React
With ES6, it’s much easier to use certain functional techniques in React. This article will describe a few ways you can incorporate these into your app. All code snippets come from a complementary GitHub repo which demonstrates these techniques in the context of a simple React project: https://github.com/rossmmurray/FunctionalReact
Currying and Partial Application
With arrow functions, we have a new elegant way to write functions with multiple arguments, plus an interesting use case for them.
Currying
Ignore the body of the below function for a second; notice the two parameters separated fat arrows on line one: animal and event. This function (essentially) takes two arguments, performs some state update then logs data from the event parameter.
However, this syntax defines a curried function, and technically, this function only takes a single argument (animal). It then returns a new function which takes another single argument (event). We can call it like this: createAnimal(someAnimal)(someEvent). But why would we ever want to do this… ?
Partial Application
The more significant reason to use currying is that we can make use of partial application. The idea behind it is to supply only some of the required arguments to a function. This returns a new function requiring only the remaining arguments.
Let’s start with a common scenario in React to demonstrate this. We have a controlled component with a single input field.
Here, we pass our handleChange function to the onChange event handler. React programmers know that handleChange will be called with an event argument. However, what if we want to pass another argument?
Well, we can partially apply a curried function such as createAnimal! In the below snippet we call createAnimal with just a single argument.
This will return a new function that just accepts the remaining event argument. It can then be passed to the onClick event handler.
Exploiting Short-circuit Evaluation
Lazy evaluation is a concept in functional programming that means that code is only evaluated when necessary. Consequently, expressions using boolean operators can “short-circuit” if the first argument determines the value of the whole expression. As you may have guessed, this can provide great performance benefits. Technically, JavaScript is a strict (not lazy) language but it does have short-circuit evaluation for boolean operators.
To demonstrate the concept, let’s think about what would happen if we tried to output {true && Array(1 / 0)} in a .jsx file? We would get a runtime error, right? Yes, you would get something like the error shown below because an Array cannot have an infinite number of elements. However, what if we wrote {false && Array(1 / 0)}? The page (maybe unexpectedly) displays normally with no errors. How can this be?
Since the “&&” expression is provided with false as the first argument, Javascript knows that the whole expression can only ever evaluate to false, regardless of what the second argument is. Therefore, it doesn’t bother evaluating the second argument.
A Short-circuit Use Case
Do you find yourself using lots of ternary operators with null at the end? There ought to be a way to be a cleaner way to write this… and there is!
Below, we have an array of strings called animals which is provided by props. We want to display a few relevant emojis if the array contains certain string values.
The code snippet shows both ways to do this. Exploiting short-circuit evaluation by using the && operator instead of the ternary one saves exactly four characters (big wow, I know). More importantly, it signals to the reader exactly what you’re trying to do without having to read the third argument at the end of the line. This benefit would be amplified when used with a longer, more complicated section of code.
Avoid Loops with map, filter and reduce… and Enforce it
Loops require an imperative style of programming — which means you must tell the program exactly how to perform an action, line by line. However, wouldn’t it be nice if we could just tell JavaScript what we want and not care how to do it?
Map, filter and reduce do just that. Often we want to display all the elements of an array to our page. There is very good content on how to use these functions in other articles so I have just included a very simple example of this below. Note that React requires a stable key value to be supplied when displaying each element so that it can track them between re-renders.
If you have decided to avoid loops in your codebase, how can you enforce this rule? ESLint is currently the most popular linter for JavaScript and JSX but it does not have a loop banning rule built-in. Fortunately, there is an ESLint plugin called eslint-plugin-no-loops built by a Milan-based company called Buildo: https://www.npmjs.com/package/eslint-plugin-no-loops.
-plugin-no-loopsAfter installing the plugin and following the configuration instructions, errors like the one above will be shown if any type of loop is used across the project.
Now, try some of these techniques in a React app and give any feedback in the comments. Thanks!
