Why You Should Use Arrow Functions in React

The more time I have to work with Javascript, the more I am enjoying the language itself. When I was first learning Javascript a few weeks ago, we touched on arrow functions a bit. I understood how to write them and had some idea of what they did. However, it wasn't until we started getting into react that I really learned what arrow functions can do and why they are so advantageous.

What are Arrow Functions

An arrow function is a type of function syntax in Javascript that on first glance appears to be a shorthand function expression.

"Function Expression"

let foo = function foo(bar) {return bar + 1}
--------------------------------
"Arrow Function Expression"

let foo = bar => bar + 1

Before we touch on the lack of a return in our arrow function let's just compare the two function expressions. Both functions will take 1 argument and then return that argument + 1.

As you can see, the arrow function is a shorter way of writing a function expression. One of the nicer things about arrow functions is their ability to further compact their syntax. In the above function, I neither wrapped my argument in parentheses nor provided a return statement.

Both implicit returns and optional parentheses for single argument functions are some nice syntactic sugar for our arrow functions. Even though we do not need to provide parentheses for one argument functions, we will need parentheses if our function takes any more or any less arguments.

Why are Arrow Functions Important

One of the most important parts about arrow functions is another implicit action that is not immediately obvious from looking at an arrow function. That is the preservation of the 'this' keyword.

With a standard function expression or declaration in Javascript, the definition of 'this' is dependent on where the function was called. As a result in order to ensure that 'this' is acting on the correct object or class you may need to use the bind method to ensure the 'this' keyword maintains the correct reference.

let foo = {
   bar: 50,
   getBar: function() {
      return this.bar
   }
}

let unboundGetBar = foo.getBar
console.log(unboundGetBar())
//=> undefined

let boundGetBar = unboundGetBar.bind(foo)
console.log(boundGetBar())
//=> 50

We have to use the bind method to tell getBar what 'this' should refer to. When getBar is not bound in the first example, it is inheriting the definition of 'this' from the global scope and as a result the console log returns undefined. With an arrow function, we do not have to worry about binding 'this' because an arrow function does not have its own 'this'. Because of this, an arrow function will inherit 'this' from its enclosing scope.

Arrow Functions in React

In React this can be a bit of an issue. When writing a class component, all of the functions that you write out will need to be bound to the constructor so that the 'this' keyword will behave in the appropriate manner to allow you properly render your data.

This can look a bit messy if you need to use the 'this' keyword in several different functions. At this point, the arrow function swoops in to save the day.

import React from 'react';

export default class App extends Component {
   constructor() {
      super()
         this.exampleOne = this.exampleOne.bind(this)     
   }

   exampleOne() {
      return this
   }

   exampleTwo = () => {
      return this
   }

   exampleThree() {
      return this
   }

   render() {
      return (
         <h1>{exampleOne()}</h1>
         <h1>{exampleTwo()}</h1>
         <h1>{() => exampleThree()}</h1>
      )
   }
}

Example three will be able to return this without being bound in the constructor because the arrow function expression allows it to inherit the 'this' definition from the App constructor. As a result this allows us to write React functions without having to explicitly bind this. There are other ways to bind this, another way to preserve 'this' is to write an anonymous function to invoke your unbound function.

In the render method, we have an example of preserving 'this' using an anonymous function. We used an anonymous function to ensure that 'this' references the appropriate information. Although all of the three examples above are ways to ensure that we maintain the correct definition of 'this', the arrow function lets you write the least amount of code to accomplish the same goal.

As long as you keep an eye on the definition of the 'this' keyword you will be fine but if you want to avoid making the mistake of forgetting to bind or anonymously call a function I would recommend using an arrow function. Arrow functions may be newer and look a bit different but they can be a useful tool in certain situations.

References

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind
• https://reactjs.org/docs/components-and-props.html