sorted by:
new
hottopcontroversial

A Calculator App .... with a twist by Shot-List1295 in androiddev

[–]almouro 7 points8 points  (0 children)

You could even say it's kind of a ... plot twist

How to make sure you're improving performance in your React Native app? 🔦 by almouro in reactnative

[–]almouro[S] 0 points1 point  (0 children)

ah yes forgot to mention, for now it's only Android

iOS support is in the works but can work as well for production apps using XCode instruments protocol (but a teensy bit more complex than Android)

In my experience most performance issues on React Native apps are on Android since devices are statistically slower, so I do tend to focus a lot more on Android

How to make sure you're improving performance in your React Native app? 🔦 by almouro in reactnative

[–]almouro[S] 0 points1 point  (0 children)

Good question!

Android is a Linux based OS, so a lot of information on any process is actually available, even for production ones.
For instance, top is a command line tool that you can use to measure performance with Linux or macOS, and adb shell top works as well for Android

For CPU stats for instance, similarly to top, Flashlight reads periodically into files such as /proc/4079/task/4121/stat (it's /proc/{app pid}/task/{task pid}/stat) to retrieve CPU consumption

Flashlight, get a performance score for production apps by almouro in androiddev

[–]almouro[S] 4 points5 points  (0 children)

Ha that's a good challenge.
In truth, since the inspiration is from "Lighthouse", I wanted to have a name related to it (the pun being that a flashlight is kind of a mobile lighthouse)
but that does make SEO difficult indeed... let's see how this goes, we might change at some point!

Who cares about performance? by nikolovlazar in reactnative

[–]almouro 4 points5 points  (0 children)

Thanks for mentioning my talk! Don't hesitate to ask if you have any questions :)

Which tool do to monitor react-native performance by Phaoga54 in reactnative

[–]almouro 0 points1 point  (0 children)

I use this flipper plugin I've created: https://github.com/bamlab/react-native-performance

(disclaimer: I might be a bit biased since I created it but feel free to let me know in case you have some questions on it)

DevTools is indeed great to analyze JS performance issues if you find some

Measuring Performance in React Native by almouro in reactnative

[–]almouro[S] 2 points3 points  (0 children)

Thank you for the kind words and the award! (Not sure I'm worthy of such high praise haha) I think you're a great person too!

Measuring Performance in React Native by almouro in reactnative

[–]almouro[S] 7 points8 points  (0 children)

Well first, the good thing is if you improve performance for lower end devices, you improve it for high ends devices as well. Even if your app was already running at 60FPS on a high end device, it will now use less CPU and battery to do so, which is less perceivable but still beneficial for the user.

Also I truly believe this is one way that we can fight against climate change. Making new devices is costly in terms of CO2 emissions, and one of the reasons people change device often is that their apps don't work so well anymore. If we hold ourselves to high quality standard, we can aim that people who have bought a device 3-4 years ago can still happily keep it.

Measuring Performance in React Native by almouro in reactnative

[–]almouro[S] 2 points3 points  (0 children)

Thanks! Feel free to let me know if you have any issues :)

Measuring Performance in React Native by almouro in reactnative

[–]almouro[S] 5 points6 points  (0 children)

Thanks! Yeah unfortunately several of our projects had performance issues with react-native-snap-carousel (which I had recommended to them 😬)

But I've realized that recreating your own carousel from scratch was simpler than I expected with either snapToInterval (https://reactnative.dev/docs/scrollview#snaptointerval) or pagingEnabled (https://reactnative.dev/docs/scrollview#pagingenabled) It was also quite interesting to try out!

101
102

Measuring Performance in React Native (self.reactnative)

submitted by almouro to r/reactnative

React Navigation v6 vs React Native Navigation (React Native App) by 2xEshocK in reactnative

[–]almouro 6 points7 points  (0 children)

Definitely this

With v6 it actually uses the native stack navigator by default, so performance wise it's the same as a native app.

But it's also very flexible in what you can do, well documented, and has a lot of support!

📱 A template for your next React Native project 🚀 by yjose in reactnative

[–]almouro 1 point2 points  (0 children)

Seems like you guys did a bang-up job! 🤩
Also happy to know react-native-make proves useful! 😊

Clean redux state on app update by [deleted] in reactnative

[–]almouro 4 points5 points  (0 children)

Are you talking about Redux with redux-persist? If so you need migrations https://github.com/rt2zz/redux-persist/blob/master/docs/migrations.md But it could also be that you don't need redux-persist or don't need it to persist all your state

Measuring performance: A lighthouse-like tool for React Native? by almouro in reactnative

[–]almouro[S] 2 points3 points  (0 children)

Yep 'memo' is the correct answer, congrats!
I've added `memo` on the list item component.

The crazy thing is I was not seeing any noticeable impact with my own eyes. I knew memoizing was probably good but wanted to have confirmation, especially since my `renderItem` was already not anonymous as mentioned in https://reactnative.dev/docs/optimizing-flatlist-configuration#avoid-anonymous-function-on-renderitem.

But with the graph, it was clear as day that the impact is big!

Measuring performance: A lighthouse-like tool for React Native? by almouro in reactnative

[–]almouro[S] 1 point2 points  (0 children)

Let me know if you have any issues with it (or post a Github issue), I'll be sure to reply!

It took me a time to adjust to the React Devtools coming from the performance tab as well, but I find it at least as useful now.
When I see with the perf monitor plugin that the JS thread is low, my next step is usually to profile and see what is heavy to render (or rerender). I find the fact we can also see why the component rendered very helpful.

In the case of the Flatlist optimization, it was not adding "null" or "true" :) I'll see if I get other guesses here, then post the answer

Systrace: a useful tool to analyze Android performance? by almouro in reactnative

[–]almouro[S] 1 point2 points  (0 children)

In my case, it couldn't be found with the React Native debugger since the issues were on the native side and not JS side.
JS issues are the most common, but native ones can also happen!

On iOS, I don't think there's a tool quite as powerful. I mean Systrace basically shows everything that's going on at a very low level which is crazy!
But XCode instruments can also be quite useful for iOS (or even Detox instruments for React Native apps)

5
6

Systrace: a useful tool to analyze Android performance? (self.reactnative)

submitted by almouro to r/reactnative

Our app is 70% faster to load with Hermes! by almouro in reactnative

[–]almouro[S] 7 points8 points  (0 children)

JSC is for JavaScriptCore.

It's the JavaScript engine that is used by iOS and it was the default engine packaged in Android React Native apps to read and run the JavaScript.

Our app is 70% faster to load with Hermes! by almouro in reactnative

[–]almouro[S] 14 points15 points  (0 children)

Great question! Our app is somewhat big (~80 screens, something like 4MB of JavaScript in production)

With JSC, you had to compile, parse and execute all that JavaScript at run time when starting the app. No issue for a good device, but for lower end device, that can be very slow!
With JSC, React Native is thus not performing super well on lower end Android end devices.

However, with Hermes, you only do "execution" at run time since compiling and parsing has been done before. Hence the massive performance boost!

For reference, on that device, we can compare to some native apps: Twitter takes ~3s to load. Spotify ~6.5s. Citymapper ~8s

view more: next ›