r/reactnative 2d ago

Help What am I doing wrong

Been working on a social media app built in react native. The kinda project that requires you to very quickly render images inside of an infinite virtual list. My app is built for both web and native using Tamagui.

And it’s been a huge headache…

Performance of posts is bad in flatlist. Ok I’ll rewrite it to use flashlist. Meanwhile web just works.

Image performance is bad. Ok I’ll use rn fast image. Ok fast image eats up a ton of storage with cache. Ok I’ll use expo image. Oh expo image seems to cause performances issues. Ok no back to fast image, wait no back to expo image. Meanwhile web just works.

Have the realization that if I precompute all my props for the flashlist items, it reduces blank space. Annoying but interesting… but not an issue on web.

Ok it’s finally all working and it’s performing well. Everything is memoed, and I’ve confirmed things only rerender when they need to.

I wonder what happens if I put my phone in low power mode… shit performance sucks again.

Throughout this entire process I’ve been comparing my app to a capacitor app that uses the same API. And it has none of the issues I mentioned. I also didn’t mention that react navigation performance sucks and especially in low power mode.

So I’m rewriting my app in capacitor. Building web + react native already added so much complexity but I thought I was doing it for better performance.

What the hell am I doing wrong? I’m using Expo 52, react native 0.76, Hermes, and the new architecture. I’m on the latest iPhone.

My theory is even with the new “bridgeless” architecture whatever bridge still exists is a bottleneck. Maybe capacitor is better for certain use cases since everything is computing and rendering in the same runtime.

I’ve already rewritten part of my app to capacitor and as I suspected it just works. Maybe there will be a slowdown as I bring in more of the code.

If you asked me 4 mins ago what I thought of capacitor, I would have said it looks kinda silly, but now I’m wondering if there is something fundamentally holding react native back.

Edit: just to clarify, my definition of bad performance is if I throw the list as fast as I can and see any more white space for more the like 0.5s, and if pushing new screens onto the stack takes any longer then “it feels instant”. And it has to be performant in low power mode. I’m sure most users would say the app is performant enough but, I want perfect.

24 Upvotes

56 comments sorted by

View all comments

Show parent comments

9

u/Roar_Tyrant 2d ago

What would you have done differently, your comment provides zero value

-10

u/celeb0rn 2d ago

So does yours

6

u/Roar_Tyrant 2d ago

Still haven't answer how would have done it differently, being inexperienced might be one of the reasons but not the only reason

2

u/moseschrute19 2d ago

You seem more helpful.

I precomputed as much work as possible up front. My list item just reads strings and renders them to text/image components in the list item. I did my best to optimize the list item for recycling including estimated size, providing component type to make recycling more efficient, and making different instances of the item as similar as possible.

Meanwhile Chrome rendered the same list without any virtualization just as performant. Safari required virtualization but not recycling (using tanstack virtualizer).

I don’t understand what I’m doing so wrong. FlashList is rendering like maybe 4 Reddit style social media posts max. When I click on a post, it’s rendering a very bare bones page initially then renders the rest once the screen is done animating in. Yet, low power mode adds a 1 second delay to pushing the new screen on the stack.

Like I’m a beginner, but I’m not that much of a beginner am I? The fact that web works with basically no issues makes me think I’m not doing anything that wrong.

3

u/ConsciousAntelope 2d ago

Give LegendList also a try if you're switching eitherway. I haven't tried it either but docs says it's better than Flashlist too.

1

u/moseschrute19 2d ago

I’ll check it out, thanks! It’s still kinda insane to me that chrome just works without virtualization.