How to check wasted renders on React Native?

user_7010473 0
Viewed 5879

I am trying to debug performance issues in a React-Native app, and I am trying to check which components are being uselessly rendered. I tried checking this question:

How to determine JS bottlenecks in React Native code?

But it has no answer. In addition, the docs (https://reactjs.org/docs/perf.html) say that react-addons-perf is no longer supported, and I don't know if that applies also to React-Native or only to React.

What I would like is a step-by-step guide on how to check wasted renders on React-Native (not React).

react-native
1 Answers

There are ways to detect wasted re-renders in react. Something like rn-why-did-you-update. It works with both React and React Native. Or you can use console logs to detect re-renders.

You can track the performance using the react native debugger or the chrome debugger. i have added links to how to track performance in react native apps.

Helpful links:

Install forked libraries for rn : https://www.vladopandzic.com/javascript/how-to-npm-install-from-forked-github-repository/

https://medium.com/vena-engineering/optimizing-react-rendering-61a10e741edb

https://medium.com/@ohansemmanuel/how-to-eliminate-react-performance-issues-a16a250c0f27

user_32618250
Related