DEV Community

MZ
MZ

Posted on

what's the difference between () => {} and () => ()

Hey there, I'm going to be honest. This is a post that I will make for myself for reference. I've just started learning React and I got a little confused.

So, what's the difference between () => {} and () => (). I asked around and this was what I got.

() => {} is this:

() => {
   return something
}
Enter fullscreen mode Exit fullscreen mode

() => () is the same but without the explicit return statement:

() => (
   something
)
Enter fullscreen mode Exit fullscreen mode

It is mostly a one-line return statement. So it essentially comes down to a simplified version, which is:

() => return something
Enter fullscreen mode Exit fullscreen mode

Or you can just do

() => something
Enter fullscreen mode Exit fullscreen mode

There is also another form where you return a component.

() => <Component />
Enter fullscreen mode Exit fullscreen mode

However, can you do this?

() => (
   var i = 0
   var a = i + 1 
   return a
)
Enter fullscreen mode Exit fullscreen mode

This concludes to this:

() => (
   return var i = 0var a = i + 1 return a
)
Enter fullscreen mode Exit fullscreen mode

While that is wrong, you can do this.

() => (
   return(
    <div>
        <p></p>
    </div>
   )
)
Enter fullscreen mode Exit fullscreen mode

If you still feel slightly wonky about this, it is better to resolve to () => {} this first.

Feel free to correct me if I'm wrong ya!

Top comments (7)

Collapse
 
merri profile image
Vesa Piittinen

There is also the possibility to do:

const onClick = (argument) => void thisFunctionHasReturnValue(argument)

void will always result into undefined. This is useful as event handlers may change their behavior if a return value is given. With void this will not happen as you are guaranteed to return undefined.

The only reason to use the above is to make one-liners. In the other hand you get one-liners with:

const onClick = (argument) => { thisFunctionHasReturnValue(argument) }

But that means you have to allow for such syntax and I think typically Prettier forces this to:

const onClick = (argument) => {
    thisFunctionHasReturnValue(argument)
}

Personally I like this "spacious" style more rather than compacting everything into a mass of one-liners. And actually I'd rather write:

function onClick(argument) {
    thisFunctionHasReturnValue(argument)
}

It is a bit shorter, and I like the old. Very much a stylistic choice and a matter of opinion.

Collapse
 
muhdmirzamz profile image
MZ

I see. Thank you!

Collapse
 
pentacular profile image
pentacular • Edited

() => {} is this:
() => { return something }

and

() => () is the same but without the explicit return statement:
() => (something)

These are not the same.

This is a block of statements.

{ return something; }
Enter fullscreen mode Exit fullscreen mode

This is an expression

(something)
Enter fullscreen mode Exit fullscreen mode

They are very different things.

An expression evaluates to a value.

A block executes statements and does not evaluate to a value.
One of the statements in the block may be a return statement which causes the call to the function to evaluate to the returned value.

Differentiating clearly between statements and expressions will make your life easier.

While that is wrong, you can do this.
() => (return(

))

Unless you rewrite that return out or rewrite it to be in a block of statements, you cannot do this.

Collapse
 
muhdmirzamz profile image
MZ

Thank you for this. I may need to have another glance at your examples for me to fully comprehend it!

Collapse
 
jcubic profile image
Jakub T. Jankiewicz • Edited

Your last code is wrong, you can't use return inside () => () return is only allowed in () => {}.
The difference is that () => () return single expression and () => {} is a block that require return.

Collapse
 
azizsafudin profile image
Abdul Aziz

Great post!

Collapse
 
muhdmirzamz profile image
MZ

Thank you!