Introduction to React Native Performance

Introduction to the Bridge

Bridging the Gap Between JavaScript and Native

Fundamentals of the Bridge

Building Blocks of Communication

  • Message Queue
  • Native modules

Role of the Bridge

Facilitating Communication

  • JS to Native Communication
  • Data Serialization
  • Message Passing

Concurrency - JS thread vs UI thread

Start

Main Thread

load .js bundles and send to JS thread

React

Reconciler generates new VDOM layout

JS Thread

layout calculations

using Yoga

UI

updates

Shadow thread

Native modules

JS & UI Thread Frames 

Demo

Detailed bridge flow

JavaScriptCore

Event Loop in RN

Bridge architecture

Message Queue location:

https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/BatchedBridge/MessageQueue.js

Let's Spy on message queue and see it live

import MessageQueue from 'react-native/Libraries/BatchedBridge/MessageQueue';

const spyFunction = (msg: SpyData) => {
  if (msg.module !== 'WebSocketModule') {
    const direction =
      msg.type === 0 ? 'native -> javascript' : 'javascript -> native';
    console.debug(
      `${msg.module}: ${direction}, method: ${msg.method}, ${JSON.stringify(
        msg.args,
      )}`,
      {
        ...msg,
        type: msg.type === 0 ? 'native -> javascript' : 'javascript -> native',
      },
    );
  }
};

MessageQueue.spy(spyFunction);

The new architecture

Understanding Re-renders

Remember: Every re-render is a pass through the bridge

Common Pitfalls

  1. Not Utilizing Memoization

  2. Inline Functions and Objects

  3. Improper List Rendering

  4. Unnecessary State Updates

  5. Not Using Callbacks

  6. Not Batching State Updates

  7. Re-renders on Every State Update

  8. useEffects with unnecessary deps

React.memo

Rect DevTools & Flipper overview

Code for this session

https://linktr.ee/vnovick

https://github.com/vnovick/rn-intro-to-performance-demo-app

Intro

By Vladimir Novick

Intro

  • 226

More from Vladimir Novick