Menu
I started using a new linter today (tslint-react) and it is giving me the following warning:
"Lambdas are forbidden in JSX attributes due to their rendering performance impact"
I get that this causes the a new function to be created with each render. And that it could trigger unneeded re-renders because the child component will think it's props have changed.
But my question is this, how else can one pass parameters to an event handler inside a loop:
customers.map( c => <Btn onClick={ () => this.deleteCust(c.id) } /> ); 
395
You can't write inlines styles in JSX. You have to reference an object in scope or pass an object that contains CSS properties, written as JS properties. JavaScript values can be injected into JSX using {} (e.g., test={text} and data-test={tested? 'test':'false'} ).
The () => { ... } is the function. It's an ES6-style "arrow" function expression. These are like function expressions ( tick = function() { ... } ) except that the this value within the function is inherited from the context in which it's defined rather than being set when the function is called.
You use ${} in string templates like const k = `my name is ${name}` you use {} whenever you want to put some Java code in your JSX code like <div attr={name}>{name}</div>
Using the Array map function is a very common way to loop through an Array of elements and create components according to them in React. This is a great way to do a loop which is a pretty efficient and is a tidy way to do your loops in JSX. It's not the only way to do it, but the preferred way.
Definitely not an antipattern.
Lambdas (arrow functions) have no impact on rendering performance.
The only thing that has an impact is the implementation of shouldComponentUpdate. This function returns true by default, meaning that the component is always rendered. That means that even if the props don't change, the component is still rendered again. And that's the default behavior.
Changing arrow function to a bound method won't improve the performance if you don't implement shouldComponentUpdate.
It's true that not using arrow functions can simplify the implementation of shouldComponentUpdate and they should not be used with PureComponent but they are not an antipattern. They can simplify many patterns, e.g. when adding an additional parameter to function (e.g. what you are doing in your example).
Also note that React has stateless components which cannot even implement shouldComponentUpdate and therefore they are always rendered.
Don't think about performance impact until you actually find a performance problem.
120
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
