Search⌘ K
Home
Courses
JavaScript Fundamentals Before Learning React

Arrow Functions in React

Explore how to use JavaScript ES6 arrow functions effectively in React to write concise, readable code. Understand key syntax rules, benefits in event handling, and why arrow functions improve debugging by not rebinding this. Practice transforming traditional functions to arrow functions to enhance your React coding skills.

We'll cover the following...

As mentioned in the previous lesson, Arrow Functions are a more concise way of writing a function in JavaScript. They are frequently used in React to make things more efficient and simpler (Event Handling, preventing bugs, etc.).

When teaching someone about React, I explain JavaScript arrow functions pretty early. They are one of JavaScript’s language additions in ES6 which pushed JavaScript forward in functional programming.

Javascript (babel-node)
// JavaScript ES5 function
function getGreetingFunc() {
  return 'Welcome to JavaScript';
}
// JavaScript ES6 arrow function with body
const getGreetingArrow1 = () => {
  return 'Welcome to JavaScript';
}
// JavaScript ES6 arrow function without body and implicit return
const getGreetingArrow2 = () =>
  'Welcome to JavaScript';
console.log(getGreetingFunc());
console.log(getGreetingArrow1());
console.log(getGreetingArrow2());

Given below is an example to help you understand ...