7 Tips for Maximum Coding Efficiency in React Native
By: Iuliu Vișovan
Tags: Programming, Efficiency, JavaScript, React Native, React

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!