Skip to content

Commit

Permalink
Small wording tweaks
Browse files Browse the repository at this point in the history
  • Loading branch information
Brian Vaughn committed Jul 28, 2019
1 parent 375e46b commit e6d718c
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 11 deletions.
14 changes: 8 additions & 6 deletions content/blog/2019-08-01-react-v-16-9.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,10 @@ Other release notes here...

## [`React.Profiler`](/docs/profiler.html) {#profiler}

The `Profiler` measures how often a React application renders and what the "cost" of rendering is. Its purpose is to help identify parts of an application that are slow and may benefit from optimizations such as memoization.
The `Profiler` measures how often a React application renders and what the "cost" of rendering is. Its purpose is to help identify parts of an application that are slow and may benefit from [optimizations such as memoization](/docs/hooks-faq.html#how-to-memoize-calculations).

The profiler accepts a callback function ([`onRender`](/docs/profiler.html#onrender-callback)) which React calls any time a descendant component "commits" an update.
A `Profiler` can be added anywhere in a React tree to measure the cost of rendering that part of the tree.
It requires two props: an `id` (string) and an [`onRender` callback](/docs/profiler.html#onrender-callback) (function) which React calls any time a component within the tree "commits" an update.

```js{2,7}
render(
Expand All @@ -24,8 +25,9 @@ render(

To learn more about the `Profiler` and the parameters passed to the `onRender` callback, check out [the `Profiler` docs](/docs/profiler.html).

> Note: This profiler does not record times in production mode.
> Note:
>
> Profiling adds some additional overhead, so it is disabled in the production build.
> React provides a special production build with profiling enabled.
> Read more about how to use this bundle at [fb.me/react-profiling](https://fb.me/react-profiling)
> Profiling adds some additional overhead, so **it is disabled in [the production build](https://reactjs.org/docs/optimizing-performance.html#use-the-production-build)**.
>
> To opt into production profiling, React provides a special production build with profiling enabled.
> Read more about how to use this build at [fb.me/react-profiling](https://fb.me/react-profiling)
10 changes: 5 additions & 5 deletions content/docs/reference-profiler.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ Its purpose is to help identify parts of an application that are slow and may be
## Usage

A `Profiler` can be added anywhere within a React tree to measure the cost of rendering that part of the tree.
A `Profiler` can be added anywhere in a React tree to measure the cost of rendering that part of the tree.
It requires two props: an `id` (string) and an `onRender` callback (function) which React calls any time a component within the tree "commits" an update.

For example, to profile a `Navigation` component and its descendants:
Expand Down Expand Up @@ -94,21 +94,21 @@ Let's take a closer look at each of the props:

* **`id: string`** -
The `id` prop of the `Profiler` tree that has just committed.
This can be used to identify which tree was committed if a shared callback is used to profile multiple parts of an application.
This can be used to identify which part of the tree was committed if you are using multiple profilers.
* **`phase: "mount" | "update"`** -
Identifies whether the tree has just been mounted for the first time or re-rendered due to a change in `props`, `state`, or hooks.
Identifies whether the tree has just been mounted for the first time or re-rendered due to a change in props, state, or hooks.
* **`actualDuration: number`** -
Time spent rendering the `Profiler` and its descendants for the current update.
This indicates how well the subtree makes use of memoization (e.g. [`React.memo`](/docs/react-api.html#reactmemo), [`useMemo`](/docs/hooks-reference.html#usememo), [`shouldComponentUpdate`](/docs/hooks-faq.html#how-do-i-implement-shouldcomponentupdate)).
Ideally this value should decrease significantly after the initial mount as many of the descendants will only need to re-render if their specific `props` change.
Ideally this value should decrease significantly after the initial mount as many of the descendants will only need to re-render if their specific props change.
* **`baseDuration: number`** -
Duration of the most recent `render` time for each individual component within the `Profiler` tree.
This value estimates a worst-case cost of rendering (e.g. the initial mount or a tree with no memoization).
* **`startTime: number`** -
Timestamp when React began rendering the current update.
* **`commitTime: number`** -
Timestamp when React committed the current update.
This value is shared between all `Profiler`s in a commit, enabling them to be grouped if desirable.
This value is shared between all profilers in a commit, enabling them to be grouped if desirable.
* **`interactions: Set`** -
Set of ["interactions"](http://fb.me/react-interaction-tracing) that were being traced the update was scheduled (e.g. when `render` or `setState` were called).

Expand Down

0 comments on commit e6d718c

Please sign in to comment.