The Situation

Say you are a mobile app developer working on a React Native project using Expo Router. You've heard about the benefits of deep links, but you're not sure if implementing them will have a significant impact on your app's performance. You've tried to measure the effect of deep links on your app's routing, but you're not sure what metrics to track or how to instrument your app to get meaningful data.

You were trying to optimize your app's routing to improve user experience, but you're not sure if the effort will be worth it. You've seen a symptom - a noticeable delay when navigating between screens - but you don't know if it's related to deep links or something else. The delay is costing you users, who are abandoning your app due to frustration with its performance.

Why it Happens

Expo Router deep links can improve app performance by allowing the app to navigate directly to a specific screen, rather than loading the entire app and then navigating to the desired screen. However, implementing deep links requires changes to your app's routing configuration, which can be complex and time-consuming. To determine whether the effort is worth it, you need to measure the impact of deep links on your app's performance.

One key metric to track is the time it takes for the app to navigate between screens. This can be measured using the navigation module in Expo Router, which provides a navigate function that returns a promise that resolves when the navigation is complete. You can use this promise to measure the time it takes for the navigation to complete, and compare it to the time it takes without deep links.

The Fix, Step by Step

To measure the impact of Expo Router deep links on your app's performance, follow these steps:

  1. Instrument your app's routing: Use the navigation module in Expo Router to measure the time it takes for the app to navigate between screens. You can do this by wrapping the navigate function in a timer, like this: 
import { navigation } from '@react-navigation/native'; import { Timer } from 'react-native'; const navigate = (route) => { const startTime = new Date().getTime(); return navigation.navigate(route).then(() => { const endTime = new Date().getTime(); const navigationTime = endTime - startTime; console.log(`Navigation took ${navigationTime}ms`); }); };
  1. Compare navigation times with and without deep links: Measure the navigation time with and without deep links, and compare the results. You can do this by creating a test suite that navigates to a screen with and without deep links, and measures the time it takes for each navigation.
  2. Track user engagement metrics: In addition to measuring navigation time, track user engagement metrics such as bounce rate, time on screen, and conversion rate. These metrics can help you understand whether the improved navigation performance is having a positive impact on user engagement.

What it Costs, and When Not to Do It

Implementing Expo Router deep links can require significant changes to your app's routing configuration, which can be time-consuming and may require additional testing. However, if your app has a complex routing hierarchy or requires frequent navigation between screens, the benefits of deep links may outweigh the costs.

In general, deep links are most beneficial for apps that:

  • Have a large number of screens or a complex routing hierarchy
  • Require frequent navigation between screens
  • Have a high volume of user traffic

On the other hand, deep links may not be necessary for apps that:

  • Have a simple routing hierarchy
  • Do not require frequent navigation between screens
  • Have a low volume of user traffic

At Your Level

  • Starting out: Focus on understanding the basics of Expo Router and how to implement deep links. Start by measuring the navigation time in your app and comparing it to the navigation time with deep links.
  • Working engineer: Use the instrumentation technique described above to measure the impact of deep links on your app's performance. Consider implementing deep links if your app has a complex routing hierarchy or requires frequent navigation between screens.
  • Senior or staff: Consider the trade-offs between implementing deep links and other optimization techniques, such as code splitting or memoization. Evaluate the impact of deep links on user engagement metrics and adjust your optimization strategy accordingly.
  • Lead or director: Evaluate the ROI of implementing deep links in your app, considering the costs of implementation and testing against the potential benefits to user engagement and retention.

In the Interview

When interviewing a candidate for a React Native developer position, you may ask a question like: "How would you measure the impact of Expo Router deep links on app performance?" A weak answer might focus on the benefits of deep links without discussing how to measure their impact. A strong answer would describe the instrumentation technique outlined above, including how to measure navigation time and compare it to the navigation time with deep links. The candidate should also be able to discuss the trade-offs between implementing deep links and other optimization techniques, and evaluate the impact of deep links on user engagement metrics. A follow-up question might ask the candidate to describe a scenario in which deep links would not be necessary, and how they would determine whether the benefits of deep links outweigh the costs.

Amit Chakraborty is a founding engineer and senior architect — React Native, AI/RAG systems and production architecture. Portfolio: www.amitchakraborty.dev · LinkedIn · GitHub. Open to senior and founding engineering roles, remote worldwide.