It was a pleasure and a great honor to be on the React Native Radio podcast and talk about performance!! 🚀♥️
Thanks for having me 😊 @infinite.red are amazing hosts!
It was a pleasure and a great honor to be on the React Native Radio podcast and talk about performance!! 🚀♥️
Thanks for having me 😊 @infinite.red are amazing hosts!
Les vidéos du meetup de Janvier avec @almouro.bsky.social et @bapness.bsky.social sont disponibles !
Bon visionnage ! 🍿
www.youtube.com/watch?v=T13e...
www.youtube.com/watch?v=_bn7...
Who needs an excuse to come to the most beautiful city in the world? ♥️🇫🇷🥐
Only one week left to submit your #ReactNative talk to @reactnativeconnect.bsky.social ! 😱
sessionize.com/react-native...
It's an old version of a "box" from french provider Orange
To be honest, I was surprised the app was still running knowing how bad the device was 😅
It's a challenge 😅
I find it quite fun actually, but it's tough nonetheless
TV device runs a calculation in 482s, 26x slower than a Samsung A10s
Investigating #performance issues on TV is wild 😅
🤯 One of the TV devices we're targeting for a #ReactNative app is
~20x slower than a Samsung A10s (already low-end)
~400x slower than iPhone 15
📈 It's a web-based TV, so we can use the A10s and apply 20x slowdown in Chrome to get similar perf 🥲
When you optimize, you can easily use it to compare perf before and after the fix!
flashlight test --bundleId xyz.blueskyweb.app --testCommand "adb shell input swipe 500 1200 500 200 50" --iterationCount 1 --duration 5000 --record --skipRestart
flashlight report before.json after.json
... UI/render thread would be even higher with a video playing (there was none in my test)
FlashList does make it much easier to optimize but indeed it adds recycling. Maybe the new list by @jayz.us would be an easier React-idiomatic option 🤞
My full flashlight command if anyone is curious:
... we still keep 11 screens of posts in the hierarchy 🤔
No time to dig more atm, but I'd venture the large number of elements displayed by the list is responsible for the impact on JS thread, and in turn on the UI thread as well (and so on FPS).
Should be checkable in the React DevTools 🤞
UI/ ...
A quick flashlight test on a A10S with one quick scroll shows:
- HEAVY JS usage
to the point where the list goes blank quickly (after a post from @tazsingh.com 😅)
- high UI thread usage as well, causing FPS drops
FlatList are notoriously difficult to optimize, I see a windowSize={11}, meaning...
Unrelated but I got this screen when I tried to reply 😅 @bsky.app
Reply did go through though it would seem
(Using pixel 8 Android 14)
It gives a bit more details related to the frame times on the native side
High frame time would correlate to high UI thread and render thread CPU usage on Flashlight and also lower FPS
It doesn't give details on UI thread work outside of the frame rendering times though
I see thanks! 🙏
Would it be possible to have native screens on Android as well? How complex do you think that would be to add in?
Fantastic job! 👏👏
One of my biggest annoyances with big RN apps is:
Clicking on tabs is slow after the first time you go to a tab. Because React mounts the whole tab for the first time and blocks JS
Since the tabs are native now, does this mean we can have super fast performance as well? 🥹
Excited to say I'll be giving a performance workshop next week at @rnlconf.bsky.social ! 🔥🚀
We'll improve performance of a dummy app, learning how to use:
🔦Flashlight
⚛️ React DevTools
📈 JS profiler
🤖 Android Studio
And more!
Haha Mr Performance, I like that name!
Danke schön Herr Kwast! ♥️
Hello Bluesky 🦋! First post here!
So instead of saying something somewhat meaningful about mobile apps performance,
I'll just mention that funnily enough, this image is the first thing that pops when I google <my username> + BlueSky 😅
I am now a Portuguese medieval castelo 🏰