0

I am new in react world, and while reading tutorial stuffs, I've noticed that using arrow-function in JSX causes some performance issue on re-render, and also using bind in JSX is forbidden due to their rendering performance impact.

Before reading that tutorial, my JSX were like this

export class LabScreen2 extends Component {
  render() {
    const y = 'This is y value';

    return (
      <MyCustomButton onMyCustomButtonPressed={(x : string) => {
        alert(x+' '+y);
      }}/>
    );
  }
}

class MyCustomButton extends Component {
  render() {

    const x = 'This is x value';

    return (
      <Button title={'My Custom Button'} onPress={() => {
        this.props.onMyCustomButtonPressed(x);
      }}/>
    );
  }
}

and after, I've removed the arrow-functions,

export class LabScreen2 extends Component {
  render() {
    ...

    return (
      <MyCustomButton onMyCustomButtonPressed={this.onMyCustomButtonPressed}/>
    );
  }

  onMyCustomButtonPressed = (x : string, y : string) => {
    alert(x+' '+y);
  }
}

class MyCustomButton extends Component {
  render() {

    ...

    return (
      <Button title={'My Custom Button'} onPress={this.props.onMyCustomButtonPressed}/>
    );
  }
}

But now I don't know how to pass the x and y to onMyCustomButtonPressed method.

I knw it'll work this way, using bind

<MyCustomButton onMyCustomButtonPressed={this.onMyCustomButtonPressed.bind(this,y)}/>

and 

<Button title={'My Custom Button'} onPress={this.props.onMyCustomButtonPressed.bind(this,x)}/>

But using bind in JSX is forbidden, right ? So, What's the perfect way to pass params in JSX efficiently ?

Edit

I've already read this answer. It tells to pass the param as prop, and return back it using the inner method. That sounds little bit complicated. The flow would be correct, but it'll be hard to understand the working of the component as the size increases. I've also read the alternative solution mentioned, using memorize, but that also noted as an imperfect solution. Is there any built-in perfect solution for this problem ?

theapache64
  • 10,926
  • 9
  • 65
  • 108
  • Just as a heads up, I wouldn't worry too much about the performance impact of inline functions and binding. It's usually only in specific situations, like having hundreds of components rendered simultaneously and re-rendering them every few seconds, where removing inlining makes any noticeable difference. – Jayce444 Jun 27 '18 at 06:04
  • @Jayce444 Ok, thank you for the response :) – theapache64 Jun 27 '18 at 06:08
  • this is absolutely wrong : " I've noticed that using arrow-function in JSX causes some performance issue on re-render, and also using bind in JSX is forbidden due to their rendering performance impact." – Milad Jun 27 '18 at 06:15
  • why don't you do : ``` – Milad Jun 27 '18 at 06:18
  • @Milad It's all about passing params without using arrow-functions, and now you're suggesting to use it ? :/ . The impact on `arrow-function` is not my conclusion. I read it from [here](https://stackoverflow.com/a/36677798/4370279) and `tslint` also complaints. – theapache64 Jun 27 '18 at 06:40
  • fair enough, what about this : ``` onMyCustomButtonPressed = ()=>{ this.props.onMyCustomButtonPressed(this.x); } render() { return ( – Milad Jun 27 '18 at 06:53
  • `x` is not a member variable, but limited within the function. Can't increase the visibility out of `render`. :/ – theapache64 Jun 27 '18 at 06:56
  • that's not possible, you can't call a function and expect it to somehow know which paramters to pass invisbly to it , that's just impossible and doesn't make any sense man – Milad Jun 27 '18 at 06:57
  • Ok. I think [this answer](https://stackoverflow.com/a/45053753/4370279) is the current perfect solution for this problem. – theapache64 Jun 27 '18 at 06:59

0 Answers0