For JavaScript developers who want to learn React Native. Learn how to build not just an app, but a Product.

About this Course

Where does React Native fall within app categories? Should you invest in it?

The Value of Building Real-World Apps in React Native

Once you get the hang of the ecosystem around React Native, building apps will be the easy part. We need to consider storyboarding - the art of the right way to build apps.

Storyboarding a React Native App's Components and Flow

Starting from the ground up? We'll look at the structure of the boilerplate code. An opinionated way to build apps, inspired by several apps in production.

Bootstrapping a React Native App With Boilerplate

Set up, build and run the boilerplate code, with a battle-hardened template and all the necessary tools already integrated.

How to Start Building a React Native iOS and Android App

Getting Started

Stacked app or tabbed navigation, drawer menus and modals, and what's the best place to load user sessions, and other application data.

Getting Started With React Native Navigation

Set the app's launch screen and icons. Learn what image to put in native and what to bundle with React Native. Set the tab bar icons.

Set App Logos, Launch Screens, and Icons in React Native

Learn about the screen lifecycle, and customize the app bar and the back button. We will also look at perceived load time and how to manage it.

Optimize Perceived Performance With React Native Lifecycle

Navigation and Screens

Atomic design is a mental model of how the UI should be built and laid out. It is at the core of how we are going to build our apps.

Intro to Atomic Design Patterns [with examples]

To build a design system we need to start by defining a typography; defining the fonts, colors and icons of the app.

Building a Typography Design System in React Native

Global styles help lay the design structure the app should follow. We'll extend our typography from the previous lesson to define styles, mainly for atoms, molecules and organisms.

How to Set Global Styles in React Native

Should we use images or SVGs? Should we be putting them in the React Native bundle, or on native and save OTA bandwidth? Let's look at the best practices.

SVG vs PNG: Which Image Format to Use in a React Native App

We'll look at the Atomic design pattern's atoms and molecules; what they are and how they help build the design system of the app.

Customizing React Native Elements With Global Style

Built using atoms and molecules, Organisms are the complex components that deliver specific features. They are at the core of an app that delivers a consistent UX.

Combining React Elements Into Widgets

What happens when we press a button on an app vs when we press a button on a web page? That difference is User Experience.

How to Build a Design System for Optimal User Experience

Design System

State Management in React Native has similar options to React.

How State Management Works in React Native vs React

Context API provides a way to pass data through the component tree - no more prop-drilling!

Using React Context API to Pass Data to React Components

Intro to Managing React Application State With Flux and Redux

State Management

The very reliable "fetch". Learn the best practices for structuring the app's services and APIs to make them resilient to change.

Making API Calls in a React Native App With fetch and Axios

Middleware allows for side-effects to be executed without blocking state updates. Logger and Analytics make for perfect use cases.

Using Middleware to Run React API Calls in the Background

AsyncStorage is an asynchronous, unencrypted, persistent, key-value storage system for React Native.

How to Store User Login Data With React Native Async Storage

API calls and Middlewares

How to debug a React Native app and a look at a working combination of tools and techniques. Remote Debugger, DevTools and error boundaries.

Intro to Debugging React Native With iOS and Android DevTools

React Native Debugger and Flipper; the evolution of debugging options at React Native.

Using React Native Debugger to Optimize an App

Running on a real device is imperative to testing how the app will actually perform.

How to Test React Native Apps on iOS and Android Devices

Debugging

How JavaScript works. Learn best practices, find the node that is taking time to render, improve FPS performance, learn when to do image caching and find out about Hermes.

How to Improve JavaScript Performance and Boost Frame Rates

Does your app have lot of images or tabs? Thousands of items or an endless scroll? Let's look at how to handle it best in React Native.

Use List Virtualization to Optimize React Native Rendering

Performance

CodePush is Microsoft's App Center cloud service that enables React Native developers to deploy mobile app updates directly to their users' devices.

How to Deploy React Native Apps With Microsoft CodePush

Error reporting in JavaScript and native code

How to Get React Native Error Logs With Sentry

Conclusion

CodePush and Error Reporting

The one-stop solution for micro-animations in a React Native app.

Intro to Building React Native Animations With Lottie

Look no further than React Native SVG for your SVG solution.

Using React Native SVG to Support SVG on iOS and Android

Some common references and special components supported by React Native, Android back handler, and a bit of know-how!

React Native Cheat Sheet

Bonus Content

With React Native, the most important thing is to understand the ecosystem and how it comes together to create an app. By understanding the overall architecture, we will be able to take the full of advantage the platform.

The course will start by covering the fundamentals like setting up the navigation, setting up the screens, styles, and the UI elements, before moving on to more advanced topics such as state management, crash/error reporting, setting up analytics and middlewares, debugging, and performance optimizations. We will also learn how to avoid/fix frame drops - possibly the most watched parameter of any UI application.

We will also build a Design System and will follow the [Atomic Design Pattern](https://atomicdesign.bradfrost.com/chapter-2/) of building layouts. A Design System primarily consists of three parts:
- UI Inventory and Patterns
- Typography
- Spacing and Styles

We will cover these in detail through the modules of the course. We will also learn about the React Native best practices, how to avoid rabbit holes, and focus on building a performant app.

**This is an opinionated way of building apps with React Native**. The fundamentals discussed in the course, like Atomic Design Pattern and Design System, can be applied to building any UI application, not just ones using React Native.

## One Complete App

The course comes with one complete eCommerce sample app that is discussed through the modules of the course.

## Up-to-date

The course builds on an open-source boilerplate template and is kept up to date with React, React Native and dependent library versions. It is also updated with the latest APIs and libraries that are introduced, like Hooks, hermes, flipper etc.

## Why this course

React Native for JavaScript Developers using TypeScript is based on years of experience in building React Native apps on production. The open-source boilerplate code discussed in the course is the platform for multiple apps on App Store and Play Store today. One of them being a Unicorn.

We will take a **Product** based development approach to building apps. React Native abstracts out a lot of platform specific nuances, so wouldn't focusing on building the app as an experience make the most sense. The design pattern will help us exactly with that, and we will put together a structure that is both scalable and extensible. This architecture also helps keep the design separate from the development.

At the end of this course, you will not only be able to build real-world apps with React Native, but also have the fundamentals of building any enterprise UI application.

Discord [channel](https://discord.gg/fz43pNnh)

Code along, and learn to build scalable and performant apps with React Native, from a Product perspective.

The newline Guide to React Native for JavaScript Developers using TypeScript

How to build real world apps. Code along.

How to do state management in React Native

Storyboarding - Build apps from a Product perspective

Understand the React Native ecosystem, the right way

Jumpstart using a template that has ~200 github stars

Architecture that separates design and development

Learn UX best practices and troubleshoot performance bottlenecks

My Mantra is: Everything ties down to freeing up the Javascript thread.

We have come across a lot of best practices in the course so far, and adapting these has definitely helped to build a performant app.

However, our app can still face performance bottlenecks, such as when trying to render a very long list, display a lot of images, or for other reasons, which we may need to troubleshoot.

Let's look at what we can do in such scenarios.

 from React Native is a goldmine for troubleshooting issues, and you should be familiar with these. Here we will discuss what I have found to be the commonest issues, with useful suggestions.

JavaScript is a single-threaded language. What that means is it has only a single thread to do whatever we want it to do. It has event loops and all the code must be executed or resolved in the same event loop, or the application will have to drop frames to accommodate for the extra time taken.

From the UI perspective: In the above picture, if the 

 command takes more than 16ms, the app will have to drop one frame to accommodate the delay as the event loop is not over yet, resulting in the users experiencing lags and janks.

The JavaScript thread is responsible for most of the business logic in React Native applications. This is the main thread that needs to be taken care of as a developer. Most performance issues will have a huge, if not a severe frame drop when this thread is "busy".

The JavaScript thread is the main thread that needs to be taken care of as a developer.

Open up the developer menu in the app and toggle 

We will notice that there are two different frame rates. One is for JavaScript and the second is for the UI thread.

Now on UI, a screen needs to be refreshed at 60FPS (60 times in a second). So that gives approx ~16ms for an event loop to execute whatever is asked of it.

On average, the app takes approximately 4ms - 5ms to do composition, calculate layout changes and render the screen. So this gives us nearly 

 to execute whatever we want to on the JavaScript thread. Now, this may not seem a lot, but it is - most of the time. And if we want to keep the app responsive, we need to meet this limit. Say, if a task takes 60ms to execute, then the app will drop four frames to accommodate for it.

The JavaScript frame rate helps us understand that something is blocking the JavaScript thread and therefore the app is not being as responsive as it should be.

Frame rate may not show as exactly 60, especially in emulators. Anything above 50fps is fine, in general.

 module we saw how to troubleshoot JavaScript issues, how to find what is taking time to render, and how to find what is re-rendering.

This is the native thread that handles rendering. Remember the UI thread from the React Native architecture in the 

 lesson. Animations such as transitions are done entirely on the main thread, and so they are not impacted by frame drops on the JavaScript thread.

ScrollView also lives on the main thread, so we can scroll even while the JavaScript thread may be busy, keeping the app responsive.

Frame drops in this thread mean the issue is on the native side and the app may be using a significant amount of memory, more than the OS is ready to allocate (yes, mobile operating systems these days do try to limit that). Some common sources of issues can be:

Run your animations on the UI thread or use 

 if not permitted by React Native's Animated API.

---
title: How to Improve JavaScript Performance and Boost Frame Rates
slug: performance-best-practices
# privateVideoUrl: https://fullstack.wistia.com/medias/iia8vbkf13
isPublicLesson: false
playerCode: #1D5C72
role: LESSON
description: How JavaScript works. Learn best practices, find the node that is taking time to render, improve FPS performance, learn when to do image caching and find out about Hermes.
---

## Best practices

> My Mantra is: Everything ties down to freeing up the Javascript thread.

We have come across a lot of best practices in the course so far, and adapting these has definitely helped to build a performant app.

However, our app can still face performance bottlenecks, such as when trying to render a very long list, display a lot of images, or for other reasons, which we may need to troubleshoot.

Let's look at what we can do in such scenarios.

:::note
The official [performance guide](https://reactnative.dev/docs/performance) from React Native is a goldmine for troubleshooting issues, and you should be familiar with these. Here we will discuss what I have found to be the commonest issues, with useful suggestions.
:::

## How JavaScript works

JavaScript is a single-threaded language. What that means is it has only a single thread to do whatever we want it to do. It has event loops and all the code must be executed or resolved in the same event loop, or the application will have to drop frames to accommodate for the extra time taken.

![How JavaScript works](https://d2uusema5elisf.cloudfront.net/courses/the-newline-guide-to-react-native-for-javascript-developers/module_07/lesson_01.00/public/assets/javascript.png)

> From the UI perspective: In the above picture, if the `console.log('Third')` command takes more than 16ms, the app will have to drop one frame to accommodate the delay as the event loop is not over yet, resulting in the users experiencing lags and janks.

The JavaScript thread is responsible for most of the business logic in React Native applications. This is the main thread that needs to be taken care of as a developer. Most performance issues will have a huge, if not a severe frame drop when this thread is "busy".

> The JavaScript thread is the main thread that needs to be taken care of as a developer.

## Frame Rate

Open up the developer menu in the app and toggle _Show Perf Monitor_.

:::note
To open the developer menu: Android: `Ctrl + M` or `⌘ + M` | iOS: `⌘ + D`
:::

We will notice that there are two different frame rates. One is for JavaScript and the second is for the UI thread.

![](https://d2uusema5elisf.cloudfront.net/courses/the-newline-guide-to-react-native-for-javascript-developers/module_07/lesson_01.00/public/assets/frame-rate.png)

### JS frame rate

Now on UI, a screen needs to be refreshed at 60FPS (60 times in a second). So that gives approx ~16ms for an event loop to execute whatever is asked of it.

![](https://d2uusema5elisf.cloudfront.net/courses/the-newline-guide-to-react-native-for-javascript-developers/module_07/lesson_01.00/public/assets/60fps-3.png)

On average, the app takes approximately 4ms - 5ms to do composition, calculate layout changes and render the screen. So this gives us nearly `10ms` to execute whatever we want to on the JavaScript thread. Now, this may not seem a lot, but it is - most of the time. And if we want to keep the app responsive, we need to meet this limit. Say, if a task takes 60ms to execute, then the app will drop four frames to accommodate for it.

The JavaScript frame rate helps us understand that something is blocking the JavaScript thread and therefore the app is not being as responsive as it should be.

:::note
Frame rate may not show as exactly 60, especially in emulators. Anything above 50fps is fine, in general.
:::

In the [Debug](debugging) module we saw how to troubleshoot JavaScript issues, how to find what is taking time to render, and how to find what is re-rendering.

### UI frame rate

This is the native thread that handles rendering. Remember the UI thread from the React Native architecture in the [Real World Apps](real-world-apps) lesson. Animations such as transitions are done entirely on the main thread, and so they are not impacted by frame drops on the JavaScript thread.

ScrollView also lives on the main thread, so we can scroll even while the JavaScript thread may be busy, keeping the app responsive.

Frame drops in this thread mean the issue is on the native side and the app may be using a significant amount of memory, more than the OS is ready to allocate (yes, mobile operating systems these days do try to limit that). Some common sources of issues can be:

-   Flatlist optimization may be required
-   Too many images, so caching may be needed
-   Compressed images being used
-   SVGs having a lot of paths
-   Animations: try using a library that runs animations on the UI thread in native