codeforboston / codeforboston/cliff-effects
Remove anonymous functions from event handler props
- Dominant language
- JavaScript
- Stars
- 30
- Forks
- 62
- PR merge metrics
- No merged PRs in 30d
Description
When your `render()` method passes an anonymous function as a prop, a new function instance will be created and that prop's value will be different every time `render()` is called, which means that React will assume it needs to refresh the tree, even if nothing has "actually" changed. This can result in unnecessary DOM manipulation.
Wherever possible, we should have the function be a member of the component's class and bind it to `this` in the constructor, and just pass that function reference.
e.g.
Before:
```
class MyComponent extends React.Component {
render() {
return (
alert(this) } />
);
}
}
```
After:
```
class MyComponent extends React.Component {
constructor(...args) {
super(...args);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
alert(this);
}
render() {
return (
);
}
}
```
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.