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
Configuration of react/jsx-no-bind allows to use arrow functions, while the style guide prohibits it #2255
Comments
|
@ljharb @speicus If we were to use the arrow functions constraint, would we be left with creating "traditional" functions inside the component? function Hello() {
function handleClick() {
console.log('Hi!')
}
return <button onClick={handleClick}>Hello</button>
} instead of this? function Hello() {
const handleClick = () => {
console.log('Hi!')
}
return <button onClick={handleClick}>Hello</button>
} function Hello() {
return <button onClick={() => console.log('Hi!')}>Hello</button>
} In summary... Can we understand that today, based on all the background we have, it is 0% recommended to use arrow functions? background:
|
There's no defense for using arrow functions to create component, but there's plenty of times where sending one as a prop is "fine". The hazard is passing an inline arrow function as a prop to a custom component, not an HTML one. |
The current configuration of
react/jsx-no-bind
allows to use arrow functions as event handlers (and ignores the use of bind in DOM components too): https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb/rules/react.js#L104However, here's what the style guide has to say bout this:
I agree with the guide's argument and belive that it would be best to update the rule configuration to match it. Using arrow function to initialize an event handler creates a brand new function on each render same as
bind()
does, which can lead to unnecessary re-renders.To be honest, I'd even turn
ignoreDOMComponents
tofalse
too — it is unclear why DOM components deserve a different treatment. I'd say the reasoning from the style guide fully applies to them too.If, however, there is some reasoning behind these exceptions — then the style guide should probably reflect it.
The text was updated successfully, but these errors were encountered: