React-Native under the hood state implementation
We are currently in an era where there is a flux of javascript libraries/frameworks, every turned stone reveals a new library or framework and we start ourselves pushing towards the new reveal. Somehow in this competitive environment React and React-Native paved their way towards the top of the chain.
This blog will describe how state change is handled in React-Native.
React concepts are prerequisites for understanding the concepts of React-Native state change. I strongly suggest that if you have a knowledge gap there then you should learn about that first then start reading this blog.
React Implementation of state
This is a simple React function that has a section that displays the current count and a button that increments the count which will further update the display count in the section, but how does React do it?
React keeps track of all the components in a tree and memoizes the tree, if there is state change or any action that causes the re-render, React refreshes the tree and compares it with the memoized tree. This step isolates the components that need re-rendering. React further commits the changes that are needed in these components. These commits further make the changes in the actual DOM.
React-Native implementation of state
Before getting into state changes we must learn about the concept of The Bridge in React-Native.
The Bridge is a concept that provides a way for bidirectional and asynchronous communications between the Javascript realm and the Native Realm.
There is a lot of information about the implementation of The Bridge on the internet if you require detailed information. I’ve shared the link of a blog at the end of this blog which helped me.
There are two realms to make React-Native apps work. One is the Javascript realm which is our side where we code and the other is the Native realm(Kotlin, Obj-C, Swift, Java) which is used to display what we coded. Obviously, there must be some mechanism to communicate between these two realms, there comes the concept of The Bridge.
This is actually the part of React that works the same way in React-Native. It does the rendering stuff then it finds the differences and then updates the rendering backend. How rendering happens in React is explained above but how React-Native does the rendering is the real question because we don’t have DOM, we cannot change through ‘element by id’ and we cannot just call the native functions because they are costly. Let's understand this through an example.
Let's suppose onPressHandler looks like the below image
When the onPress handler is called the Native side select methods that are called onPress along with their params, serialize it, and pass it down to the React-Native side. The React-Native side receives it in the form of a JSON object. React-Native computes the changes convert them into small instructions and add them to Javascript Queue.
Queue for the above function will look like this:
This queue is further serialized and passed down to the Native side through The Bridge. Both sides queue will look like the below images:
The above two images describe two instructions for the native side to follow, one is to update the UI and the second is to make an API call to the given URL. The interesting thing in the above images is the two managers that are being used to operate on these commands.
1- UI Manager:
UI Manager takes these commands from React-Native and applies them on Native platforms. It schedules these operations on the main thread (Native Queue). UI changes can only be done through the main thread. At the end of this process UI Manager will mark these UI elements as dirty.
UI Manager will further send these instructions to Layouts which then climbs up the tree and recalculates the layout.
2- Data Manager:
Data Manager is just a polyfill above the fetch spec to make API calls, under the hood which only makes any API call like Axios or Fetch.
The final image of the whole flow is below:
To summarise all the above when the button is pressed on UI, Native sends the method and its parameters to React-Native. React-Native then computes the changes and tell the Native side the changes. All of this communication is done through The Bridge.
This blog has three main concepts detailed explanation can be gathered from these blogs:
1- The Bridge: https://hackernoon.com/understanding-react-native-bridge-concept-e9526066ddb8
2- State Change is handled through the Native side: youtube.com/watch?v=hDviGU-57lU&t=1344s
3- Threads in the whole process: https://www.reactnative.guide/3-react-native-internals/3.1-react-native-internals.html
That’s it!