Discussion on: Functions, fat arrows and parentheses

[lionel-rowe]

Nice article! Couple of nitpicks, though:

const ExampleComponent = () => {
  const clickHandler = () => {
    console.log('I was clicked')
  }

  return <button onClick={clickHandler()}>Click me</button>
}

Nope! Nothing will get logged.

"I was clicked" will get logged each time the component is rendered, but nothing will be logged when the button is clicked. If a function is called, its side effects will still happen, even if it's called in an unintended way.

The event handler was expecting a function that it can call. ​However, it got "I was clicked" instead! Not exactly helpful.

onClick received undefined, not the string "I was clicked", because clickHandler doesn't return anything (implicitly returns undefined):

const noReturn = () => {
    console.log('...')
}

const x = noReturn() // logs '...'
console.log(typeof x) // 'undefined'

[Laurie]

The point of the first piece is that nothing will get logged when the button is clicked because we’re talking about the behavior of the click handler. Discussing what happens when the component renders is outside the scope of the conversation.

The second example is a bit confusing. I wanted to match what happens if you execute that same thing in node and what response you see so that people can run it themselves, but it’s not a 1:1 mapping.

[lionel-rowe]

Yeah you'll get the logging output, but that's not the same as the return value. The return value is always undefined unless a) an explicit return statement is used to return something other than undefined, or b) it's a single-statement arrow function with no enclosing block:

const fn1 = () => { 5 } // returns undefined
const fn2 = function() { 5 } // returns undefined
const fn3 = () => { return 5 } // returns 5
const fn4 = () => 5 // returns 5
const fn5 = function() { return 5 } // returns 5

In the case of console.log, even if you return console.log('...'), the return value will still be undefined, because console.log itself returns undefined.

Sorry if I'm stating the obvious or my explanation is confusing.