Arrow function without curly braces

Question

I'm new to both ES6 and React and I keep seeing arrow functions. Why is it that some arrow functions use curly braces after the fat arrow and some use parentheses? For example:

const foo = (params) => (     <span>         <p>Content</p>     </span> ); 

vs.

const handleBar = (e) => {     e.preventDefault();     dispatch('logout'); }; 

Answer 1

The parenthesis are returning a single value, the curly braces are executing multiple lines of code.

Your example looks confusing because it's using JSX which looks like multiple "lines" but really just gets compiled to a single "element."

Here are some more examples that all do the same thing:

const a = (who) => "hello " + who + "!"; const b = (who) => ("hello " + who + "!"); const c = (who) => (   "hello " + who + "!" ); const d = (who) => (   "hello "     + who     + "!" ); const e = (who) => {   return "hello " + who + "!"; };  

You will also often see parenthesis around object literals because that's a way to avoid the parser treating it as a code block:

const x = () => {} // Does nothing const y = () => ({}) // returns an object 

Answer 2

One can also use curly braces to prevent a single line arrow function from returning a value -- or to make it obvious to the next developer that a single line arrow function shouldn't, in this case, be returning anything.

For example:

const myFunc = (stuff) => { someArray.push(stuff) } const otherFunc = (stuff) => someArray.push(stuff)  console.log(myFunc())    // --> logs undefined console.log(otherFunc()) // --> logs result of push which is new array length