Skip to content

Commit 903a2b0

Browse files
committed
Upgrade nits from feedback
1 parent 2c11622 commit 903a2b0

File tree

1 file changed

+20
-11
lines changed

1 file changed

+20
-11
lines changed

src/content/blog/2024/04/01/react-19-upgrade-guide.md

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -50,16 +50,18 @@ yarn add react react-dom
5050
We introduced a [new JSX transform](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) in 2020 to improve bundle size and use JSX without importing React. In React 19, we're adding additional improvements like using ref as a prop and JSX speed improvements that require the new transform.
5151

5252

53-
If you haven't already, you will need to enable the new transform in your project. We expect most apps will not be effected since the transform is enabled in most environments already. For manual instructions on how to upgrade, please see the [announcement post](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html).
53+
If you haven't already, you will need to enable the new transform in your project. We expect most apps will not be affected since the transform is enabled in most environments already. For manual instructions on how to upgrade, please see the [announcement post](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html).
5454

5555
</Note>
5656

5757
## Removing deprecated React APIs {/*removing-deprecated-react-apis*/}
5858

59-
### Removing PropTypes and DefaultProps {/*removing-proptypes-and-defaultprops*/}
60-
`PropTypes` were been [deprecated in v15.5.0](https://legacy.reactjs.org/blog/2017/04/07/react-v15.5.0.html#new-deprecation-warnings).
59+
### Removing `propTypes` and `defaultProps` {/*removing-proptypes-and-defaultprops*/}
60+
`PropTypes` were deprecated in [April 2017 (v15.5.0)](https://legacy.reactjs.org/blog/2017/04/07/react-v15.5.0.html#new-deprecation-warnings).
6161

62-
In React 19, we're removing the PropType checks from the React package, and using them will be silently ignored. If you're using PropTypes, we recommend migrating to TypeScript or another type-checking solution. We're also removing `defaultProps` in place of ES6 default parameters.
62+
In React 19, we're removing the `propType` checks from the React package, and using them will be silently ignored. If you're using `propTypes`, we recommend migrating to TypeScript or another type-checking solution.
63+
64+
We're also removing `defaultProps` from function components in place of ES6 default parameters. Class components will continue to support `defaultProps` since there is no ES6 alternative.
6365

6466
```js
6567
// Before
@@ -87,7 +89,9 @@ function Heading({text = 'Hello, world!'}: Props) {
8789

8890
### Removing Legacy Context {/*removing-legacy-context*/}
8991

90-
Legacy Context using `contextTypes` and `getChildContext` was [deprecated in v16.6.0](https://legacy.reactjs.org/blog/2018/10/23/react-v-16-6.html) due to subtle bugs that were easy to miss. In React 19, we're removing Legacy Context to make React slightly smaller and faster.
92+
Legacy Context was deprecated in [October 2018 (v16.6.0)](https://legacy.reactjs.org/blog/2018/10/23/react-v-16-6.html).
93+
94+
Legacy Context was only available in class components using the APIs `contextTypes` and `getChildContext`, and was replaced with `contextType` due to subtle bugs that were easy to miss. In React 19, we're removing Legacy Context to make React slightly smaller and faster.
9195

9296
If you're still using Legacy Context in class components, you'll need to migrate to the new `contextType` API:
9397

@@ -144,15 +148,17 @@ class Child extends React.Component {
144148
```
145149

146150
### Removing string refs {/*removing-string-refs*/}
147-
String refs were [deprecated in v16.3.0](https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html) because they had [multiple downsides](https://github.com/facebook/react/issues/1373). In React 19, we're removing string refs to make React simpler and easier to understand.
151+
String refs were deprecated in [March, 2018 (v16.3.0)](https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html).
152+
153+
Class components supported string refs before being replaced by ref callbacks due to [multiple downsides](https://github.com/facebook/react/issues/1373). In React 19, we're removing string refs to make React simpler and easier to understand.
148154

149155
If you're still using string refs in class components, you'll need to migrate to ref callbacks:
150156

151157
```js
152158
// Before
153159
class MyComponent extends React.Component {
154160
componentDidMount() {
155-
this.refs['input'].focus();
161+
this.refs.input.focus();
156162
}
157163

158164
render() {
@@ -163,7 +169,6 @@ class MyComponent extends React.Component {
163169

164170
```js
165171
// After
166-
// Before
167172
class MyComponent extends React.Component {
168173
componentDidMount() {
169174
this.input.focus();
@@ -184,7 +189,9 @@ TODO: instructions.
184189
</Note>
185190

186191
### Removing module pattern factories {/*removing-module-pattern-factories*/}
187-
Module pattern factories were [deprecated in v16.9.0](https://legacy.reactjs.org/blog/2019/08/08/react-v16.9.0.html#deprecating-module-pattern-factories) because they were rarely used and supporting it causes React to be slightly larger and slower than necessary. In React 19, we're removing support for module pattern factories, and you'll need to migrate to regular functions:
192+
Module pattern factories were deprecated in [August 2019 (v16.9.0)](https://legacy.reactjs.org/blog/2019/08/08/react-v16.9.0.html#deprecating-module-pattern-factories).
193+
194+
This pattern was rarely used and supporting it causes React to be slightly larger and slower than necessary. In React 19, we're removing support for module pattern factories, and you'll need to migrate to regular functions:
188195

189196
```js
190197
// Before
@@ -201,7 +208,9 @@ function FactoryComponent() {
201208
```
202209

203210
### Removing `createFactory` {/*removing-createfactory*/}
204-
`createFactory` was [deprecated in v16.13.0](https://legacy.reactjs.org/blog/2020/02/26/react-v16.13.0.html#deprecating-createfactory) because it was rarely used and is replaced by JSX. In React 19, we're removing `createFactory` and you'll need to migrate to JSX:
211+
`createFactory` was deprecated in [February 202 (v16.13.0)](https://legacy.reactjs.org/blog/2020/02/26/react-v16.13.0.html#deprecating-createfactory).
212+
213+
Using `createFactory` was common before broad support for JSX, but it's rarely used today and can be replaced with JSX. In React 19, we're removing `createFactory` and you'll need to migrate to JSX:
205214

206215
```js
207216
// Before
@@ -242,7 +251,7 @@ TODO
242251
TODO
243252

244253
### Removing `ReactDOM.findDOMNode` {/*removing-reactdom-finddomnode*/}
245-
`ReactDOM.findDOMNode` was [deprecated in v16.3.0](https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html) because it was a legacy escape hatch that was slow to execute, fragile to refactoring, only returned the first child, and broke abstraction levels (see more [here](https://legacy.reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage)). In React 19, we're removing `ReactDOM.findDOMNode` and you'll need to migrate to using refs:
254+
`ReactDOM.findDOMNode` was [deprecated in October 2018 (v16.6.0)](https://legacy.reactjs.org/blog/2018/10/23/react-v-16-6.html#deprecations-in-strictmode) because it was a legacy escape hatch that was slow to execute, fragile to refactoring, only returned the first child, and broke abstraction levels (see more [here](https://legacy.reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage)). In React 19, we're removing `ReactDOM.findDOMNode` and you'll need to migrate to using refs:
246255

247256
```js
248257
// Before

0 commit comments

Comments
 (0)