I Rebuilt a vibe coded React Native app from scratch! Here is Why and How

I recently got one client saying his app is too slow and buggy, I got the source code and I tried to fix the issues in the same code, then I realised when the basement itself is wrong even we fix the issues it might still cause trouble, so I have suggested the client to rebuilt the app from scratch and the client agreed. These are all the things we changed,

1. React Native CLI to Expo:

There is nothing related to performance for this change, I had prior experience with React Native CLI, when multiple developers working on the app I faced so many build issues, to speed up the development we switched to expo.

2. Handling Navigation Properly:

From the old codebase, I found the AI code ( Vibe Code ), the old developer who vibe coded the app doesn’t know much about React Native and Navigation, even though the app contains tabs design and drawer design, he used a single stack navigator to maintain everything.

I had a clear plan on navigation, I implemented Public, Protected and Anonymous navigations for each specific use cases. Public and Anonymous were in stack, Protected was in Drawer navigation. Drawer has nested tab navigation and tab has nested stack navigation, so all the navigations are isolated.

3. Async Storage to MMKV:

The old codebase was filled with Async Storage for data persistence, Async storage is dead slow on setting and retrieving the data, so I researched and found the better performing storage provider MMKV and it worked really well with zustand. We could also notice the performance gain here.

4. Data Fetching:

Old codebase has un necessary API calls even for a same data fetched earlier, he called the api again. I figured out the unnecessary API calls and reused the previously fetched data as much as possible. I implemented SWR for efficient data Fetching and caching, this resolves most of the issues in the app.

5. Unnecessary Rerenders:

Most of the developers think that React and React Native both are same, just replace the HTML tags with React Native Components. That’s not true don’t fall for it. Browsers love JavaScript so even though you write shitty code you won’t see any potential perfomance issues but where in mobile app world Android only loves Java and kotlin, ios loves swift they don’t know what JavaScript is, React native bear this for us, so each and every Rerenders will make potential perfomance issues, I found so many unnecessary Rerenders and fixed them one by one modularising components, useCallBack and memos.

6. Reading and Implementing 3rd Party integrations are key:

The app uses 3rd part provider to make internet audio calls like zoom, the old codebase doesn’t follow their documentation and ended up with perfomance issues and inconsistent participants joinings. I understand their documentation and implemented it, now the audio calls part is seamless.

7. Handling Websocket:

I saw that same Websocket connection called for multiple times which causes the server overhead, for single user it connected with 5+ Websocket connections for a same message subscription, reconnection was not done.

I built a custom layer for Websocket connection and connected only once throughout the app, which resolves the server overhead. I implemented reconnection and timeouts for the sockets connection, this is not socket-io so I had to build our own layer above the WebSocket object.

Conclusion:

These are all the things I had done to improve the app and made it stable and published in PlayStore.

Vibe coding is not bad if you own and know the code, if you can’t understand the codeblock given by ai then don’t use it, these ai tools didn’t know how to architect an application you can use them for utility functions not for your entire codebase.

Application architecture, system designs are skills which AI don’t know because each application has their own challenges and features.