5 Best Practices for React Native Development You Probably Don’t Know

After previously shared few tips based on my experiences writing codes on react and react native, today I will share you few best practices that maybe you probably doesn’t know, and hopefully will make your days writing react native codes better, faster, stronger.

1. Directory resolution with package.json on every directory (works with any javascript beside react-native).

Here’s the first tip, maybe you are using IDE or whatever you use to write your codes, and maybe you use different folder structure. Everytime you’re importing components from another directory, you use this syntax:

import TextComponent from "../ComponentFolder/TextComponent"

or maybe

import TextComponent from "../../ComponentFolder/TextComponent"

or maybe more hardcore

import TextComponent from "../../../../ComponentFolder/TextComponent"

and so on

So here’s the tips to forget writing those recurring ..

first, create package.json on every root directory of what you want to import, in this example is components folder.

package.json for components folder

second, try to import the component from another file.

looks neat right?

PS: you could also use Component indexing for better import.

voila! here’s the differences! looks pretty neat to me!

2. Use ternary operators when necessary, not all time.

Using ternary operators maybe looks cooler than other devs that use the good ol’ if else or switch statements, but every syntax has it’s own purposes. Look at these examples:

// cool example
const data = null;
const derpData = data ? 'Im not null' : 'Hello, I'm null';
// another example
const anotherData = null;
const anotherDerpData = data ? anotherData ? 'anotherData and Data is not Null' : 'anotherData is null but the Data is not' : 'Hello, the data is null';
// oh sh*t is that even readable?

Maybe you’re using fancy IDE or fancy linter, but not everybody got the time to do that or use that, so for this case please use other options that really fit. Just like what the cool kids said: The right man on the right place.

3. Lock dependencies, prevent the breaking changes.

When you’re adding more and more dependencies, be sure to lock the version. Please, be careful of those breaking changes, the JavaScript, especially JavaScript library scene are going really fast.

instead of doing this

do this

To put it simply, delete ^ character on the root project package.json.

4. Modify project level or app level build.gradle, not inside node_modules.

This tip is specially for android side, this passed on my head after google upgrading firebase plugins from 11.8 to 12.0, many react native dependency are using latest firebase/gms dependency like these:

plus means latest (react-native-fcm)

Yes, latest is good but not always best. Maybe you’re expecting those bleeding edge features and fast moving bot that code itself (no, we’re going too far), instead, we get error here and there. So, what’s the solution?

You could change the + character with the version your codes work before inside node_modules and create your own git repository for making those changes available to your co-workers or future project maintainers.

OR

You could modify your app level build.gradle

modified android/app/build.gradle

and force the resolution on project level build.gradle

modified android/build.gradle

Simpler right? and you could push these into just one repo (the project itself) and everyone lives happily ever after.

5. Create Class Based Components instead simpler Functional Components, for either stateless or stateful component, you can use PureComponent.

For old react/react-native versions maybe it’s better and faster to write stateless component with simple functional component

const Header = () => (<div>This is Header</div>);

The myth is those make the components faster than speed of light, but here’s the fact to debunk those myth:

Component Rendering Performance in React

Here’s the faster PureComponent example, taken from react docs, you can use the built in shouldComponentUpdate() for better performance:

React Top-Level API - React

That’s it! Thanks for reading! please clap clap clap if you guys like it

Edit: adding detailed example #1