Skip to content

Commit 8b39991

Browse files
karlhorkygaearon
authored andcommitted
Update name of property initializer proposal (facebook#10812)
The proposal for property initializers is called [Public Class Fields](https://tc39.github.io/proposal-class-public-fields/) now (part of the combined [Class Fields](https://github.com/tc39/proposal-class-fields) proposal).
1 parent 0479959 commit 8b39991

File tree

1 file changed

+3
-3
lines changed

1 file changed

+3
-3
lines changed

docs/docs/handling-events.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ You have to be careful about the meaning of `this` in JSX callbacks. In JavaScri
9797

9898
This is not React-specific behavior; it is a part of [how functions work in JavaScript](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/). Generally, if you refer to a method without `()` after it, such as `onClick={this.handleClick}`, you should bind that method.
9999

100-
If calling `bind` annoys you, there are two ways you can get around this. If you are using the experimental [property initializer syntax](https://babeljs.io/docs/plugins/transform-class-properties/), you can use property initializers to correctly bind callbacks:
100+
If calling `bind` annoys you, there are two ways you can get around this. If you are using the experimental [public class fields syntax](https://babeljs.io/docs/plugins/transform-class-properties/), you can use class fields to correctly bind callbacks:
101101

102102
```js{2-6}
103103
class LoggingButton extends React.Component {
@@ -119,7 +119,7 @@ class LoggingButton extends React.Component {
119119

120120
This syntax is enabled by default in [Create React App](https://github.com/facebookincubator/create-react-app).
121121

122-
If you aren't using property initializer syntax, you can use an [arrow function](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) in the callback:
122+
If you aren't using class fields syntax, you can use an [arrow function](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) in the callback:
123123

124124
```js{7-9}
125125
class LoggingButton extends React.Component {
@@ -138,4 +138,4 @@ class LoggingButton extends React.Component {
138138
}
139139
```
140140

141-
The problem with this syntax is that a different callback is created each time the `LoggingButton` renders. In most cases, this is fine. However, if this callback is passed as a prop to lower components, those components might do an extra re-rendering. We generally recommend binding in the constructor or using the property initializer syntax, to avoid this sort of performance problem.
141+
The problem with this syntax is that a different callback is created each time the `LoggingButton` renders. In most cases, this is fine. However, if this callback is passed as a prop to lower components, those components might do an extra re-rendering. We generally recommend binding in the constructor or using the class fields syntax, to avoid this sort of performance problem.

0 commit comments

Comments
 (0)