Can someone explain to me, or direct me to some documentation that describes the differences in the following implementations?

I can't wrap my head around when to use which style of some custom function.

From what I can understand A and B are roughly the same, but ES6 allows arrow functions. Is there a reason to use one of the other. How does C fit in?

const solutionA = () => {
  return <p>A Text</p>
}

function solutionB(){
   return <p>B Text</p>
}

const solutionC = (
   <p>C Text</p>
)

Can someone explain to me, or direct me to some documentation that describes the differences in the following implementations?

I can't wrap my head around when to use which style of some custom function.

From what I can understand A and B are roughly the same, but ES6 allows arrow functions. Is there a reason to use one of the other. How does C fit in?

const solutionA = () => {
  return <p>A Text</p>
}

function solutionB(){
   return <p>B Text</p>
}

const solutionC = (
   <p>C Text</p>
)

• javascript
• reactjs

• 3 see this:dmitripavlutin./… – Abbasihsn Commented Sep 10, 2021 at 19:03
• In my experience with React, there's never a need for function. Arrow functions will always work and you don't need to use bind so much. As for the third option, you should use a variable when you are just rendering something and you should use a function when you need an action that gets called later or some JSX that's built dynamically based on different variables. – nullromo Commented Sep 10, 2021 at 19:07
• 3 Does this answer your question? Are 'Arrow Functions' and 'Functions' equivalent / interchangeable? The C one is basically the same as A, just a shorthand, and I'm assuming the missing returns are typos – iunfixit Commented Sep 10, 2021 at 19:07
• Note that "solutionA" returns undefined. – Jared Smith Commented Sep 10, 2021 at 19:08
• 1 As does "solutionB". "solutionC" is a variable, not a function. – Heretic Monkey Commented Sep 10, 2021 at 19:09

5 Answers 5

In react you create ponents.

There are some ways to create ponent, one of them is functional ponent (a function that returns a ponent - so at the very least, return the html tags from your functions).

const solutionA = () => { return <p>A Text</p> }; 

function solutionB() { return <p>B Text</p> }

const solutionC; //later

than in your JSC files you can use ponents like <solutionA /> or <solutionB />.

As for solutionC it doesn't returns a ponent, but you can use it inside a ponent like this:

const solutionC = (<p>C Text</p>);

function solutionD() { return (<div> Hello {solutionC} </div>)

Since solutionC is not a ponent but a variable holding html tag, you can use JSX syntax ({}) and use it as a variable.

So this solutionD ponent will result in this HTML:

<div> 
  Hello <p>C Text</p>
</div>

The main difference between function declaration and function expression is that in the first case you can call the function even before you have defined it. On the other hand, since a function expressions is stored in a variable, you cannot call the function if its name has not been defined first. There are many other differences and you can read about them in this MDN article.

Regarding arrow functions I'd say that their only benefit is in making the code shorter, but only in particular cases. Here's an example where it shortens the function from 5 rows to just 1 while making it more readable even:

Before

function (myObject) {
    return givenArray.every( function (cell) {
        return cell === myObject);
    });
};

After

myObject => givenArray.every(cell => cell === myObject);

This function can be read as: "Checks if every element of the givenArray is equal to myObject".

Generally, I'd reduce the benefits of array functions in three cases:

• In functions that only have one return statement; your example can be shortened to: const solutionA = () => <p>A Text</p>
• In functions that consist of only one condition that returns a boolean.
• In functions that are used as input by another function.

You can also read here for more info about arrow function expression.

I do not know about the C one, but normal functions and arrow functions are almost the same things but with just a few differences.

1. You cannot use this keyword in arrow functions.
2. You cannot get the list of arguments passed in arrow function as you can in a normal function.
3. Normal functions are callable as well as constructible i.e. you can use new keyword with normal functions, but arrow functions can only be called.

when you use const before your function, it implies that this function could not change, you can do not use it and so, you can redefine your function or assign a variable to that name somewhere in your code! so it is mon to use const before the functions name. About defining the function prefix like function test = ... it is not useful in react anymore. but I totally remend using const to prevent any possible reusage of that variable name. Also, the arrow function is relatively similar to the conventional function. However, personally prefer to use the arrow function. for more info see this: https://dmitripavlutin./differences-between-arrow-and-regular-functions/

while both regular and arrow function work similar in manner but some differences are there arrow functions do not have their own this. and argument objects are not available in arrow functions, but are available in regular functions