Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[No QA] Add Hermes Profiling tips to Performance.md #4617

Merged
merged 3 commits into from
Sep 2, 2021
Merged

[No QA] Add Hermes Profiling tips to Performance.md #4617

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7eec4c6
add instructions for how to profile with Hermes
marcaaron Aug 12, 2021
7009071
Fix typo;
marcaaron Aug 12, 2021
4f81f87
actually think this only works on Android...
marcaaron Aug 12, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 19 additions & 2 deletions PERFORMANCE.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,31 @@

## Tools

### Chrome Dev Tools > Performance > Timing
### Chrome Dev Tools > Performance > Timing (Web Only)

- Profiling in Chrome Dev Tools performance tab in the "Timing" section
- This will show various components and how long they took to render. It can be a little intense to dig through it all at first, but the more time you spend with it the easier it gets to separate the signal from noise.
- The timing information might be inaccurate in development mode since this slows things down a ton. However, it's still useful for seeing which things take the longest and it's not too difficult to look and see which things are re-rendering.

**Suggested:** [React Performance Profiling](https://calibreapp.com/blog/react-performance-profiling-optimization)

### Hermes Profiling (Android only)

It's possible, but slightly trickier to profile the JS running on Android devices as it does not run in a browser but a JS VM that React Native must spin up first then run the app code. The VM we are currently using on both Android and iOS is called [Hermes](https://reactnative.dev/docs/profile-hermes) and is developed by Facebook.

In order to profile with Hermes follow these steps:

- In the metro bundler window press `d` on your keyboard to bring up the developer menu on your device.
- Select "Settings"
- Select "Start Sampling Profiler on Init"
- In metro bundler refresh by pressing r
- The app will start up and a profile will begin
- Once the app loads take whatever action you want to profile
- Press `d` again and select "Disable Sampling Profiler"
- A toast should appear with a path to a profile
- We need to then convert this into something Chrome Dev Tools can use by typing into terminal `react-native profile-hermes .`
- This should create a json file in the directory where we typed the previous command that we can load up into Chrome Dev Tools "Performance" tab via the "Load Profile" option and inspect further.

### React DevTools Profiler
- The React DevTools Profiler can also be used to detect similar information to Chrome Dev Tools, but is a little more streamlined. There is also an options cog where you can filter events by cutting at a specified millisecond (length it took for the thing to happen)
- Try checking the option to "Record why each component rendered while profiling". This may provide insights into why the component rendered unnecessarily.
Expand All @@ -27,7 +44,7 @@
### Why Did You Render?
- Why Did You Render (WDYR) sends console notifications about potentially avoidable component re-renders.
- It can also help to simply track when and why a certain component re-renders.
- To enable it, set `USE_WDYR=true` in your `.env` file.
- To enable it, set `USE_WDYR=true` in your `.env` file.
- You can add or exclude tracked components by their `displayName` in `wdyr.js`.
- Open the browser console to see WDYR notifications.

Expand Down