New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add jsx-no-bind rule to config #14
Comments
The only thing I'd want to see here is that it does actually make a difference. In my experience, using pre-bound functions over arrow functions hasn't had any sort of significant or measurable effect on performance, compared to e.g. using It also strongly depends on whether create-react-app includes the property initialiser feature, since the generally recommended alternative approach is to bind there: class Component extends React.Component {
onClick = e => {
e.preventDefault();
this.props.onClick( e );
}
} Ergonomically, I still think arrow functions are the nicest, but property initialisers as about as good. |
It seems like it does support it:
|
Why not add it if it can help avoid unnecessary re-renders in child components?
|
Generally speaking, it's an unnecessary optimisation, so you just don't need to do it. Using property initialisers is cognitive overhead for negligible gain most of the time. |
Property initializer is more widely available now, and also more widespread, we can ban |
For React rendering performance we should consider adding jsx-no-bind to this eslint config; bound functions and arrow functions created within a
render
method's JSX will never be treated as equivalent when React is comparing subcomponent properties and can lead to a lot of unnecessary (and therefore expensive) re-renders.The text was updated successfully, but these errors were encountered: