Functional Programming Concepts Used in React

React is a popular library for creating web apps and mobile apps.

In this article, we’ll look at how to use functional programming features in our React app.

First-Class Objects

One big functional programming feature included with JavaScript is that functions are objects like everything else.

This way, we can set them as property values, assign them variables, and pass them in as arguments.

For instance, if we have:

const add = (a, b) => a + b;

Then we can create a function by writing:

const log = func => (...args) => {
  console.log(...args);
  return func(...args);
}

Then we can use log as follows:

const add = (a, b) => a + b;
const logAdd = log(add);
logAdd(1, 2);

And we can use logAdd to create it.

log is a higher-order function since it takes a function as an argument.

It also returns a function that can be called with its own arguments.

We pass in the add function to log to return a function.

Then we can call it by passing in arguments to the returned function.

Pure Functions

Pure functions are functions that don’t commit side effects and just return something.

This means they don’t change anything outside the function.

Impure functions are harder to debug because they change things outside a function.

For instance, if we have:

const add = (a, b) => a + b

Then that’s a pure function since it only returns something and does nothing else.

On the other hand, the following isn’t a pure function:

let sum;
const add = (a, b) => {
  sum = a + b;
  return sum;
}

since it changes the value of sum which is outside the function.

Immutability

Immutable data is another functional programming feature.

It’s good because it reduces the chances of surprise changes to data.

Since we can’t accidentally change data, we don’t have to worry about surprises.

Some things change data. For instance, the push method of an array changes the existing array.

For example, we can write:

arr.push(3)

Then we add 3 as the last value of arr .

On the other hand, if we use the spread operator, then we don’t change the existing array:

const newArr = [...arr, 3];

We assigned a new array with the spread values of arr and 3 to newArr .

Currying

Currying is the process of converting a function that takes multiple arguments into a function that takes one argument at a time.

For instance, if we have the following:

const add = (a, b) => a + b

We write:

const add = a => b => a + b

With the 2nd add function, we call it by writing:

const sum = add(1)(2);

It’s a convenient way to reuse the function that’s returned by add multiple times.

So we can write:

const addOne = add(1);
const sum1 = addOne(2);
const sum2 = addOne(3);

Composition

The composition is the concept of combining multiple functions to do more advanced or complex things.

For instance, we can have:

const add = (a, b) => a + b
const cube = x => x ** 3

Then can combine them by writing:

const cubed = cube(add(1, 3));

We call add and then we call cube on the returned result.

Functional Programming and React

We use functional programming to React to nest components, and also for creating higher-order components.

Higher-order components return a new component after passing in a component into them.

Also. hooks can be composed.

We can pass a function into the returned function in the useState hook to update an existing value with the new one for example.

Conclusion

Functional programming is important in React projects.

We’ll use it a lot to create nested components, higher-order functions, hooks, and more.