Crux:

• Don’t jump on the bandwagon of changing tools when the inefficiency lies in your processes.
• If you are the sole developer on the team, get ready to make a lot of mistakes and learn from them, it’s not your fault.
• The solution to a problem is usually simpler than what you are doing.

The Backstory of how I learned React Native

Back in 2019, I was working at a company that had local social media applications with a good user base, we already had a robust website that also worked well on mobile.

Things were going well and then we decided to build a native mobile app because Apple makes everything difficult by not allowing push notifications for PWAs.

We did not have the resources to build native apps separately. And after careful consideration, we decided to go the hybrid route.

So I embarked on learning React native which was all the rage back then.

In a month we had an MVP ready where we had most of the critical functionality working.

Why is React Native so slow?

I was pretty happy with it until we did a few demos. The app had a significant lag when navigating. Apparently, react-navigation runs on the main thread and blocks it until it has done animating, I will tell you why this did not matter.

So after trying out a lot of ideas to optimise it, which I honestly don’t remember, I believe I tested the app on production mode and tried to optimise Redux data retrieval.

In the end, we decided to eject out of Expo so we could use react-native-navigation which runs its tasks through the bridge on the native side. The promise was that it wouldn’t block the JS main thread and give a smoother frame rate.

Seemed like a good idea at the time.

Well, we went through with it. It wasn’t a big task but it wasn’t a drop in replacement either.

After doing all that, the results were …mild to say the least.

I was expecting the app to become faster in navigating and showing content on each screen but that didn’t really happen. We wanted to minimise jitter but it was still happening. (In hindsight this seems such a bad way to optimise the app, what can I say, I was a Junior dev)

Optimisation is Simpler than You Think!

I don’t regret to admit that I was fairly new to React and React Native at the time. With this inexperience came a lot of complications, we only had one part-time senior dev on the team, so whenever they were available, we didn’t have time to discuss design issues with the app and focused on developing features.

The screens we had set went something like this:

One big useEffect which calls 3 different slow endpoints and consolidates data from them into Redux.

It went something like this:

function ScreenComponent() {
  ...lots of useStates
  
  useEffect(() => {
    // Get users => save to state
    // Get likes => save to state
    // Get message count => save to state
    // Get last message => save to state
    ....
  }, [...lots of dependencies])
}

Then 3 state setters that handle data from them and also store it in redux.

The selectors were doing a lot of heavy lifting of filtering mapping and sorting the data, I should’ve just stored the data better to begin with.

I couldn’t do anything to the API which was built back in 2010, and returned excessive amounts of data which was unnecessary for the app.

It wasn’t Expo, it wasn’t React Native, nor was it a navigation issue. The issue was sitting in front of the IDE, me. 😅

With this kind of setup, I realized later on that the app slowed down because of our data retrieval and storage strategy.

I’m pretty sure that app could’ve been built without using any useEffect and would’ve been faster than ever.

I overloaded the navigation by starting 3 race condition API requests which rendered the screen dozens of times before the data became consolidated.

When that wasn’t enough, the Redux selectors were unstable which mapped and filtered data on every re-render.

Lessons Learned

This whole experience taught me the value of optimisation and watching for patterns that can become a big issue later on. I am not proposing premature optimisation, things are pretty fast as is, but an optimisation strategy, stats to monitor and raising alarms when they exceed is definitely worth it.

Since that time, I have worked on more than 10 production React Native apps, 3 of which were MVPs for startups with thousands of users and never had any issue with lag or jitter. Lesson well learned.

---

What are your early career stories that make you go “oof” and what did you learn from them?