Building a Fast and Responsive UI in React Native

4 min readApr 18, 2018

Over the past two year of working with React Native, the team and I at WeDo have learned a lot of tips and tricks on how to build a great experience for our users. Here is a quick run down of a few tips and tricks to make your apps UI more responsive and fast. 🚀

🗺️ Native Navigation

First and foremost is navigation, the core to any app. Since React Native doesn’t offer much out of the box we have to bring our own navigation library to the party. For us at WeDo we initially started with a javascript based navigation solution. After a few months of trying to get a native feeling experience we switched to a native solution. React Native Navigation is our library of choice these days when it comes to navigation. By using a native navigation library the user immediately feels it. Transitions between screens are quicker and native navigation gestures like swipe back are available.

🏃 Make it fast from the beginning

Just like the navigation we talked about above. Making your whole app faster is really worth it. A lot of us working with React Native come from a web background. Thinking of state and data management like you would on the web is not the best approach. Rather think more as a native app developer would. Cache your app state as much as you can. On launch, make it quick. Do the minimum amount of work to get the user into the app. Cache any network requests. Have previous fetch data ready when the user first opens the app, then sync in the background.

🚀 Add a launch screen

Having a launch screen gives the illusion of a faster app. Either that launch screen just being your apps logo, or even better the initial visual state of your app. Adding in the extra visual step makes the app feel faster.

💔 Break up components

When it comes to performance in React Native we want the least amount of re-renders as possible. One of the biggest causes of re-renders are components that are just doing too much. If you have some components that are doing too much try breaking them up into smaller components. This allows react to naturally optimize your components by only updated the components that have changed vs updating a whole larger component.

🤐 Minimal UI Updates

Like the above tip, we want the UI to update as little as possible. So if you’re doing frequent updates to the UI (possibly something every second) try throttling it. Updating the UI only when necessary is a large factor in a fast and responsive UI.

📱 Component Initial State

Try setting up an initial state for your component. A state that the component can render easily without relying on anything else to load. Even if it’s an empty state or just the basics of the components UI without any of the data. This will give the user the visual and not just a blank screen. Tricks the user into thinking something is happening faster than it really is.

📠 Async network requests

Every network request you do should be async. Never have a component that is depending on a network request finishing. Provide a component with an initial state or previously cached state to render while the network request is being performed. At minimum you should always include a loading indicator. The worst experience for a user is having a UI that is waiting for a network request but no visual indication to the user about what is going on.

🖼️ Optimize your assets

Optimize any assets you use within the app. So images, videos, audio files, pdfs, etc. These things can be expensive to send across the bridge so making sure they are as small as can be is important. I’ve written up a whole post on Image assets specifically.

Your app still feeling slow? Check out my post on Performance Profiling in React Native.