React Native under the hood

Often times we work with React Native applications without having to deal with it's platform level internals that are wisely tucked away under several layers of abstraction. Knowing the cogs that are triggered when your app is launched would be a invaluable tool under your belt if you desire to build performant apps.

In this talk, we’ll deep dive into the internals of a React Native application and understand the series of steps that happen when a react native app is launched.
I will start with an overview of how a React Native application is structure, what are the different components (native, react-native, C++ bridge) that make up the app. Next we will look at a timeline of app initialization and see how the difference components are set up and how they communicate with each other.
Finally, I will also provide some quick actionable tips that developers can use to profile and improve app cold start latency.

Transcript

1. React Native Under the hood Sangeetha KP (sangee_kp) Seattle JS Meetup
3. Sangeetha KP Software Engineer @ Alexa, Amazon Twitter: @sangee_kp
6. What happens when you launch an RN Application? 1. Operating system assigns the main thread (UI Thread) to the application
7. What happens when you launch an RN Application? 1. Operating system assigns the main thread (UI Thread) to the application 2. Native RootView is initialized
8. What happens when you launch an RN Application? 1. Operating system assigns the main thread (UI Thread) to the application 2. Native RootView is initialized 3. Bridge interface is initialized
9. What happens when you launch an RN Application? 1. Operating system assigns the main thread (UI Thread) to the application 2. Native RootView is initialized 3. Bridge interface is initialized 4. Native modules are initialized
10. What happens when you launch an RN Application? 1. Operating system assigns the main thread (UI Thread) to the application 2. Native RootView is initialized 3. Bridge interface is initialized 4. Native modules are initialized 5. JS thread and Native modules thread are spawned
11. What happens when you launch an RN Application? 1. Operating system assigns the main thread (UI Thread) to the application 2. Native RootView is initialized 3. Bridge interface is initialized 4. Native modules are initialized 5. JS thread and Native modules thread are spawned 6. JavascriptCore (JS VM) starts running
12. What happens when you launch an RN Application? 1. Operating system assigns the main thread (UI Thread) to the application 2. Native RootView is initialized 3. Bridge interface is initialized 4. Native modules are initialized 5. JS thread and Native modules thread are spawned 6. JavascriptCore (JS VM) starts running 7. Messages are sent across the bridge from Native to React Native
13. What happens when you launch an RN Application? 1. Operating system assigns the main thread (UI Thread) to the application 2. Native RootView is initialized 3. Bridge interface is initialized 4. Native modules are initialized 5. JS thread and Native modules thread are spawned 6. JavascriptCore (JS VM) starts running 7. Messages are sent across the bridge from Native to React Native 8. React Native processes the message and sends UI updates across the bridge
14. What happens when you launch an RN Application? 1. Operating system assigns the main thread (UI Thread) to the application 2. Native RootView is initialized 3. Bridge interface is initialized 4. Native modules are initialized 5. JS thread and Native modules thread are spawned 6. JavascriptCore (JS VM) starts running 7. Messages are sent across the bridge from Native to React Native 8. React Native processes the message and sends UI updates across the bridge 9. Updates in UI is reconciled and the RootView is refreshed
15. What happens when you launch an RN Application? 1. Operating system assigns the main thread (UI Thread) to the application 2. Native RootView is initialized 3. Bridge interface is initialized 4. Native modules are initialized 5. JS thread and Native modules thread are spawned 6. JavascriptCore (JS VM) starts running 7. Messages are sent across the bridge from Native to React Native 8. React Native processes the message and sends UI updates across the bridge 9. Updates in UI is reconciled and the RootView is refreshed 10. Voila!
18. 3 languages. 3 threads.
19. Further reading resources 1. https://www.youtube.com/watch ?v=8N4f4h6SThc 2. https://levelup.gitconnected.co m/wait-what-happens-when-my- react-native-application-starts-a n-in-depth-look-inside-react-nati ve-5f306ef3250f 3. https://www.reactnative.guide/3 -react-native-internals/3.1-react- native-internals.html
20. Thank you! sangee_kp