Looking for top software development talents? They are just a few clicks away.

10 React and React Native Tips and Tricks For Fly Developers

Jan 28, 20212 min read

Vitalii Danylov

Senior Frontend Developer at Ideamotive.

When it comes to React & React Native development, there are plenty of cool techniques and little tricks that can make your life a little bit easier. Some of them you are probably aware of and use while working on your projects. But I bet that there is still a good deal of things you have never tried or even heard of. 

 

I have been working with React for years now and I am constantly discovering new possibilities and shortcuts that I am including into my coding processes.

 

In this article, I will share with you some snippets and small quirks that I’ve been using for a while now and I am confident that can make your work easier as well.

 

Enjoy!

 

1. Passing props 

 

Let’s start with an easy one - an alternative method to pass props to components is to pass it as a spread object. 

 

Here is an example:

2. matchAll

The matchAll() method returns an iterator of all results matching a string against a regular expression, including capturing groups. 

 

Unfortunately, this method is not available on the Android platform in react-native, but you can use this snippet to achieve the same functionality:

3. Pressable

Similar to Touchable/Highlight components, but more customizable. 

 

With this feature, you can put a specific logic on each phase of press/release interaction progress:

4. useCallback vs useMemo

If you are confused about what is the difference between useCallback and useMemo in React, just remember one thing:

  • useMemo returns value
  • useCallback returns function

For most of the cases, you will be using useCallback, but be aware of edge cases in dependencies - you can lose the main goal of this hook.

5. Comparison function for memo function

React.memo is a higher order component. The logic behind is: when props of component change memo function will make shallow compare and component will be rerendered if one of prop differs from it’s previous version. 

 

But not everyone is aware that React.memo has a second parameter - comparison function, which can help you define customer behavior for rerenders.

6. Make ref for the functional component

To make a reference from your child component, you should do the following:

  1. Wrap component in forwarRef to pass ref to child component
  2. Define useImperativeHandle hook in child component, what customizes the instance value that is exposed to parent components when using ref. 

7. React-Native Doctor

react-native doctor (available as a part of React Native 0.62) is an extremely useful command to help you fix problems with your development environment:

8. Fragments

Fragment could be defined in two ways:

A problem could appear if you want to pass a key to a fragment. In this situation, an empty tag method won’t work - it doesn’t support attributes.

9. Native Colors (PlatformColor, DynamicColor)

 

The first parameter is a default color and the second one is a fallback color:

New API methods allow access to specific platform colors. Here is the list of available colors:

10. Support rendering 

 

Now You can define the <View /> component inside <Text /> without explicit definition of its size (documentation).

 

And… That’s all from my side.

 

I hope you found something useful here for yourselves. And if you have your very own React & React Native tricks that you use in your work and would like to tell other devs about - let me know! I will be happy to add them to the list and give you some credit 🙂

 

Happy coding!

Vitalii Danylov

Vitalii is a veteran frontend developer and mobile developer (with the special <3 for React Native) who likes to explore new technologies, test new tools and discover new approaches.

View all author posts

Take your business to the hypergrowth phase.

Work with software development experts from Ideamotive's talent network.