React Native Questions

We can say there are three threads that mainly run a React Native app:

• UI thread — this is the native thread used to run Swift/Objective C on iOS devices and Java/Kotlin on Android devices, an application’s UI is manipulated solely on this thread. Here the application’s Views are rendered and users of the app can interact with the OS. 
• JavaScript thread — this is the thread that executes JavaScript separately via a Javascript Engine. An application’s logic – including which Views to display and in what manner they are displayed.

Flux is an architecture for creating data layers in JavaScript applications. It was designed on Facebook along with the React view library.

It places a focus on creating explicit and understandable update paths for your application's data, which makes tracing changes during development simpler and makes bugs easier to track down and fix.

React Native has a lifecycle of three stages:

• Mounting
• Updating
• Unmounting

Mounting is the process of creating a native view and mounting it to the screen.

Updating is the process of updating the native view.

Unmounting is the process of removing the native view from the screen.

With React Hooks we can use useEffect and useState to manipulate and trigger these stages

On iOS simulators and devices, Android emulators and devices React Native uses JavaScriptCore.

useMemo is a React hook that allows you to memoize the return of expensive functions, avoiding calling them on every render.

useCallback is a React hook that returns a memoized version of the callback that only changes if one of the dependencies has changed.

It's useful when you have a component in which the child is re-rendering too often, so the function object returned from useCallback will be the same between re-renders.

memo is a React High Order Component that will cause React to skip rendering a component if its props have not changed.

1. React will merge the object that will pass in setState to the current state of the component
2. The reconciliation process will start.
3. React will construct a new tree of React Elements with your changes (Virtual DOM)
4. React will diff this new tree with the previous element tree (Real DOM)
5. By doing this the UI will be re-rendered by only making updates where absolutely necessary.

InteractionManager allows long-running work to be scheduled after any interactions/animations have completed. In particular, this allows JavaScript animations to run smoothly.

Redux follows the unidirectional data flow.

So, an action is dispatched to the store's reducer along with the current state of the store. The reducer then returns a new state based on the action. The new state is then passed to the store's subscribers.

Component-Driven Development (CDD) is a development methodology that anchors the build process around components.

It is a process that builds UIs from the “bottom-up” by starting at the level of components and ending at the level of pages or screens.

Virtual DOM is a copy of the whole DOM object.

On the other hand, Shadow DOM creates small pieces of the DOM object which has isolated scope for the element they represent.

A higher-order component transforms a component into another component.

A HOC composes the original component by wrapping it in a container component. A HOC is a pure function with zero side effects.

Old Architecture

• The JavaScript thread.
• The Native/UI thread.
• The bridge.

New Architecture

• The bridge will be replaced by JSI
• Ability to swap the JavaScriptCore with other Engines
• Complete Interoperability between all threads
• Web-like Rendering system
• Time-sensitive tasks can be executed synchronously
• Lazy Loading of Turbo Modules
• Static Type Checking for compatibility between JS and Native Side

The Bridge in React Native is the layer that handles the interaction between JavaScript and the Native modules.

It is primarily a carrier layer that conducts asynchronously grouped feedback messages from JavaScript to Native modules.

Fabric is React Native's new rendering system, conceptual evolution of the legacy render system.

The core principles are to unify more render logic in C++, improve interoperability with host platforms, and unlock new capabilities for React Native.

Development began in 2018 and in 2021, React Native in the Facebook app is backed by the new renderer.

Over the Air updates are updates that are downloaded directly to the device, OTA allows us to send updated Javascript bundles directly to users.

Yes, React-Native creates a tree hierarchy to define the initial layout and creates a diff of that tree on each layout change to optimize the renderings.

But React Native manages the UI updates through couple of architecture layers that in the end translate how views should be rendered while trying to optimize the changes to a minimum in order to deliver the fastest rendering possible.