What is Arrow Function in ReactJS?

In today’s blog, we will learn about Arrow Functions in ReactJS. Let us find out What are Arrow Functions and how they are used in ReactJS.

What is Arrow Function in ReactJS?

The arrow function is one of the features introduced in the ES6 version of javascript. It allows you to create functions in a cleaner way. The arrow function is a compressed and shorter version of the function expression. It requires fewer keystrokes by developers.

How to Use Arrow Functions in React?

• In React, arrow functions are used as an alternative to functions within class components, functional components, and event handlers.
• Arrow functions are anonymous. You do not need to use the “function” keyword while defining them.
• All arguments passed into an arrow function must be pre−defined

Limitations of Arrow Functions:

An arrow function expression is a compressed alternative to a regular function expression. But it also has some limitations in usage:

• Arrow functions don’t have their own bindings to this, arguments, or super, and should not be used as methods.
• Arrow functions cannot be used as constructors. Calling them with new throws a TypeError. They also don’t have access to the new.target keyword.
• Arrow functions cannot use yield within their body and cannot be created as generator functions.

Example of Arrow Function:

// function expression

Let X = function (X,Y)
{
    return X * Y
}

// using arrow function

Let X = (X, Y) => X * Y ;

If a function doesn’t take any argument, then it should use empty parentheses.

Let greet = () => console.log(“Hello’);
greet();

Note: This works only if the function has only one statement.

Arrow Function With Parameters:

hello = (val) => "Hello " + val;
let names = ['John', 'Mac', 'Peter'];
let lengths = names.map(name => name.length);
console.log(lengths);

Conclusion:

This was all about Arrow Function in ReactJS. To learn more about React, follow ReactJS blogs and stay updated. Share the article with your friends, and comment down your doubts or queries.

Happy Coding!