What is the difference between const funcName = (args) => { }; and const funcName = (args) => ( );?

Question

I'm new to React and now I'm taking a course on Pluralsight.

Let's take this example:

const Card = (props) => {
      
      var profile = props;
      return (<div className="github-profile">
          <img src={profile.avatar_url} />
        <div className="info">
          <div className="name">{profile.name}</div>
          <div className="company">{profile.company}</div>
        </div>
        </div>);
};

This is a function component but this can be rewrite like:

const Card = (props) => (
        <div className="github-profile">
          <img src={props.avatar_url} />
        <div className="info">
          <div className="name">{props.name}</div>
          <div className="company">{props.company}</div>
        </div>
        </div>
);

What is the actual difference? Aren't the same thing? When you use () and when {}?

`{}` creates a *code block* and requires an explicit `return` whereas without the code block there is an implicit return of whatever follows `=>` — charlietfl, Jul 18 '20 at 18:40

score 3 · Accepted Answer · answered Jul 18 '20 at 18:40

An arrow function can have one of two forms:

(args) => { /* statements */ }
(args) => returnValue as a shorthand for (args) => { return returnValue }

The (args) => (...) form that you mentioned is actually just form #2 with extra parentheses (which may be necessary if returning an object literal for example, because otherwise it would be ambiguous with form #1, and they are standard for returning a JSX expression like <Thing>...</Thing>).

If you want to do more than just returning something, you'll use form #1. Otherwise form #2 will suffice.

(Note: If there is exactly one argument, the left-hand parentheses are optional - args => ... is the same as (args) => ...)

score 2 · Answer 2 · answered Jul 18 '20 at 18:39

When you use () you tell your programm that whatever is in () pleaser return it. So when you use arrow function without block of code {} it means it will return whatever is to the right of the arrow => so if you say (x, y) => x + y means that this function will return x + y but in your case the () after the arrow is just grouping of the react JSX so

const Card = (props) => (
  <div>
    Hello
  </div>
)

simply means to return it. The answer to your question "what's the difference", well in first case you have a code block {} where you can write some logic before returning the JSX component in the second version it will return component right away without any logic.

score -1 · Answer 3 · answered Jul 18 '20 at 18:45

In the first case you can do plain javascript calculations

  const Card = (props) => {

  int x = 2+3; // or some foreach loop

  var profile = props;
  return (<div className="github-profile">
      <img src={profile.avatar_url} />
    <div className="info">
      <div className="name">{profile.name}</div>
      <div className="company">{profile.company}</div>
    </div>
    </div>); };

But in the second case you can not do plain javascript calculations. it just returns JSX. So the bottomline if you want to do calculations before returning JSX use the first one. Otherwise use the second one

What is the difference between const funcName = (args) => { }; and const funcName = (args) => ( );?

3 Answers3