Add no-context rule (fixes #455) #736
Conversation
docs/rules/no-context.md
Outdated
| @@ -0,0 +1,51 @@ | |||
| # Prevent usage of context (no-context) | |||
|
|
|||
| [Context](https://facebook.github.io/react/docs/context.html) is an advanced and experimental feature. The API is likely to change in future releases. Most applications will never need to use context. Especially if you are just getting started with React, you likely do not want to use context. Using context will make your code harder to understand because it makes the data flow less clear. It is similar to using global variables to pass state through your application. | |||
There was a problem hiding this comment.
It would be nice to point people toward things like higher order components if they want to use context.
|
@lencioni thanks for reviewing, all fixed. I gonna test this rule against my project a bit and let you know how it goes. |
| message: 'Using context is not allowed.' | ||
| }] | ||
| }] | ||
| }); |
There was a problem hiding this comment.
It would be nice to include examples where:
- component is an SFC that uses
functionsyntax (not arrow function) contextis destructured in the signature- the second argument has a name that is not
context - access of context via shenanigans
(...args) => { args[1] }function Hello() { arguments[1] }this['context']var foo = 'context'; this[foo]const { context } = this;
There was a problem hiding this comment.
I don't know how to capture these shenanigans.... 😞
|
@lencioni @ljharb Everything done except tests of context via shenanigans. Advice needed on how to capture those. I also tested it against my project, it's working well. |
|
I found a false positive in my project. <div>
{menuItems.map((e, i) => <MenuItem value={e.path} key={i} primaryText={e.text}/>)}
</div>My current rule for stateless functional component is that, for any React component detected, if it has a second argument, then it uses |
lib/rules/no-context.js
Outdated
| * @returns {Boolean} True if node is a stateless functional component, | ||
| * false if not. | ||
| */ | ||
| function isStatelessComponent(node) { |
There was a problem hiding this comment.
Component.detect seems to be not working, so I tried detecting stateless functional component manually. However, utils.isReturningJSX didn't work as expected, it's returning false no matter what.
|
@zachguo It sounds like |
|
@zachguo are you no longer interested in completing this PR? |
|
Probably yes for this PR. |
Fixes #455