What's the actual cost of defining new function within react render method?

Question

I'm trying to clarify the pros/cons of having a new function declaration within react's render method.

Consider a render method like the following:

  render () {
    return (<SomeComponent somePropWithoutEventBind={() => console.log('not so dangerous?')} />)
  }

In the above example, somePropWithoutEventBind doesn't bind to a DOM event: react will check for prop changes and every time render is called this prop has changed - because it's a new function - so it never matches the previous, this is expensive but nothing tremendous.

Now in this case

  render () {
    return (<input onChange={() => console.log('dangerous?')} />)
  }

onChange prop does bind to DOM (doing something like addEventListener) so every render will have to removeEventListener and addEventListener again? Is this the main reason behind avoiding to declare functions inside the render method?

If possible, please justify your answer pointing to react source code.

Answer 1

The main reason of avoiding defining new functions in render is to avoid over rendering.

Consider bind a new function onto a DOM element (react element not real DOM) like so: <button onClick={_ => this.setState({ hide: true })}>Hide Me</button>} there's almost none cost at all, since DOM elements gets re-rendered anyways. (site note: react doesn't use native DOM events like add/removeEventListener, it uses SyntheticEvent and your code targets virtual DOM aka react element not real DOM)

However for a custom components (In large codebase we typically have lots of complex Container Component composed of Functional/Class Child Components. Let's say you have something like

render() {
  // you won't run into unnessary re-render issue 
  // when you use `onClick={this.handleClick}` since the function reference doesn't change
  // while most perf tricks done by react bindings are relying on shallow compare of props/state
  return (
    <ComplexContainer onClick={_ => this.setState({ forceReRender: true})}>
      <Child1 />
      <Child2>
        <NestedChild1 />
        <NestedChild2 />
      </Child2>
    </ComplexContainer>
  )
}

If you do this way, this will cause the whole render tree starting from ComplexContainer to re-render, this may have notable negative perf impacts, but you will need DevTools profiling to benchmark.

In fact, the real thing i wanna say is: it might not be that huge as you concern, avoid premature optimization can be more important. Give this awesome reading material a shot: React, Inline Functions, and Performance

_{A bit more info regarding react synthetic event system here, it's simply a wrapper of native DOM events to normalize the subtle differences of events among different browser vendors. The API would be the same event.preventDefault()/event.preventPropagation() etc works as it is, but you get cross-browser compatibility for free. Regarding how it works internally please see event delegation}