---
title: "What is Arrow Function in ReactJS?"
url: "https://magecomp.com/blog/arrow-function-reactjs/"
date: "2023-03-29T17:25:17+00:00"
modified: "2025-02-27T09:25:38+00:00"
author:
  name: "Bharat Desai"
  url: "https://magecomp.com"
categories:
  - "ReactJS"
word_count: 329
reading_time: "2 min read"
summary: "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."
description: "Arrow functions are a shorter form of regular functions and require fewer keystrokes. Learn more about Arrow Functions in ReactJS."
keywords: "ReactJS"
language: "en"
schema_type: "Article"
related_posts:
  - title: "Top 5 Skills to Know before Learning ReactJS [with Reference Links]"
    url: "https://magecomp.com/blog/skills-to-know-before-learning-reactjs/"
  - title: "ReactJS | Understanding State and Lifecycle"
    url: "https://magecomp.com/blog/reactjs-state-and-lifecycle/"
  - title: "ReactJS | useContext Hook with Example"
    url: "https://magecomp.com/blog/reactjs-usecontext-hook/"
---

# What is Arrow Function in ReactJS?

_Published: March 29, 2023_  
_Author: Bharat Desai_  

![What is Arrow Function in ReactJS](https://magecomp.com/blog/wp-content/uploads/2023/03/What-is-Arrow-Function-in-ReactJS-1024x512.webp)

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.
[![React js](https://magecomp.com/blog/wp-content/uploads/2025/02/React-js-CTA-2.webp)](https://magecomp.com/hire-reactjs-developer.html)

## 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.
## [![React js](https://magecomp.com/blog/wp-content/uploads/2025/02/React-js-CTA-3.webp)](https://magecomp.com/services/contact-us/)

## 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);
```

## [![React js](https://magecomp.com/blog/wp-content/uploads/2025/02/React-js-CTA-4.webp)](https://magecomp.com/hire-reactjs-developer.html)

## Conclusion:
This was all about Arrow Function in ReactJS. To learn more about React, follow [**ReactJS blogs**](https://magecomp.com/blog/category/reactjs/) and stay updated. Share the article with your friends, and comment down your doubts or queries.
**Happy Coding!**


---

_View the original post at: [https://magecomp.com/blog/arrow-function-reactjs/](https://magecomp.com/blog/arrow-function-reactjs/)_  
_Served as markdown by [Third Audience](https://github.com/third-audience) v3.5.3_  
_Generated: 2026-09-09 17:59:20 UTC_