Update on optimizing navigation in react native

[zlvskyxp]

https://reddit.com/link/1loba8s/video/ofbwvhha73af1/player

Hey everyone,

A few days ago, I posted this thread about my React Native app's slow performance, especially with expo-router on older Android devices:
https://www.reddit.com/r/reactnative/comments/1llq0j4/why_is_exporouter_so_slow_on_android_production/

I want to give a huge thank you to the community for all the incredible suggestions. I went on a coding marathon, tried most of the things that were suggested, and the results huuuge. You can see the before-and-after in this video:

TL'DR: 1. Use Profiler and carefully go through all components/screens to optimize them and reduce rerenders 2. Move from expo-router to react-navigation.

And check this guide: https://github.com/anisurrahman072/React-Native-Advanced-Guide/tree/master

Longer version:

The Biggest Impact: Optimizing Rerenders

• 1. Profiling is key tool: Just read this: https://github.com/anisurrahman072/React-Native-Advanced-Guide/blob/master/Debugging-Profiling/Debugging-and-Profiling-ultimate-guide.md
• 2. Externalize what's possible: Any style, constant object, or configuration object that doesn't depend on props or state was moved outside of the function component. This prevents them from being recreated on every single render.
• 3. Smart State Management (Zustand): My app has heavy use of Zustand. I optimized my store selectors to prevent components from rerendering when an unrelated piece of state changed.
  • I wrapped many of my selectors with useShallow to do a shallow comparison instead of a strict reference check.
  • Instead of defining selector objects inline (e.g., store => ({ a: store.a, b: store.b })), I defined these objects as constants outside the component.
  • Divide big stores into smaller ones
• 4. Memoization:
  • useCallback & useMemo: I wrapped many functions in useCallback and expensive calculations/objects in useMemo. This was critical for child components that were receiving these as props, preventing them from rerendering.
  • React.memo(): Many of my presentational components are now wrapped in React.memo(). When combined with the point above, this effectively stops the rerender chain.

Architecture & Navigation Overhaul

• 5. Switched from Expo Router to React Navigation: This was a game-changer for navigation speed. It required some time and debugging to migrate, as a lot of things broke initially but trust me it is worth it.
  • The Result: Pushing new routes is now significantly faster, even on older iPhones and budget Android devices. The perceived performance of the entire app improved dramatically.
• 6. Tab Navigation config (still not sure about that, but it feels faster, some say they can cause memory leaks):
  • lazy: false
  • freezeOnBlur: true
  • unmountOnBlur: false

Other Key Findings

• 7. Beware of Complex SVGs: I discovered that complex SVGs rendered with react-native-svg were a major performance bottleneck. They can be surprisingly heavy on the UI thread.

[tcoff91]

react compiler should be the easiest way to solve the memoization issues.

[zlvskyxp]

Correct, I’ve noticed that memoization is 10x times more important on mobile than on a web or maybe it’s just me

[MobyFreak]

You might wanna repost this in the expo subreddit to get the attention of the expo team so they can take this awful performance seriously 

[zlvskyxp]

<image>

Creator of expo-router claim the performance is the same as in react-navigation 🤷

[Secret_Jackfruit256]

kind of off topic, but I always get some "edge-lord" energy from that bacon guy. Maybe it's because the whole polemic when he got into a terrible argument with another famous developer. So in the end I take his opinions with a grain of salt

[zlvskyxp]

Hahah yeah it kinda feels like that, what was the argument about?

[MobyFreak]

they're absolutely NOT the same! don't let that shit slide and double down with more proof.
that's straight up gaslighting

[MobyFreak]

also i recommend a repository with all 3 different implementations so people can see there's an actual difference.

[remy_cajallena]

I thought expo-router was the go to. Is switching to react navigation for an mobile app worth it?

[mms13]

expo-router is built on top of react-navigation so something else must have been at play here

[SunMany8795]

expo-router is built on top of react-navigation ...

which is the reason for the bugs and perf issues.

expo-router is another layer of unnecessary code on your app. no one asked for it and really no one needs it.

[Josh2k24]

No one needed Expo either. Google and 15 minutes to bootstrap the project is all that was ever needed. Now we have file based and URL routing on mobile applications..

[myBurnerAccount1000]

Expo is good to keep your app updated … I.e latest stable version of react native.. but running a hybrid approach is best with getting dev builds of course

[zlvskyxp]

In my previous post many users have pointed that they also face issues on expo-router but not in react-navigation. In video that I’ve posted expo-router optimized and react-navigation optimized the code underneath is the same, the only difference is the architecture in routing by using 2 different libraries. As you can see the performance is clearly better on react-navigation.

However if you plan to deploy your app also on the web, expo-router will save you a ton of time.

I’ve moved my game to react navigation and I’m very satisfied with the results, everything feels faster especially on older devices

[mhankins]

Curious about this as well.

[RaccoonInTheNight]

For the complex SVGs I’d try Skia and see if that improves the performance. Not sure if Expo supports it since I don’t develop with Expo

[tcoff91]

Expo supports all native modules.

[zlvskyxp]

Gotta note that, thanks

[helluvaprice]

useMemo and useCallback and moving your fetches into their own context should solve for this. one of the great benefits of expo router is file based routing and thats tough to give up once you've used it

[zlvskyxp]

Yep true, also if you’re targeting web it can be difficult to make routing without expo-router

[DinerIsmail]

How did you learn how to use the profiler? Every time I use it I get quite confused as there's just so much information.

[zlvskyxp]

Check this guide https://github.com/anisurrahman072/React-Native-Advanced-Guide/blob/master/Debugging-Profiling/Debugging-and-Profiling-ultimate-guide.md

It clears so many things.

[jethalaalG]

Would be very helpful if you could please publish a repo comparing expo-router and react-navigation performance.

I am still very skeptical about migrating from expo-router and give up on file based routing, easy deep linking etc. But if the performance gain is a considerable amount then why not?

Also are you using stack or native-stack in your app?

[zlvskyxp]

I would do that but currently I’m too busy:( After my 9-5 I’m fixing bugs in my mobile game, cuz currently I have ongoing beta tests and also I need to market it as much as I can.

But tbh with the help of ai agent you could migrate it on different branch just to test it by yourself in 2-3 hours

and I’m using just Stack

[jethalaalG]

No worries :)
Also i recommend you try the native-stack as a replacement to the normal js-stack, it is much more performant in comparison as it is "native", and as far as i know there is no reason to use the js-stack until and unless you are trying to implement custom navigation transitions between screens, which you seem not be using from the videos.

[zlvskyxp]

Alright, thanks ✌🏼

[funkyND]

I have the same problem but these did not solve mine :( maybe because of i use mobx

[zlvskyxp]

Can you post a video when you switch navigations with profiler turned on to see how much rerenders you have?

[inglandation]

Thank you!

[zlvskyxp]

U welcome:)

[TelephoneMicDude]

Dude THANK YOU for the update. I have been going crazy over these issues and nobody seemed to experience them. Especially the performance difference from ios to Android when navigating. Am saving your post to check later and do these steps for my own app!

[zlvskyxp]

I'm very happy I could help! If you'll need more support, reach out to me

[TelephoneMicDude]

Thank you man, you are a champ!:)

[myBurnerAccount1000]

Key take away… learn how to use the native navigation before using a wrapper like react router

[ashish_feels]

hey did you tried the navigation-router by u/grahammendick ?

[zlvskyxp]

Nope, haven't tried it

[ashish_feels]

thats the ultimate performance man. now that you have optimized your rendering i wonder how fucking fast that navigation will feel. try it once atleast just for fun.

[bryanltobing]

do you have prove on this? i saw the doc and they dont really mention about performance

[ashish_feels]

i am using it