How to Refactor your React Native App

Developing an app isn’t just about a one-time effort — its success among users significantly depends on continuous updating. For updates to be smooth, it’s reasonable to “clean up” the code from time to time by doing the refactoring. Freshening up the code without changing functionality substantially improves the app’s performance and enables app updating with fewer problems.

To solve this problem, you can create abstractions that generalize similar code blocks. To put it another way, we extract repetitive parts into separate reusable functions and can substitute these parts with their new shorter forms – function calls.

For example, we could place PhoneInput and CodeInput units into one generalized TextInput component by taking out common parameters, styling and error handling.

Overcomplicated Code

Another case of code refactoring is simplifying unnecessarily long and/or complex codes to make them more functional and less bulky. Even though it’s not possible to set a specific number as a golden standard for code length, we determine the necessity of simplification by whether or not a unit’s length exceeds a certain limit (300-400 lines, per se).

Simplification here implies taking a part of the logic and dividing the massive UI into several independent units.

However, you might face a problem when trying to perform such a separation. Often, it’s not possible to divide the complex unit because its logic is directly connected to this specific structure and, thus, can’t be separated as a function or put into an individual component. Typical examples for such an issue are animations, processing of certain forms, data loading, etc.

Luckily, we can easily solve this problem using the so-called Hooks that are a part of React functionality since version 16.8. Hooks allow us to divide a component into small functions by their purposes, and not based on the lifecycle method. For example, you can move video loading and playback logic from one lifecycle method to separate hooks. Moreover, using your custom hooks, you can extract the above-mentioned video handling logic and side effects out of the component so it's easier to test and reuse.

There was another case where we needed to handle various BLE-based protocols within a React Native gym app. Our solution was a generic protocol handler that helped us avoid code overcomplication. You can additionally control components’ inner state by using a reducer — it’ll make its behavior more predictable.

Poor Code Optimization

To make your system work more efficiently and with less resource consumption, optimizing the code as a part of your refactoring strategy is definitely worth attention. Let’s take a look at a couple of techniques that you can use for code optimization.

Reducing the Re-rendering Frequency

All units in React Native have a specific state. And, when a user disturbs the state by a certain action, it normally re-renders. However, units changing require apps to work extra intensively and thus influences their performance. Luckily, unit restructuring isn’t necessary and can be avoided.

For example, the useCallback hook allows us to get back a memoized functions’ version that changes only if one of its dependencies changes. It’s useful in case you transfer callbacks to optimized React child components — these rely on the equality of the references so as to prevent excessive rendering.

Another way to reduce re-rendering frequency is by wrapping a component into a React.memo (a higher-order component) call. It’s reasonable to perform in case your component keeps rendering the same thing with invariable props. This way, you can improve the app’s performance and memoize the result. It means that in the future, React will use the last rendering result to avoid its repetition.

Reducing Repetitive Calculations

For repetitive calculations issues, React created the useMemo hook. It lets you memoize the result of the function call between renders and avoid repetitive resource-consuming calculations.

To avoid multiple merging conflicts when several developers are working on the same parts of the code, you can rebase your branch onto the main development branch daily. Rebasing implies moving the starting point of the branch.

It works in a way as if you would create a new branch and gradually implement all new commits in it every day. Nevertheless, in case a conflict occurs, you won’t have to deal with it within the final state of your files, where you can’t really track when and what was changed. Luckily, you only need to pay attention to the files state at the moment when the conflict occurred.

Stick to One Code Style

Most of the Integrated Development Environments (IDEs) have a default configuration for code formatting. Consequently, it often happens that companies don’t really pay attention to the way code formatting happens. This, in its turn, can lead to code style inconsistencies.

To avoid such an issue and keep the code’s style consistent, we recommend using ESLint and Prettier tools in all your projects. ESLint is meant to find and fix code problems not depending on their source. Prettier is built specifically to perform code formatting and thus handles it slightly more targeted.

In case you’ve implemented hooks in your project, we recommend using the exhaustive-deps rule that is a part of eslint-plugin-react-hooks linting rule. It warns you when dependencies are set up incorrectly and offers a solution.

Refactoring Automation

In fact, many IDEs have some automatic refactoring features. Such IDEs are called refactoring browsers. Here are a couple of those that JavaScript/TypeScript supports:

• WebStorm.
• VSCode.
• Sublime Text.

The most challenging aspect of the refactoring was updating the react-navigation stack — the two versions were significantly different and included a bunch of breaking changes.

We hand to fully rewrite the navigation by carefully transferring the attributes of the old navigation into the new one. It also happens that some parameters simply didn’t exist in the new version. So, we had to look for other ways of implementation.

FitTracks

Our second case is a fitness application with voice-guided workouts FitTracks. What’s special about the app is that its exercise programs are recognized by the German government as prevention courses. It allows users to ask their health insurance companies for full reimbursement of subscription costs, for example.

If you’d like to learn more about the development of the app itself, feel free to follow this link to a detailed case study on our website:

Refactoring of the FitTracks project implied:

• Updating React up to v.17.0.2 as well as all the dependencies up to the latest version.
• Updating Firebase up to v.9.1.1 and shifting to its new module system.
• Removing code duplications and simplifying the code to make the maintenance in the future easier.

Apart from that, we took the whole project’s logic out of the contexts into small separate hooks. We removed the excessive optimizations and got rid of inline styles. Additionally, we slightly changed ESLint and Prettier configurations since we’ve got a deeper understanding of these tools and found some ways to improve them for the project specifically.