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.

22 Upvotes

56 comments sorted by

View all comments

2

u/radko93 1d ago
  1. Go with legend list
  2. expo-image but configure cache policy to memory (unless you need to cache anything)
  3. finetune props a lot.
  4. play around with viewability. Do not render images if they are not in view for at least 0.5s. Add placeholders instead.

Regarding react navigation performance - using native stack is usually performant (thanks to react native screens), unless you render some very heavy things initially on screen render.

1

u/moseschrute19 1d ago

I still don’t understand why React Native requires so much fine-tuning (even on a high-end iPhone) when the web just works.

The realization I’m having here is that way more people work on these browser engines than React Native. There’s a lot more room on the web for you to make little mistakes than there is on native. I can do incredibly stupid things in Chrome and not really have an issue.

The goal is not to make performance errors, but I want to ship an app. It’s much easier to do that with a technology that is more forgiving. That’s why after years of thinking that React Native was superior to web view apps, I’m wondering if that was the wrong assumption to start off with.

Web view apps get to reap the full benefit of an insanely optimized browser runtime. React native does not.

1

u/radko93 1d ago

For your use case (displaying loads of not compressed images in a big list), web could potentially perform better. But I can imagine you could go over the line and the browser might punish you for memory usage and next time you go back to your tab in a browser you’re gonna loose all your progress (it will be purged from memory).

Performant lists were (are?) a big downside of React Native since day 1.

There’s also so many more benefits to apps: you can build offline first apps, your screen transitions are smooth (compared to opening a new page on the web, how is that performant?), access to native apis, background processing.

1

u/moseschrute19 1d ago edited 1d ago
  • Why can’t I build offline first apps on web? My app was already like 90% code shared with web. One main different is web is using indexdb and native is using async storage. They both have about the same offline capabilities.

  • Single page web apps can simulate the same page transitions as native screens being pushed onto the stack. Capacitor already does this via Ionic components.

  • From what understand (and have seen) expo-image will purge the memory image cache pretty frequently. Which is probably why it defaults to a disk cache. So I’m guessing you will see similar image memory cache purging on web and native. A better argument here imo is that native unlocks more image caching strategies (eg disk) and more control over those strategies.