Arrow functions and the use of parentheses () or {} or ({})

Question

I cannot understand why in the arrow functions we do not need to wrap the literal of arrow function in the ({}) braces, instead of in this example the literal just wrapped in the single () braces. Why? I had surfed the internet to find an answer on it, but it failed.

And also why we put the arguments in double braces ({}), instead of just ()?

const FilterLink = ({ filter, children }) => (    <NavLink        to={filter === 'SHOW_ALL' ? '/' : `/${ filter }`}        activeStyle={ {        textDecoration: 'none',            color: 'black'        }}    >        {children}    </NavLink> ) 

Answer 1

Using ({}) is to destructure the arguments and => () is an implicit return equivalent to => { return ()} and ( only serves to disambiguate between the start of an object and the opening braces of a function body and would generally be used when you have a multiline return value. You could simply avoid using ( and have the NavLink in the same line as the arrow =>

const FilterLink = ({ filter, children }) => ( // <-- implicit return    <NavLink     to={filter === 'SHOW_ALL' ? '/' : `/${ filter }`}     activeStyle={ {       textDecoration: 'none',       color: 'black'     }}   >     {children}   </NavLink> ) 

is equivalent to

const FilterLink = ({ filter, children }) => {    return (       <NavLink         to={filter === 'SHOW_ALL' ? '/' : `/${ filter }`}         activeStyle={ {           textDecoration: 'none',           color: 'black'         }}       >         {children}       </NavLink>     ) } 

Check this answer for more details on the usage of destructuring in ({ filter, children })