diff --git a/content/blog/2018-09-10-introducing-the-react-profiler.md b/content/blog/2018-09-10-introducing-the-react-profiler.md index b17cc46e..6fb7fcef 100644 --- a/content/blog/2018-09-10-introducing-the-react-profiler.md +++ b/content/blog/2018-09-10-introducing-the-react-profiler.md @@ -18,6 +18,7 @@ This blog post covers the following topics: * [Troubleshooting](#troubleshooting) * [No profiling data has been recorded for the selected root](#no-profiling-data-has-been-recorded-for-the-selected-root) * [No timing data to display for the selected commit](#no-timing-data-to-display-for-the-selected-commit) +* [Deep dive video](#deep-dive-video) ## Profiling an application @@ -186,3 +187,11 @@ Sometimes a commit may be so fast that `performance.now()` doesn't give DevTools In this case, the following message will be shown: ![No timing data to display for the selected commit](../images/blog/introducing-the-react-profiler/no-timing-data-for-commit.png) + +## Deep dive video + +The following video demonstrates how the React profiler can be used to detect and improve performance bottlenecks in an actual React application. + +
+ + diff --git a/content/docs/optimizing-performance.md b/content/docs/optimizing-performance.md index 745cae6f..8d7da359 100644 --- a/content/docs/optimizing-performance.md +++ b/content/docs/optimizing-performance.md @@ -183,6 +183,23 @@ Note that **the numbers are relative so components will render faster in product Currently Chrome, Edge, and IE are the only browsers supporting this feature, but we use the standard [User Timing API](https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API) so we expect more browsers to add support for it. +## Profiling Components with the DevTools Profiler + +`react-dom` 16.5+ and `react-native` 0.57+ provide enhanced profiling capabilities in DEV mode with the React DevTools Profiler. +An overview of the Profiler can be found in the blog post ["Introducing the React Profiler"](/blog/2018/09/10/introducing-the-react-profiler.html). +A video walk through of the profiler is also [available on YouTube](https://www.youtube.com/watch?v=nySib7ipZdk). + +If you haven't yet installed the React DevTools, you can find them here: + +- [Chrome Browser Extension](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) +- [Firefox Browser Extension](https://addons.mozilla.org/en-GB/firefox/addon/react-devtools/) +- [Standalone Node Package](https://www.npmjs.com/package/react-devtools) + +> Note +> +> A production profiling bundle of `react-dom` is also available as `react-dom/profiling`. +> Read more about how to use this bundle at [fb.me/react-profiling](https://fb.me/react-profiling) + ## Virtualize Long Lists If your application renders long lists of data (hundreds or thousands of rows), we recommended using a technique known as "windowing". This technique only renders a small subset of your rows at any given time, and can dramatically reduce the time it takes to re-render the components as well as the number of DOM nodes created.