Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[New] add
no-arrow-function-lifecycle
- Loading branch information
Showing
9 changed files
with
1,198 additions
and
19 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| # Lifecycle methods should be methods on the prototype, not class fields (react/no-arrow-function-lifecycle) | ||
|
|
||
| It is not neccessary to use arrow function for lifecycle methods. This makes things harder to test, conceptually less performant (although in practice, performance will not be affected, since most engines will optimize efficiently), and can break hot reloading patterns. | ||
|
|
||
| ## Rule Details | ||
|
|
||
| The following patterns are considered warnings: | ||
|
|
||
| ```jsx | ||
| class Hello extends React.Component { | ||
| render = () => { | ||
| return <div />; | ||
| } | ||
| } | ||
|
|
||
| var AnotherHello = createReactClass({ | ||
| render: () => { | ||
| return <div />; | ||
| }, | ||
| }); | ||
| ``` | ||
|
|
||
| The following patterns are **not** considered warnings: | ||
|
|
||
| ```jsx | ||
| class Hello extends React.Component { | ||
| render() { | ||
| return <div />; | ||
| } | ||
| } | ||
|
|
||
| var AnotherHello = createReactClass({ | ||
| render() { | ||
| return <div />; | ||
| }, | ||
| }); | ||
|
|
||
| ``` | ||
| ## When Not To Use It | ||
|
|
||
| If you don't care about performance of your application or conceptual correctness of class property placement, you can disable this rule. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| /** | ||
| * @fileoverview Lifecycle methods should be methods on the prototype, not class fields | ||
| * @author Tan Nguyen | ||
| */ | ||
|
|
||
| 'use strict'; | ||
|
|
||
| const values = require('object.values'); | ||
|
|
||
| const Components = require('../util/Components'); | ||
| const astUtil = require('../util/ast'); | ||
| const docsUrl = require('../util/docsUrl'); | ||
| const lifecycleMethods = require('../util/lifecycleMethods'); | ||
|
|
||
| module.exports = { | ||
| meta: { | ||
| docs: { | ||
| description: 'Lifecycle methods should be methods on the prototype, not class fields', | ||
| category: 'Best Practices', | ||
| recommended: false, | ||
| url: docsUrl('no-arrow-function-lifecycle') | ||
| }, | ||
| schema: [], | ||
| fixable: 'code' | ||
| }, | ||
|
|
||
| create: Components.detect((context, components, utils) => { | ||
| function getText(node) { | ||
| const params = node.value.params.map((p) => p.name); | ||
|
|
||
| if (node.type === 'Property') { | ||
| return `: function(${params.join(', ')}) `; | ||
| } | ||
|
|
||
| if (node.type === 'ClassProperty') { | ||
| return `(${params.join(', ')}) `; | ||
| } | ||
|
|
||
| return null; | ||
| } | ||
|
|
||
| /** | ||
| * @param {Array} properties list of component properties | ||
| */ | ||
| function reportNoArrowFunctionLifecycle(properties) { | ||
| properties.forEach((node) => { | ||
| const propertyName = astUtil.getPropertyName(node); | ||
| const nodeType = node.value.type; | ||
| const isLifecycleMethod = ( | ||
| node.static && !utils.isES5Component(node) | ||
| ? lifecycleMethods.static | ||
| : lifecycleMethods.instance | ||
| ).indexOf(propertyName) > -1; | ||
|
|
||
| if (nodeType === 'ArrowFunctionExpression' && isLifecycleMethod) { | ||
| const range = [node.key.range[1], node.value.body.range[0]]; | ||
| const text = getText(node); | ||
|
|
||
| context.report({ | ||
| node, | ||
| message: '{{propertyName}} is a React lifecycle method, and should not be an arrow function or in a class field. Use an instance method instead.', | ||
| data: { | ||
| propertyName | ||
| }, | ||
| fix: (fixer) => fixer.replaceTextRange(range, text) | ||
| }); | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| return { | ||
| 'Program:exit'() { | ||
| values(components.list()).forEach((component) => { | ||
| const properties = astUtil.getComponentProperties(component.node); | ||
| reportNoArrowFunctionLifecycle(properties); | ||
| }); | ||
| } | ||
| }; | ||
| }) | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| /** | ||
| * @fileoverview lifecycle methods | ||
| * @author Tan Nguyen | ||
| */ | ||
|
|
||
| 'use strict'; | ||
|
|
||
| module.exports = { | ||
| instance: [ | ||
| 'getDefaultProps', | ||
| 'getInitialState', | ||
| 'getChildContext', | ||
| 'componentWillMount', | ||
| 'UNSAFE_componentWillMount', | ||
| 'componentDidMount', | ||
| 'componentWillReceiveProps', | ||
| 'UNSAFE_componentWillReceiveProps', | ||
| 'shouldComponentUpdate', | ||
| 'componentWillUpdate', | ||
| 'UNSAFE_componentWillUpdate', | ||
| 'getSnapshotBeforeUpdate', | ||
| 'componentDidUpdate', | ||
| 'componentDidCatch', | ||
| 'componentWillUnmount', | ||
| 'render' | ||
| ], | ||
| static: [ | ||
| 'getDerivedStateFromProps' | ||
| ] | ||
| }; |
Oops, something went wrong.