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

Currying

Curried function definition

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

Let’s start with a common scenario in React to demonstrate this. We have a controlled component with a single input field.

Controlled component

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.

Partial application of a curried function

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

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?

Infinite array runtime error

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

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.

Short-circuit evaluation example

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

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.

Using the map function to display array elements

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.

ESLint error produced by eslint-plugin-no-loops

After 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!

Recent CS Grad in London