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:
- Wrap component in forwarRef to pass ref to child component
- 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:
- Android:
- iOS (Objective-C and Swift notations):
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!
