Performance implications of defining render props function within render()?

user_6025788 0
Viewed 306

Take the following example code:

class Something extends Component {
  render() {
   return (
      <SomeProvider
        render={providedProps => (
          <SomeChild {...providedProps}/>
        )}
      />
    )
  }
}

Every React render props article uses this pattern as an example, but it's generally bad practice to define functions inline. Is this an exception to that rule?

Is there any benefit to defining the function outside of render?

class Something extends Component {
  renderSomeChild = providedProps => (
    <SomeChild {...providedProps}/>
  )

  render() {
   return (
      <SomeProvider
        render={this.renderSomeChild}
      />
    )
  }
}
react-native reactjs render javascript
1 Answers

At this "function outside case" the const renderSomeChild (i suposed it is cause you did'nt mention) just make a reference to an allocated function in memory. So, if you aren't planning to reuse that function it make no sense to use it outside, i really think this make no significant on performance...

A way to use the first example as the best practices is to write a code like this:

 class Something extends Component {
  render() {
   return (
      <SomeProvider>
        {providedProps => (
          <SomeChild {...providedProps}/>
        )}
      </SomeProvider>
    )
  }
}

I hope the above code will help you! :)

user_104819750
Related