Arrow functions in React

Arrow functions provide a more concise and readable syntax for defining functions in JavaScript. Arrow functions have become a widely used feature in React development for obvious reasons: shorter syntax and implicit return. You will have a better understanding of what these mean in a moment.

In traditional JavaScript, you would have to define a regular function that adds two numbers together like this:

function addNumbers(a, b) {    return a + b;
}

Not bad, right? But arrow functions can make this even simpler and more elegant. Check this out:

const addNumbers = (a, b) => {    return a + b;
};

Pretty cool? The function keyword is replaced with a funky-looking arrow, =>, and you can omit the curly braces and the return statement if your function is just a one-liner:

const addNumbers = (a, b) => a + b;

Basically, you define arrow functions by following this syntax rule:

const functionName...