React Arrow Functions: Benefits, Drawbacks, and Examples

In simple words, you write more minimal and shorter function syntax with the arrow function. It was first introduced in JavaScript ES6.

This method of JavaScript functions uses the equal (=) and greater than (>) symbols while expressing. Which together look like an arrow symbol (=>). That’s why this method is called the arrow function method.

You can work with functions in a simpler and straighter way with React Arrow functions. Which is very handy and provides flexibility when coding.

Generally, there is not much difference between the regular and arrow functions. Although there are some differences, we will discuss them later in this post.

Below is an example code syntax for regular and arrow functions:

//Creating a Regular Function
function regularFunction() {
    return console.log("Hello KingsCoder! I'm a regular function.");
}

//Creating an Arrow Function
let arrowFunction = () => console.log("Hello KingsCoder! I'm an arrow function.");

//Print out the text in the console
arrowFunction();
regularFunction();

Notice the code above: While regular functions require multiple lines to write, arrow functions are written in just one line.

Also, we have to write a return statement in a regular function. But in the arrow function, the return statement is the default. So there is no need to write the return keyword separately.

React Arrow Function Benefits:

React is basically a component-based frontend library. That is, each section of your front end is divided into smaller component structures. So it’s clear that the heart of React development is the components.

On the other hand, a component in the modern React app is created by functions. Although class-based components are also possible. But they are no longer the industry standard. So to follow the industry’s best practice you need to create functional components.

So since React operates on component structures. And to create components you need to create functions. That means you have to work with a lot of functions in React development. I mean seriously a lot.

Most of the time we have to work with functions and one of the most popular types is the arrow function. So let’s take a look at some of the benefits of the Arrow function.

Shorter Syntax

It’s true, we may know all the benefits of an arrow function. But almost everyone knows about one key benefit. That is, the syntax of arrow functions is shorter than that of traditional functions.

This results in a bit of a simplicity to write the code. Also, your React application’s code looks concise. And provides easy readability.

Below are examples of a traditional function component and an arrow function component in React:

import React from "react"

//Regular function component
function RegularComponent() {

  return <p>Hello KingsCoder! I'm a regular function component.</p>

}

//Arrow function component
const ArrowComponent = () => <p>Hello KingsCoder! I'm a arrow function component.</p>

//Export the output in the browser
function App() {

  return <>
    <RegularComponent />
    <ArrowComponent />
  </>

}

export default App

See in the above code, the syntax of the arrow function component is slightly shorter than that of the regular function component. “ArrowComponent” is defined in just one line.

Implicit Return State

In arrow functions, you get the benefit of an implicit return state.

Implicit return allows you to return something in a function without writing the return keyword.

You will get this facility only in the Arrow function. In normal traditional functions in React components, you have to use an explicit return state. That is, your return keyword must be written.

But if you create an arrow function component. Then writing the return keyword is not mandatory. But one thing in this case is that you have to define the arrow function in a single line.

If you use multiple lines in the arrow function. Or define a complex arrow function that requires multiple lines of code. Then writing the return keyword is mandatory.

In other words, to put it simply, you will get the implicit benefit in only a single line of arrow functions.

import React from "react"

//Arrow function with implicit return state
const ImplicitComponent = () => <p>Here is no need to write the return keyword.</p>

//Arrow function with explicit return state
const ExplicitComponent = () => {

  return <p>Here the return keyword is required.</p>

}

//Export the output in the browser
function App() {

  return <>
    <ImplicitComponent />
    <ExplicitComponent />
  </>

}

export default App

The return state is defined by default in the first component above i.e. “ImplicitComponent“. So there is no need to write the return keyword separately.

And return keyword should be written in the second component. This is an arrow function though. But since there are multiple lines instead of a single line, the return keyword has to be written.

Expressive Syntax

You can write more compiler and human-readable code with arrow functions when using higher-order functions.

This method is very effective especially when using higher-order functions like map, filter, and reduce.

Let’s see some examples:

//Create an array
const Array = [1, 2, 3, 4];

//Get map from array using a arrow function
const Map = Array.map((value) => value + 1);

//Get filter from array using a arrow function
const Filter = Array.filter((value) => value > 1)

//Add all the numbers from array using a arrow function
const Addition = Array.reduce((a, b) => a + b, 0)

//Export the output in the Browser
function App() {
    return <>
        <h2>This is Map: {Map.join(",")}</h2>
        <h2>This is Filter: {Filter.join(",")}</h2>
        <h2>This is Reduce: {Addition}</h2>
    </>
}

export default App

Above we have seen examples of the three most used higher-order function methods. You will understand a lot by running the code sample in your React development environment.

Also, if you look at the code, you will see that the syntax is written in a straightforward and minimally expressive way with the arrow function.

React Arrow Function Drawbacks:

So far we have seen several benefits of Arrow function. However, the Arrow function also has some limitations.

We should be well aware of the limitations. So that we can make better decisions about where to use arrow functions and where not to while working on React projects.

Lackings of This, Arguments, Prototype

While working on React applications, many times we have to work with this, arguments, or prototype properties. But you don’t get these benefits in Aero Function.

Because the arrow function has no this, arguments, prototype. Also, you cannot use a constructor in an Arrow function.

To use these types of features, you have to use traditional functions. Avoid the arrow function if you want to use the constructor and pass parameters.

Less Readability in Complex Functions

The best part of the Arrow function is the simple readability. But when you’re dealing with complex functions, the readability of arrow functions is often more difficult than traditional functions.

You can use the arrow function for simple and straight functions. In that case, you can shorten the syntax to just one line. However, if you have to write multiple lines or need more complex functions. Then writing traditional functions will be more effective.

React Component with Arrow Function

In React development we are usually used to using traditional functions. Most of the time we create our components using traditional functions.

But you can also create React components very easily with arrow functions. Let’s create a simple React component using the arrow function.

import React from 'react';

// Component using Arrow Function
const ArrowComponent = () => {
  return (
    <div>
      <h3>Hello, KingsCoder! I'm an arrow functional component.</h3>
    </div>
  );
};

//Component using one line Arrow Function
const OneLineArrowComponent = () => <h3>This is an one line arrow component.</h3>

//Output in the browsers using Arrow Function
const App = () => {
  return(
    <div>
      <ArrowComponent />
      <OneLineArrowComponent />
    </div>
  );
};

export default App;

The above shows the creation of two simple arrow function components ArrowComponent and OneLineArrowComponent. Two ways of the arrow function writing syntax are shown here.

Count Click with React Arrow Function

Let’s create a counter component using React hooks and arrow functions.

import React, { useState } from 'react';

//Counter Component with Arrow Function
const Counter = () => {

  // Using the useState hook to declare a state variable 'count' with an initial value of 0
  const [count, setCount] = useState(0);

  // Event handler arrow function to increment the count
  const HandleIncrement = () => {
    setCount(count + 1);
  };

  // Event handler arrow function to decrement the count
  const HandleDecrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={HandleIncrement}>Increment</button>
      <button onClick={HandleDecrement}>Decrement</button>
    </div>
  );
};

export default Counter;

In this example, we first take an arrow function component called Counter. After this, a state variable count is created using the useState hook. By default, the value of the count is set to 0.

Now we have declared two event handler methods named HandleIncrement and HandleDecrement along with the arrow function.

After that two buttons Increment and Decrement respectively are declared at the end.

Now start the dev server and open the React application in the browser. You will see two buttons.

Clicking on the increment button will add 1 to the counter. On the other hand, if you click on the decrement button, 1 will be subtracted.

Conclusion

So now you know the basics of arrow functions. Undoubtedly, it is a powerful tool of JavaScript. Also for the React development. So use the arrow function in a proper way. And take advantage of it.

If you want to define a quick and simple function, then you can easily use the arrow function. Practice some of the above examples yourself. You will learn a lot.

Additional Resources:

• MDN Docs
• React Docs

FAQ