Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
react/jsx-no-bind: why refs and arrow functions are allowed?
See original GitHub issueIn the 3.x.x this rule was turned on. Reasoning is clear and makes a perfect sense. But this commit doesn’t make sense to me. Why refs and arrow functions are allowed, while bind is not? New arrow functions are being created on each re-render and they !== to each other, so what’s the point of this rule with this change?
Issue Analytics
- State:
- Created 7 years ago
- Comments:19 (5 by maintainers)
Top Results From Across the Web
Why shouldn't JSX props use arrow functions or bind?
Using an inline arrow function will cause PureComponent s, and components that use shallowCompare in the shouldComponentUpdate method to rerender anyway.
Read more >Methods · Styleguide JavaScript
Arrow functions are always anonymous, which means e.g. it is not possible to reliably call them recursively since there is no reliable lexical...
Read more >No bind or arrow functions in in JSX Props - Maarten Mulders
In its ES6 version, the rule says: “No .bind() or Arrow Functions in JSX Props (react/jsx-no-bind).” The TypeScript version has two rules, ...
Read more >eslint react/jsx-no-bind (no functions as props) work around?
eslint react/jsx-no-bind (no functions as props) work around? I have a Pressable element Child that takes its onPress function as a ...
Read more >When should I use arrow functions with React?
Arrows prevent this bugs. Arrow functions don't redefine the value of this within their function body. This makes it a lot easier to...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Okay, so in other words, the rule is: when using a stateful component, bind handlers in the constructor, but prefer using a stateless component with arrow functions for handlers in
render?All else being the same, if the
onClickhandler needs access to a prop value, is it preferable to bind the handler in a stateless component (onClick={() => props.onSelect(props.eventKey)}) or to use a bound method in a stateful component?