React Native App Performance

What to avoid for performance optimization?

Avoid Passing Inline Functions as Props

Whenever passing the function as property to a component, avoid giving the function inline because the function is created again and again whenever the parent re-renders. Therefore, the child component re-renders even if the properties have not changed. The function should be declared as a class method or function inside working components so that the references do not allow re-renders.

Avoid Rendering Overhead and Unnecessary Renders

One of the optimization techniques common to both react native, and react.js is to avoid unnecessary renders on the main thread. In the functional components, this is achieved by the function React.memo().

The React.memo() function is used for memoization; if any component has the same set of properties as the previous one, the previously cached properties will be used again, thus rendering the JSX view returned by the functional component only once, saving rendering overhead.

Avoid Arrow Functions

Arrow functions cause a lot of re-renders. Arrow functions shouldn't be used as callbacks to render views. Each render generates a new instance of a function with arrow functions. React Native compares a change or a difference when reconciliation happens and cannot use the old reference as the function reference doesn't match.

Avoid Anonymous Functions While Rendering

Using render() to create functions is a bad practice as it can cause significant performance concerns. A new callback is established each time a component re-renders. This may not be a problem for essential and smaller components. Still, it is a significant problem for PureComponents and React.memo() and when the function is supplied as a prop to a child component, causing wasteful re-renders.

Check out this problem - Count Ways To Reach The Nth Stair 

Frequently Asked Questions

What are frames in a React Native App?

The static images quickly changing at a constant speed to convey new information are known as frames. The number of frames per second affects how smoothly the user interface works. Typically iOS devices display 60 frames a second, which translates to about 16.17 ms of time given to do all the work needed to generate the static image that the user will see for that interval.

What are the two types of frame rates being observed in an app?

There are two main types of frame rates one can observe within an app. These are: -

• JS frame rate: The business logic of any react app runs on a JavaScript thread as this is where touch events are processed, and API calls are made. The JS frame rate can drop, especially during navigation, as the JavaScript thread renders all the components necessary for the scene to send the proper commands to the native side to create the backing views.
• UI frame rate:  The performance of navigatoriOS is better than the navigator because the animations for these transitions are done entirely on the main thread, and thus they are not intercepted by the frame drop of the JavaScript thread.

What are the common sources of performance problems? 

Some of the common and avoidable sources are: -

• Running in development mode
• Using consol.log statements
• Doing a lot of work on the JavaScript thread at the same time.
• ListView initial rendering can be very slow hence scroll performance is bad for large lists.

Conclusion

This article extensively discussed React Native App Performance and the dos and don'ts to improvise the performance.

We hope that this blog has helped you enhance your React Native App Performance knowledge. You can check out more blogs on React Native Positioning, React Native ListView, and React Native Flat list.

If you would like to learn more, check out our articles on Code studio. Do upvote our blog to help other ninjas grow.

“Happy Coding!”