airbnb / airbnb/javascript

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

オープン
#2,255 コメント 3 件 リアクション 1 件 担当者 0 名 GitHub で見る
question react
主要言語
JavaScript
スター
148k
フォーク
26.6k
PR マージ指標
30日以内にマージされた PR はありません

説明

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.

コントリビューションガイド

このリポジトリのコントリビューションガイドは索引されていません

調査の方向性

packages/eslint-config-airbnb/rules/react.js#L104 から始め、react/jsx-no-bind の例外と、参照されている JavaScript style guide の指針を比較してください。アロー関数と DOM コンポーネントに関する未解決の疑問を確認してください。設定とガイドが一致するか、例外を維持する理由が文書化されていれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
eslint, javascript
領域
documentation, tooling
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
38/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。