codeforboston / codeforboston/cliff-effects

Remove anonymous functions from event handler props

Open
#974 0 comments 2 reactions 0 assignees View on GitHub
tech-debt
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.