Explore topic-wise InterviewSolutions in .

The primary reason and an important one why well-built NATIVE apps feel so smooth are by avoiding expensive operations during interactions and animations. REACT Native has a  limitation that there is only a single JS execution thread, but you can use InteractionManager to MAKE sure long-running work is scheduled to start after any interactions/animations have completed.

Applications can schedule tasks to run after interactions with the following:

It is sometimes necessary to make changes directly to a component without using state/props to trigger a re-render of the entire SUBTREE. When using REACT in the browser, for example, you sometimes NEED to directly modify a DOM node, and the same is true for views in mobile apps. setNativeProps is the React Native equivalent to setting properties directly on a DOM node.
Use setNativeProps when frequent re-rendering creates a performance bottleneck.

Direct manipulation will not be a tool that you reach for frequently; you will typically only be using it for creating continuous animations to avoid the OVERHEAD of rendering the component hierarchy and reconciling many views. setNativeProps is imperative and stores state in the native layer (DOM, UIView, etc.) and not WITHIN your React components, which makes your code more difficult to reason about. Before you use it, try to solve your problem with setState and shouldComponentUpdate.

Understanding of SSL:

SSL (Secure Sockets Layer) and its successor, TLS (Transport Layer Security), are protocols for establishing authenticated and encrypted links between networked computers.
SSL/TLS works by binding the identities of entities such as websites and companies to cryptographic key pairs via digital documents known as X.509 certificates. Each key pair consists of a private key and a PUBLIC key. The private key is kept secure, and the public key can be widely distributed via a certificate.

Understanding of pinning 
Pinning is an optional mechanism that can be USED to IMPROVE the security of a service or site that relies on SSL Certificates. Pinning allows specifying a cryptographic IDENTITY that should be accepted by users visiting site/app
         
Why do we need SSL pinning?

One of the inherent risks to the SSL ecosystem is mis-issuance. This is when an unauthorized certificate is issued for a domain/host you control. This can happen with both public and private PKIs (Public Key Infrastructure)

How is SSL pinning used in Mobile applications?
When mobile applications communicate with the server, they typically use SSL to protect the TRANSMITTED data against tampering. By default SSL implementations used, apps trust any server with a certificate trusted by the Operating systems trust store, This store is a list of certificate authorities that are shipped with the operating system.

With SSL pinning, however, the application is configured to reject all but one or few predefined certificates, whenever the application connects to a server, it compares the server certificate with the pinned certificate(s) , if and only if they match the server is trusted and SSL connection is established.

React Native does not come bundled with any way of storing sensitive data. However, there are pre-existing solutions for Android and iOS platforms.

iOS - Keychain Services
Keychain Services allows you to securely store small chunks of sensitive info for the user. This is an ideal place to store CERTIFICATES, tokens, passwords, and any other sensitive information that doesn’t belong in Async Storage.

Android - Secure Shared Preferences#
Shared Preferences is the Android equivalent for a persistent key-value data store. Data in Shared Preferences is not encrypted by DEFAULT, but Encrypted Shared Preferences wraps the Shared Preferences class for Android, and automatically encrypts keys and values.

Android - Keystore
The Android Keystore system lets you store cryptographic keys in a container to MAKE it more difficult to extract from the device. In order to use iOS Keychain services or Android Secure Shared Preferences, you can EITHER write a bridge yourself or use a library that wraps them for you and provides a unified API at your own RISK. Some libraries to consider:

• Expo-secure-store
• React-native-keychain
• react-native-sensitive-info - secure for iOS, but uses Android Shared Preferences for Android (which is not secure by default). There is however a branch that uses Android Keystore.

In JavaScript memory is managed automatically by Garbage Collector (GC). In short, Garbage Collector is a background process that periodically traverses the graph of allocated objects and their references. If it happens to ENCOUNTER a part of the graph that is not being referenced directly or indirectly from root objects (e.g., VARIABLES on the stack or a global object like window or navigator) that WHOLE part can be deallocated from the memory.

In React Native world each JS module scope is attached to a root object. Many modules, including React Native core ones, declare variables that are kept in the main scope (e.g., when you define an object outside of a class or function in your JS module). Such variables may retain other objects and hence prevent them from being garbage collected.

Some CAUSES of Memory Leak:

• Unreleased timers/listeners added in componentDidMount
• Closure scope leaks

Detecting memory leaks for IOS:

In Xcode,

Go to XCode → Product → Profile (⌘ + i)

After that SHOWS you all templates choose leaks.

Detecting memory leaks for Android :

Run React Native app normally (react-native run-android)
Run Android Studio

On the menu,
click Tools → Android → Enable ADB Integration
Click Tools → Android → Android Device Monitor
When Android Device Monitor shows up, click Monitor → Preferences

There is also one more way in Android
Perf Monitor (Performance Monitor) is a good choice to use for android leak monitoring.

• Use Proguard to minimize the application size.(It does this by stripping parts of the React Native Java bytecode (and its dependencies) that your app is not using)
• Create reduced-sized APK files for specific CPU architectures. When you do that, your app users will automatically get the relevant APK file for their specific phone’s architecture. This eliminates the NEED to keep JSCore binaries that support multiple architectures and consequently reduces the app size.
• Compress images and other graphic elements. Another option to reduce image size is using file types like APNG in place of PNG files.
• Don’t store raw JSON data,  eIther we need to Compress it or convert it into static object IDs.
• Optimize native libraries.
• Optimize the number of state operations and remember to use pure and memoized components when needed
• Use Global State wisely for example worst-case scenario is when state change of single control like TextInput or CheckBox propagates render of the whole application. Use libraries like Redux or Overmind.js to handle your state management in a more optimized way.
• Use key attribute on list items, it helps React Native to pick which list to UPDATE when rendering a long list of data 
• Use VirtualizedList, FlatList, and SectionList for large data sets.
• Clear all the active timers which may lead to HEAVY memory leakage ISSUES.

The real cause behind React Native performance ISSUES is that each thread (i.e Native and JS thread) is blazingly fast. The performance bottleneck in React Native app occurs when you’re passing the components from ONE thread to another unnecessarily or more than required. A MAJOR thumb rule to avoid any kind of performance-related issue in React Native is to keep the PASSES over the bridge to a minimum. 

• Native thread built for running JAVA/ Kotlin, Swift/ Objective C
• Javascript thread is the primary thread that runs everything from javascript-based animations to other UI components
• The bridge as the name suggests acts as an  intermediate communication point for the native and JS thread