Example of PasswordInput has an arrow function inside render method
See original GitHub issueHi Cory,
In ExampleAllFeatures I’ve noticed that you used an arrow function as a handler of the onChange
event inside the render
function.
render() {
return (
<div>
<PasswordInput
htmlId="password-input-example-all-features"
name="password"
onChange={ event => this.setState({ password: event.target.value })}
value={this.state.password}
minLength={8}
placeholder="Enter password"
showVisibilityToggle
quality={this.getQuality()}
{...this.props} />
</div>
)
}
Won’t it create an instance of this function on each render? If so, will this pattern provide the same result (while creating one instance of this function)?
class ExampleAllFeatures extends React.Component {
constructor(props) {
super(props);
this.state = {
password: ''
};
this.handleOnChange = this.handleOnChange.bind(this);
}
getQuality() {
const length = this.state.password.length;
return length > 10 ? 100 : length * 10;
}
handleOnChange(e){
this.setState({ password: e.target.value })
}
render() {
return (
<div>
<PasswordInput
htmlId="password-input-example-all-features"
name="password"
onChange={this.handleOnChange}
value={this.state.password}
minLength={8}
placeholder="Enter password"
showVisibilityToggle
quality={this.getQuality()}
{...this.props} />
</div>
)
}
}
Issue Analytics
- State:
- Created 6 years ago
- Comments:8 (2 by maintainers)
Top Results From Across the Web
How to avoid bind or inline arrow functions inside render method
First: A simple solution will be to create a component for the content inside a map function and pass the values as props...
Read more >4 Examples of the useState Hook - Dave Ceddia
useState inside a function component, you create a single piece of state associated with that component. (every hook starts with the word ...
Read more >Why Arrow Functions and bind in React's Render are ...
Here's a quick example. In this example, I'm using an arrow function in render to bind the relevant user ID to each delete...
Read more >Passing Functions to Components - React
Using an arrow function in render creates a new function each time the component renders, which may break optimizations based on strict identity...
Read more >Arrow function expressions - JavaScript - MDN Web Docs
Arrow functions don't have their own bindings to this , arguments , or ... In the example above, both the parentheses around the...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Thanks for the comments @RIP21. I don’t typically use arrows in render in real apps, but for docs I favored brevity over performance. You’re right that there’s a tradeoff though: people may copy the practice without realizing the potential performance implications. So this was intentional, but I’ll add a comment to the course to help clarify. Thanks for the comments guys!
I just submitted a patch for m6-05 (the clip where I show this code) to display an annotation to help clarify:
“For performance reasons, arrow functions should be avoided in render. I’m just using one here for simplicity.” The patch should publish soon, so closing this. Thanks for the input guys!