7 Tips for Maximum Coding Efficiency in React Native
React Native is quick to write, but can we make it quicker?
(an updated version of this article is available on RNTricks: https://www.rntricks.com/article/7-tips-for-maximizing-efficiency-when-writing-react-native-apps)
React Native is great. It allows us to create beautiful, native, cross-platform apps. Adoption has been constantly increasing, especially in the startup sector.
The main focus of research and articles today appears to be centered around its performance, scalability, or comparisons between it and other options.
I’m a fan of speed and I wanted to see how we can take this amazing technology from “if” and “how”, to “how quickly”.
So, after more than two years of coding in React Native, I decided to compile and share seven tips that helped me, and will also help you maximize your coding speed in React Native.
1. Get a Mac
If you’re really accustomed to Windows and think it would be better to use the OS you’re used to (as I initially thought), let’s just say I’ve figured that this one’s non-negotiable — macOS is undoubtedly the way to go when it comes to React Native development.
There are two major reasons for this.
- This one might be obvious — it allows you to build for iOS. It’s no coincidence that all the tutorials take it for granted that you use a Mac — if you want to do cross-platform development, you will, sooner or later, need a Mac.
- General performance and stability. React Native started as an iOS “thing” and it shows. The simulator, the build process, the live/hot reload features, remote JS debugging — they all work beautifully on macOS. On Windows, npm, React Native itself, and even the Windows command line are all sorts of buggy.
The process of developing React Native is at least twice as fast on a Mac, so if you want to start off on the right foot, make sure you are (or will be) a macOS user.
2. Get a Better Mac
React Native is one of the techs that can go as high as resources allow and really benefit from it. The workflow can handle up to three or four different iOS/Android emulators open at the same time.
The more, the better — being able to see whether your app looks good on all your target platforms in realtime is not only sweet but is a huge time saver for later as well. No more “fixing one platform whilst introducing bugs in another”.
Additionally, as every CMD+ S in your IDE is a rebuild of the bundle, minimizing build time means minimized waiting between writing a piece of code and seeing its effects. Those tens or hundreds of times a day really add up.
Plus, there’s nothing as satisfying as seeing your code results instantly.
I’ve found that transitioning from an old Mac mini to a full-fledged 2018 MacBook made a huge difference, allowing me to work about 50% quicker.
Conclusion: Get yourself the best Mac you can.
3. Make the IDE Do the Work for You
Every IDE comes with some kind of formatting feature, and you might think that’s enough. But today’s IDE’s have gotten smarter, and are about much, much more than just that.
Indenting code, removing variables, sorting imports, transforming quotes, and everything else that makes your code cleaner and more consistent— it can all be done by your IDE and it should be done by your IDE!
Get to a point where you don’t even remember the last time you pressed the tab key.
Echobind has a great article on how to get your Prettier+Eslint+airbnb rules integrated into VS Code.
It has a big impact on your development time and satisfaction, and I, for one, couldn’t live without it — I use my format key as much as my save key.
4. Snippet Everything
Take the DRY principle to the max. Do you see yourself manually writing <View></View> or <Text></Text> too often? Turn them into a snippet!
And don’t stop there — maybe you also want to apply a style to the view you just created, so why not make it just that?
I like to look at it as “applying a compression algorithm” to the code I write. Identify the repetitions and replace them with “identifiers” (snippets). Find your habits and create according to them and your project guidelines.
I have created over 25 snippets during React Native development. You can get them here (I’m using VS Code). Feel free to use them as a source of inspiration or as they are.
Just make sure you don’t let the IDE get in your way. Learn how to create them easily and efficiently, so you don’t feel like you’re wasting the time you’re saving.
Plus, writing three characters and generating 30 will always make you feel like a pro.
5. Twice the Windows, Twice the Speed?
Not quite… But very helpful nonetheless.
Whenever you find yourself juggling through the same two files over and over, make a habit of splitting that window in two.
It may seem a bit confusing or overwhelming at first, but, especially if you’ve got the real estate, it’s the bread and butter of coding efficiency.
Getting friendly with your hotkeys goes a long way towards turning this into a habit. Find and bind the IDE command that works best for you.
For me, the one that does just what I need (in VS Code) is workbench.action.focusSecondEditorGroup. It removes the hassle of opening a new tab, moving the file and then focusing the tab, by doing it with a single key combo (in my case CMD + 2).
For example, having both your markup and styling on-screen while creating UI’s is a much more comfortable experience and will save you time as well.
6. Use Hot Reloading. Wisely.
React Native’s hot reloading feature is one of the “hottest” implementations out there when it comes to previewing code changes.
That is assuming you get it right, however. Currently, there are over 130 hot reloading-related issues on React Native’s repo, and for good reason — hot reloading is quite fragile.
The reason it crashes is usually pretty hard to detect, but I’ve noticed that most of the time it’s not inherently “bad” code, but code that simply doesn’t appeal to it.
For example, after several hours of debugging, I realized that changing my code from:
componentDidMount = async () => {}to
async componentDidMount() {}had hot reloading working again.
Of course, it’s not always going to be arrow functions; it varies from codebase to codebase. But the trick to having it working continuously is paying attention to what the code is that’s causing it to crash, and then refactoring it to a, usually, more simple version.
Do spend the necessary time to keep hot reloading in a working state. It helps a lot with creating quicker UI’s, and, as we’ll see next, is also a powerful tool for debugging both UI and business logic.
7. Use Hot Reloading. Smartly.
One of the main things people complain about when transitioning from Web to React Native is its layout system — mostly the lack of a proper/helpful “Inspect” UI that’d allow you to visually inspect sizes, shapes, and borders of elements.
Hot reloading, apart from its contribution to a quicker, more efficient development flow, turns out to be a really helpful element inspection tool as well.
Let’s take a look.
Combining the power of hot reloading with a quick snippet, you can get exactly what you need in less than a second. All without leaving your IDE.
Make a bred snippet that creates a red border, use it inside any element, hit CMD+ S and see your element pop on screen. You can then adjust or enhance your element’s styling to your liking. This might seem simple and limited, but in practice turns out to be just what you need 90% of the time.
This method will also mean you don’t have to open inspect pop-ups and menus, and disrupt your coding workflow. Debug-as-you-go with this simple trick.
An even more useful trick when using hot reloading is the ability to check the values of any variables from the current frame. Consider this example:
A few weeks ago, I made this “Player Stats” screen, which… is supposed to show stats of a player. But it looks like something has broken since then, and I need to find out what it is.
My code looks like this:
In my screenshot, the stat value is always “-”. This indicates that the stat variable’s structure is not quite right, so we need to inspect it.
One way to inspect data in React Native is firing up the remote debugger, un-tab the Chrome window (otherwise RN will whine about background tabs), open dev tools, open this current file, set a breakpoint right before the return of the render function, reload the app, navigate in your app to this exact screen and scenario, pray for no source map bugs, and then inspect your received data.
We can do this more easily if we log our stats variable, navigate to this screen, and then check the logged data.
But hot reloading enables us to go a step further:
<View>
{stats.map(stat =>
<Stat dog={console.log(stat)} {...stat} />
)}
</View>Due to the nature of the render function, each and every time it is called, every attribute of every element is evaluated to be then sent down as props.
However, in our case, we don’t care about the “to be sent as props” part, we only care about the “is evaluated” part.
Assigning console.log(stat) to a completely arbitrary and non-existent attribute (in this case “dog” — a random string that I’ve found handy) and then saving to trigger hot reloading, will evaluate our entire render function together with our dog attribute.
There’s our data. No reloads, no inspects, no connecting to remote debuggers; this method gives us the data instantly.
And, of course, we can now see that we actually need to spread stat.content and not stat, as our data was nested under content.
Use this quick and easy hot reloading trick whenever you want to get out of trouble in no time!
Conclusion
I hope your React Native coding will get a bit quicker and more efficient using these tips. Let me know what you think in the comments.
Happy coding!
