Top 10 React Tricks Every Developer Should Use

Discover a set of React best coding practices, tips and tricks that should be known by all developers.

Key Points -

• Use State Management Library (Redux, MobX, Apollo)
• Use Event Listener instead of Static Method
• Remove All Listener In UnMount
• Config for Environment Setup || Test || Live || Staging
• Use Context for Themes management Dark || Live Theme
• Use Storybook - Isolated | | Reusable Component Development
• Minimize use of third-party library || Instead create own Code Logic
• Scale and Resize Images || Cache Images
• Firebase Performance Monitoring
• Avoid re-rendering using useMemo, useCallBack

1. Use State Management Library (Redux, MobX, Apollo)

Many times we are using local variables, array, objects declarations that are specific to components but what happens the same would be used in other components then, Use State Management Library so you can access your variables, array, objects though the app, you can update and listen for change in any component.

Redux, Redux Saga, Redux Rematch, MobX State Tree, Apollo are popular state management libraries which allow developers to access State Variables through the app and it will persist your data so next time the user comes back to application data fetched from storage and assigned to state variables.

2. Use Event Listener instead of Static Method

We are on one component and we want to call one function of the previous component or any other component at that time we are using static methods in the class component. Instead of using Static Method I approach using React Native Event Listeners. You can add a listener in a component where you want to listen and emit an event from where you want to call a function. It’s very simple to integrate.

Check out react-native-event-listeners

npm install --save react-native-event-listeners
or
yarn add react-native-event-listeners

import { EventRegister } from 'react-native-event-listeners'

/*
 * RECEIVER COMPONENT
 */
class Receiver extends PureComponent {
    constructor(props) {
        super(props)

        this.state = {
            data: '',
        }
    }

    componentWillMount() {
        this.listener = EventRegister.addEventListener('yourEventName', (data) => {
            this.setState({
                data,
            })
        })
    }

    componentWillUnmount() {
        EventRegister.removeEventListener(this.listener)
    }

    render() {
        return <Text>{this.state.data}</Text>
    }
}

/*
 * SENDER COMPONENT
 */
const Sender = (props) => (
    <TouchableHighlight
        onPress={() => {
            EventRegister.emit(‘yourEventName’, ‘Task Completed!’)
        })
    ><Text>Send Event</Text></TouchableHighlight>
)

3. Remove All Listener In UnMount

We are adding listeners to listen events like KeyboardListeners, EventListeners, NavigationEventListeners, TabEventListeners etc. When you add listeners on componentWillMount it will create listeners for you, but if you forget to remove it on componentWillUnMount then next-time when you back to component again it will create another listener object which conflicts with memory leaks and unexpected listeners behaviour. So best is to remove listeners in componentWillUnMount to it will free out memory and provide you un-interrupted behaviour.

Related Article - See how React Clean Architecture helps to write Clean, Structured, Modularized and Best Coding Practices for Rect Developers.

4. Config for Environment Setup || Test || Live || Staging

We are all using different environments like Test, Staging, Production/Live environment. There are different API URLs, Constant Variables, Keys, etc depending on Environment. So It’s recommended to use react-native-config to setup your configuration for Test, Stage and Live environment. Please follow steps provided in react-native-config and manage your environment.

5. Use Context for Themes management Dark || Live Theme

Nowadays we are used to Light & Dark themes, developers also developing applications that support both Light & Dark Themes. But being developers how we manage Styles, how to add/manage listeners. It’s recommended to manage themes using React Context API, you can set up Context in App.js and add Themes Listener in App.js so whenever a user changes theme App.js get notified and themes will be changed and all the components will be notified. So you can provide instant themes that change the effect to your users.

6. Use Storybook - Isolated || Reusable Component Development

Almost every application has components like TextInput, Button, etc that are used at various components. Instead of doing separate code for each component it’s recommended to create a common component and use it in Components, advantage of doing this you can manage it from one place and it will reflect your changes in the whole application.

What happens if I say show me the component you developed and change it’s property dynamically like color, etc, you need to import/implement it in one component and run the application, correct? Is there any way I can see all Reusable Components in one place, I can play with it, change various props and validate it.

Storybook will provide an interface where you see all your developed ReUsable components at one place. For that you simply create Story and improve your component into your Story. So the Storybook will render all the stories. It’s very simple to integrate. Please check out the Storybook article for more detail.

7. Minimize use of third-party library || Instead create own Code Logic

We are using too many third-party library, NPMs in our application for Small - Small tasks. Problem is whenever iOS, Android, React Native version upgrade we forget to upgrade our library, NPMs which break our application, Even we are not sure, Creator of Library, NPMs have updated with latest standard & security which cause break in our application.

Instead of using Third-Party Library, NPMs for Small-Small cases, it’s recommended to create your own code solution and so you can manage it, update it easily.

8. Scale and Resize Images || Cache Images

Image optimization is very important in React Native App Performance. If you have an E-Commerce kind application or Application where there is maximum Image Rendering and images are not optimized then it will consume more user’s memory which causes application crashes.
It’s recommend to do following -

• Use PNG image instead of JPG
• Use small resolution images
• Use the latest WEBP format for Image - which helps to reduce binary size of iOS and Android.

Cache Images -
While having an ECommerce Or Heavy Image Showcase kind application it’s recommended to use Image Caching to show images faster without flickering. Prefer to use React Native Fast Image which works perfectly for both iOS & Android.

9. Firebase Performance Monitoring

Firebase Performance Monitoring helps developers to identify where and when performance can be improved, so that you can fix those performance issues and give consistent experience to users. It allows you to track HTTP Request Performance Traces, also you can do custom tracing according to your business needs.

It’s simple in integration and you will get a dashboard with reports. That's simple.

Related Article - How to improve the performance of a React Native App?

10. Avoid re-rendering using useMemo, useCallBack

Almost all applications have FlatList along with other components like Button, TextInput. FlatList reload FlatListItem on first time render, also whenever any of the state variables changes FlatList will reload again with It’s FlatListItem. These are unwanted re-rendering, actually nothing changed on FlatList Item. To avoid these re-rendering use useMemo hooks that will first check any of the props changed then only it will reload FlatListItem.

Related Article - Step By Step Integration Of React Hooks  - useState, useEffect, useRef, useMemo, useCallback.

Thanks for reading Blog!

KPITENG | DIGITAL TRANSFORMATION
www.kpiteng.com/blogs | [e-mail]
Connect | Follow Us On - Linkedin | Facebook | Instagram

Comments

[abdelrahman El Hoseeny]

Awsome, thanks