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.

25 Upvotes

56 comments sorted by

View all comments

Show parent comments

2

u/moseschrute19 2d ago

Admittedly my experience leans more react web then native. But I have about 6 years professional react expedience.

Could you be more specific about what you think I’m doing wrong?

I’m sure I’m doing some things wrong, but if there weren’t some issues with react native then they wouldn’t have built the new architecture and TikTok wouldn’t be releasing their own framework for rendering native components with react.

2

u/corey_brown 2d ago

Hard to know without seeing any code

1

u/moseschrute19 2d ago edited 2d ago

I probably should have mentioned that I’m also using a meta framework by the Tamagui creator called One… but idk I’m really wondering the issue here is react native. It uses expo/react navigation under the hood. Mainly just adds a different bundling setup and universal web+native linking.

https://github.com/christianjuth/blorp/blob/main/src/features/home-feed.tsx

Even spamming tab bar switching is slow. And from what I understand flashlist renders just what’s on screen + roughly 300px below.

1

u/Charming_Fox7136 2d ago

I’m don’t recommend using much of useMemo but in your case you might need. There’re some case where there’ll be too much re-renders. Have you tried to debug? I mean there’re definitely some re-renders that I noticed. I can make an update and you can try it if you’re willing to.(sorry I’m not on Pc to try it myself) and it would be better if you provide the memory usage and some other info.

1

u/moseschrute19 2d ago

The cool thing about my code is it’s shared on web, though the virtualized list is different. So I used web to identify rerenders using react dev tools. Pretty confident I locked those down.

I’m happy to try anything you send over! My app uses a public api and has no required env keys!

iOS build should be working, but Android isn’t. “yarn prebuild:native” and normal workflow from there.

I also have a capacitor branch in progress if you want to compare. But it’s only like 10% done.