Optimization Done that made App slower (React Native Edition)

You have become what you swore to destroy

Performance in react native is a huge issue for most companies that are working on react-native and my company was no different. So to give you a context my company is currently working on migrating the app from native to react-native and which itself is a very huge task in itself just the cherry on the top most of our users use low-end devices which just adds to our trouble and due to which we have to do a lot of R&D and try to achieve a level of performance where our app works similar or close to native.

The Fist and common problems we faced

The first and most common problem that we faced was excessive rerenders that were happening because of unnecessary state changes or reference changes. So we moved to a state where we started using the methods that provided react like useMemo, useCallback , memo, etc. means all the things that were provided by react.

Were we able to achieve what we wanted?

Yes, we were able to achieve what we wanted, for the most part, which means we were able to save rerenders but achieving performance is just another thing that we were still not able to achieve.

Why?

So every check and every render comes with its own set of fallbacks and overheads and that thing we forgot to think about. So when we wrapped everything in all these methods it added an additional check to all the methods, states, and components which lead to slow loading and slow updates because it has to check a lot of things before even starting rendering.

Takeaway

Any optimization method comes with a cost and before using these methods we should actually we can make any other changes that can help like better state management. And also use these methods wisely as it can make your app slower instead of making it faster.