You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/docs/code-splitting.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -247,7 +247,7 @@ const App = () => (
247
247
248
248
## Named Exports {#named-exports}
249
249
250
-
`React.lazy` currently only supports default exports. If the module you want to import uses named exports, you can create an intermediate module that reexports it as the default. This ensures that treeshaking keeps working and that you don't pull in unused components.
250
+
`React.lazy` currently only supports default exports. If the module you want to import uses named exports, you can create an intermediate module that reexports it as the default. This ensures that tree shaking keeps working and that you don't pull in unused components.
Copy file name to clipboardExpand all lines: content/docs/faq-functions.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -83,7 +83,7 @@ class Foo extends Component {
83
83
84
84
>**Note:**
85
85
>
86
-
>Using an arrow function in render creates a new function each time the component renders, which may have performance implications (see below).
86
+
>Using an arrow function in render creates a new function each time the component renders, which may break optimizations based on strict identity comparison.
87
87
88
88
### Is it OK to use arrow functions in render methods? {#is-it-ok-to-use-arrow-functions-in-render-methods}
Copy file name to clipboardExpand all lines: content/docs/hooks-effect.md
+2-2
Original file line number
Diff line number
Diff line change
@@ -333,7 +333,7 @@ function FriendStatusWithCounter(props) {
333
333
}
334
334
```
335
335
336
-
**Hooks lets us split the code based on what it is doing** rather than a lifecycle method name. React will apply *every* effect used by the component, in the order they were specified.
336
+
**Hooks let us split the code based on what it is doing** rather than a lifecycle method name. React will apply *every* effect used by the component, in the order they were specified.
337
337
338
338
### Explanation: Why Effects Run on Each Update {#explanation-why-effects-run-on-each-update}
339
339
@@ -473,7 +473,7 @@ In the future, the second argument might get added automatically by a build-time
473
473
>
474
474
>If you use this optimization, make sure the array includes **all values from the component scope (such as props and state) that change over time and that are used by the effect**. Otherwise, your code will reference stale values from previous renders. Learn more about [how to deal with functions](/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies) and [what to do when the array changes too often](/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often).
475
475
>
476
-
>If you want to run an effect and clean it up only once (on mount and unmount), you can pass an empty array (`[]`) as a second argument. This tells React that your effect doesn't depend on *any* values from props or state, so it never needs to re-run. This isn't handled as a special case -- it follows directly from how the inputs array always works.
476
+
>If you want to run an effect and clean it up only once (on mount and unmount), you can pass an empty array (`[]`) as a second argument. This tells React that your effect doesn't depend on *any* values from props or state, so it never needs to re-run. This isn't handled as a special case -- it follows directly from how the dependencies array always works.
477
477
>
478
478
>If you pass an empty array (`[]`), the props and state inside the effect will always have their initial values. While passing `[]` as the second argument is closer to the familiar `componentDidMount` and `componentWillUnmount` mental model, there are usually [better](/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies) [solutions](/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often) to avoid re-running effects too often. Also, don't forget that React defers running `useEffect` until after the browser has painted, so doing extra work is less of a problem.
This code calls `computeExpensiveValue(a, b)`. But if the inputs`[a, b]` haven't changed since the last value, `useMemo` skips calling it a second time and simply reuses the last value it returned.
743
+
This code calls `computeExpensiveValue(a, b)`. But if the dependencies`[a, b]` haven't changed since the last value, `useMemo` skips calling it a second time and simply reuses the last value it returned.
744
744
745
745
Remember that the function passed to `useMemo` runs during rendering. Don't do anything there that you wouldn't normally do while rendering. For example, side effects belong in `useEffect`, not `useMemo`.
746
746
@@ -767,7 +767,7 @@ Note that this approach won't work in a loop because Hook calls [can't](/docs/ho
767
767
768
768
### How to create expensive objects lazily? {#how-to-create-expensive-objects-lazily}
769
769
770
-
`useMemo` lets you [memoize an expensive calculation](#how-to-memoize-calculations) if the inputs are the same. However, it only serves as a hint, and doesn't *guarantee* the computation won't re-run. But sometimes you need to be sure an object is only created once.
770
+
`useMemo` lets you [memoize an expensive calculation](#how-to-memoize-calculations) if the dependencies are the same. However, it only serves as a hint, and doesn't *guarantee* the computation won't re-run. But sometimes you need to be sure an object is only created once.
771
771
772
772
**The first common use case is when creating the initial state is expensive:**
773
773
@@ -844,9 +844,9 @@ Traditionally, performance concerns around inline functions in React have been r
844
844
}, [a, b]);
845
845
```
846
846
847
-
* The [`useMemo` Hook](/docs/hooks-faq.html#how-to-memoize-calculations) makes it easier to control when individual children update, reducing the need for pure components.
847
+
* The [`useMemo`](/docs/hooks-faq.html#how-to-memoize-calculations) Hook makes it easier to control when individual children update, reducing the need for pure components.
848
848
849
-
* Finally, the `useReducer` Hook reduces the need to pass callbacks deeply, as explained below.
849
+
* Finally, the [`useReducer`](/docs/hooks-reference.html#usereducer) Hook reduces the need to pass callbacks deeply, as explained below.
850
850
851
851
### How to avoid passing callbacks down? {#how-to-avoid-passing-callbacks-down}
Copy file name to clipboardExpand all lines: content/docs/hooks-intro.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -81,7 +81,7 @@ We'll discuss this more in [Using the Effect Hook](/docs/hooks-effect.html#tip-u
81
81
82
82
In addition to making code reuse and code organization more difficult, we've found that classes can be a large barrier to learning React. You have to understand how `this` works in JavaScript, which is very different from how it works in most languages. You have to remember to bind the event handlers. Without unstable [syntax proposals](https://babeljs.io/docs/en/babel-plugin-transform-class-properties/), the code is very verbose. People can understand props, state, and top-down data flow perfectly well but still struggle with classes. The distinction between function and class components in React and when to use each one leads to disagreements even between experienced React developers.
83
83
84
-
Additionally, React has been out for about five years, and we want to make sure it stays relevant in the next five years. As [Svelte](https://svelte.technology/), [Angular](https://angular.io/), [Glimmer](https://glimmerjs.com/), and others show, [ahead-of-time compilation](https://en.wikipedia.org/wiki/Ahead-of-time_compilation) of components has a lot of future potential. Especially if it's not limited to templates. Recently, we've been experimenting with [component folding](https://github.com/facebook/react/issues/7323) using [Prepack](https://prepack.io/), and we've seen promising early results. However, we found that class components can encourage unintentional patterns that make these optimizations fall back to a slower path. Classes present issues for today's tools, too. For example, classes don't minify very well, and they make hot reloading flaky and unreliable. We want to present an API that makes it more likely for code to stay on the optimizable path.
84
+
Additionally, React has been out for about five years, and we want to make sure it stays relevant in the next five years. As [Svelte](https://svelte.dev/), [Angular](https://angular.io/), [Glimmer](https://glimmerjs.com/), and others show, [ahead-of-time compilation](https://en.wikipedia.org/wiki/Ahead-of-time_compilation) of components has a lot of future potential. Especially if it's not limited to templates. Recently, we've been experimenting with [component folding](https://github.com/facebook/react/issues/7323) using [Prepack](https://prepack.io/), and we've seen promising early results. However, we found that class components can encourage unintentional patterns that make these optimizations fall back to a slower path. Classes present issues for today's tools, too. For example, classes don't minify very well, and they make hot reloading flaky and unreliable. We want to present an API that makes it more likely for code to stay on the optimizable path.
85
85
86
86
To solve these problems, **Hooks let you use more of React's features without classes.** Conceptually, React components have always been closer to functions. Hooks embrace functions, but without sacrificing the practical spirit of React. Hooks provide access to imperative escape hatches and don't require you to learn complex functional or reactive programming techniques.
Copy file name to clipboardExpand all lines: content/docs/optimizing-performance.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -153,7 +153,7 @@ new webpack.DefinePlugin({
153
153
newwebpack.optimize.UglifyJsPlugin()
154
154
```
155
155
156
-
You can learn more about this in [webpack documentation](https://webpack.js.org/guides/production-build/).
156
+
You can learn more about this in [webpack documentation](https://webpack.js.org/guides/production/).
157
157
158
158
Remember that you only need to do this for production builds. You shouldn't apply `UglifyJsPlugin` or `DefinePlugin` with `'production'` value in development because they will hide useful React warnings, and make the builds much slower.
Copy file name to clipboardExpand all lines: content/tutorial/tutorial.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -523,7 +523,7 @@ Note how in `handleClick`, we call `.slice()` to create a copy of the `squares`
523
523
524
524
### Why Immutability Is Important {#why-immutability-is-important}
525
525
526
-
In the previous code example, we suggested that you use the `.slice()`operator to create a copy of the `squares` array to modify instead of modifying the existing array. We'll now discuss immutability and why immutability is important to learn.
526
+
In the previous code example, we suggested that you use the `.slice()`method to create a copy of the `squares` array to modify instead of modifying the existing array. We'll now discuss immutability and why immutability is important to learn.
527
527
528
528
There are generally two approaches to changing data. The first approach is to *mutate* the data by directly changing the data's values. The second approach is to replace the data with a new copy which has the desired changes.
0 commit comments