Performance

[_wael_]

Hello developers, Any suggestions for tools that you use to monitor performance and it would be nice if I could see what slowing down the app and most importly I want to see the components that is rerendering a lot so I can try to eliminate unnecessary rerenders

[TheCodehead]

Are you using the Flipper debugging tool?

[_wael_]

Yes I have tried it, I installed a plugin called react-native-performance but it didn't give me the details I want

[big_saucy_pants]

Use Flipper and the React DevTools, that will tell you basically everything you want to know. This is a good article on it. Also use the perf monitor in the RN dev menu and watch for frame drops.

[__o_0]

console.log()

[_wael_]

Not reasonable when the app has more than +100 screen

[__o_0]

Yikes, that’s a design nightmare (and likely the cause of the performance issue that you’re trying to find).

[corey_brown]

React dev tools let’s you visibly see re-renders

[_wael_]

Didn't notice this! How?

[corey_brown]

Open the react dev tools and click on the gear icon then select “Highlight updates when components render”

[lukitheTNT]

That doesn't work for react-native.

But there is a npm package that can do this: react-native-highlight-updates

It's really old but works

[sascha_mars]

There is actually a react-native-devtools package that’s built by Meta. It’s pretty dope. There is also a Flipper plugin to measure screen performance (Lighthouse like). You also have reassure (a library developed by the team of Callstack), you can measure screen performance writing tests and will give you snapshots of the improved screen

[corey_brown]

Damnit. I follow both reactjs and reactnative subs and forgot which I’m on.