Comments (10)
Doesn't that result in the same issues as any other lambda in a JSX prop? Personally I like using a pattern like this for ref handlers:
class Button extends React.Component<{}, {}> {
private buttonElement: HTMLElement;
private refHandlers = {
button: (ref) => this.buttonElement = ref,
...
};
public render() {
return <button ref={this.refHandlers.button} />;
}
}
@jkillian any thoughts on a whitelist of exceptions for this rule?
from tslint-react.
A whitelist seems like unnecessary extra complexity to me. If a lamda is needed, it can be declared and initialized before the JSX code.
As far as the case of ref
, there's no need to recreate the lambda on every render, which is exactly what this rule is trying to prevent. Something like the code example above (the object literal isn't necessary) works well.
from tslint-react.
@adidahiya wrote:
I would accept a PR to whitelist certain props like ref.
However #107, just permitted "ref"
and did not introduce a whitelist.
Hard to say how significant the performance impact is that @shahan312 is raising (I'm generally onboard with @testerez's line of thinking), but it seems as reasonable a concern as any I've seen on this topic. My own interest in a whitelist is to allow anonymous functions for render
props which are often used with closure scoping (e.g. <Route />
from react-router).
With this in mind, I've opened a PR to introduce a configurable whitelist. Please let me know what you think!
from tslint-react.
Closing, as I don't think we'll take any action here
from tslint-react.
@jkillian in react the performance drop with arrow function as prop is due to pure components re-rendering when it could be avoided. The creation on a new function is not a problem.
The ref
attribute is not part of the props so it's not a problem to use an arrow function here.
See: facebook/react#9086 (comment)
All React examples I could find recommend the usage of an arrow function in ref
and alternatives seem needlessly complicated.
IMO the fact that this rule warns on ref
makes it pretty useless.
from tslint-react.
The
ref
attribute is not part of the props so it's not a problem to use an arrow function here.
This is a good point. I would accept a PR to whitelist certain props like ref
.
from tslint-react.
ref
is not part of the props, but would like the ability to keep the linter error for ref
attribute, as when it is provided as a lambda, the ref gets called to unset it and then again to set it again, on every render. Should I create a new PR to bring in as an option?
Source: https://reactjs.org/docs/refs-and-the-dom.html#caveats
from tslint-react.
@shahan312 did you mesure any actual performance loss related to that?
from tslint-react.
@adidahiya how about the ability to allow on DOM components where he performance implications would be limited?
Essentially this suggestion for eslint jsx-eslint/eslint-plugin-react#1238
from tslint-react.
Closing due to deprecation, see #210
from tslint-react.
Related Issues (20)
- React must be in scope in tsx file HOT 4
- Feature request: pair ReactDOM.unmountComponentAtNode with ReactDOM.render calls. HOT 1
- Why jsx-alignment do not includes automatic code fix? HOT 1
- Rule suggestion: no unneeded <React.Fragment> or <> HOT 1
- jsx-wrap-multiline does not enforce end-paren if begin-paren is valid HOT 1
- jsx-no-bind bug? HOT 5
- Pull in rules from tslint-microsoft-contrib HOT 3
- Cannot set "jsx-boolean-value" to 'never' ? HOT 1
- jsx-wrap-multiline does not check nested JSX HOT 2
- New rule suggestion: jsx-singleline-no-parens HOT 1
- jsx-no-multiline-js: allow multiline block comments HOT 2
- Migrate to eslint-plugin-react HOT 2
- react-ssr-friendly HOT 3
- Roadmap: tslint-react -> eslint-plugin-react HOT 1
- jsx-self-close rule doesn't actually support autofix HOT 1
- jsx-wrap-multiline issue with trailing-comma HOT 2
- Automatically ignore null keyword usage within getDerivedStateFromProps method HOT 3
- Allow/disallow curly braces for string literal attributes (enforce double/single quotes only) HOT 1
- Missing LICENSE file in npm package HOT 1
- jsx-curly-spacing accepted formats HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tslint-react.