airbnb / airbnb/javascript

Configuration of react/jsx-no-bind allows to use arrow functions, while the style guide prohibits it

Open
#2,255 3 comments 1 reaction 0 assignees View on GitHub
question react
Dominant language
JavaScript
Stars
148k
Forks
26.6k
PR merge metrics
No merged PRs in 30d

Description

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#L104

![image](https://user-images.githubusercontent.com/443346/86509126-6609b600-bdee-11ea-8d7c-6a4106987078.png)

However, here's what the style guide has to say bout this:

---

![image](https://user-images.githubusercontent.com/443346/86508964-e16a6800-bdec-11ea-8979-44eb5ef15ddd.png)

---

1. 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.

2. To be honest, I'd even turn `ignoreDOMComponents` to `false` 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.

3. If, however, there is some reasoning behind these exceptions — then the style guide should probably reflect it.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start at packages/eslint-config-airbnb/rules/react.js#L104 and compare the react/jsx-no-bind exceptions with the referenced JavaScript style guide guidance. Review the open questions about arrow functions and DOM components; done means the configuration and guide agree, or the rationale for keeping an exception is documented.

Written by the indexing model from the issue text.

Assessment

Tech stack
eslint, javascript
Domain
documentation, tooling
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.