Optimizations in React Native

07 décembre, 2023

Technical

Optimizations in React Native

blog image

1 - React Native Mechanism

React Native is an open-source mobile application development framework created by Facebook. It allows developers to build applications for iOS and Android platforms using JavaScript and React, a JavaScript library for building user interfaces. ## Operating Principle - JavaScript and React: React Native combines the best of React - declarative, component-centered, and JavaScript development - with the capabilities of native mobile applications. The JavaScript code is executed in a separate JavaScript runtime environment, while the application's user interface is rendered using the platform's native components. - React Native Bridge: A crucial element of React Native is the "Bridge", which allows communication between the JavaScript code and the platform's native components. When an interaction in the application occurs, a JSON message is sent across the Bridge to the native code to make the necessary changes to the user interface. - Native Components: Unlike other web-based frameworks, React Native uses native components instead of WebViews. This allows the application to benefit from better performance and a consistent appearance with native applications on the platform. - Hot Reloading: React Native includes a "Hot Reloading" feature, allowing developers to see changes made to the code in real-time without restarting the entire application. This significantly speeds up the development process. - NPM for Dependencies: Developers can use Node Package Manager (NPM) to manage the application's dependencies. This facilitates the integration of third-party libraries and tools. - Interoperability with Native Code: A major strength of React Native is its ability to integrate with existing native code. This means that applications can be partially built in React Native and partially in native code, offering great flexibility.

2 - Using FlatList or SectionList to Display Large Lists in React Native

### FlatList `FlatList` is a React Native component that efficiently and effectively displays long lists of data. It only renders the elements currently visible to the user, thus reducing memory usage and improving performance. This component uses lazy rendering (or Lazy Loading, yes because it sounds weird in French 😌) to handle large lists. This means that list items are only rendered when they enter the visible area on the screen, thus reducing the workload of the processor and memory.