• Home
  • Services
    • OUR SERVICES

      We solve challenging market challenges and build all varieties of custom and platform-based frameworks and provide comprehensive end-to-end software development and IT services.


      Ask Us
    • Overview

      Professional Services

      Software Dedicated Team, GEO, EOR

      Team Augmentation & Full team Outsourcing

      1. Python
      2. Node
      3. .NET
      4. React, Angular, Vue

      Enterprise Digital Transformation

      Application Support & Maintenance

      Devops Services

      Software Consultancy

    • Custom Software Development

      Android & iOS Mobile App Development

      React Native Mobile App Development

      Custom Application Development

      Web Application Development

      Product Development for Startups & Established Business

      Internet of Things (IoT)

      Industry Expertise

      Data Analytics & Intelligence

      BigCommerce

      Shopify

  • Process
    • OUR PROCESS

      We solve market challenges and build all varieties of custom and platform-based frameworks and provide comprehensive end-to-end software development and IT services.

    • Overview

      Fully Outsourced

      Dedicated Teams

    • Team Augmentation

      Fixed Scope Projects

      Time & Material (T&M)

  • Company
    • OUR COMPANY

      Since 2016, we have been the first and last stop for companies worldwide that need support to develop digital products and custom software solutions. Our integrated resource model paves the way for your technology projects to be completed sooner, with less effort.


      contact us
    • About us

      What we do

      Our story

      Our core values

      Customer’s feedback

      What makes us different?

      Creative, Quality & Speed

      Project timeline

      Long term success

      FAQ

    • Portfolio/Case studies

      E-commerce

      Education

      Finance

      Hospitality

      HR

      Legal

      Logistic

      Marketing

      Operation

      Real Estate

      Retail

      Sport

  • Blog
    • BLOG

      Since 2016, we have been the first and last stop for companies worldwide that need support to develop digital products and custom software solutions. Our integrated resource model paves the way for your technology projects to be completed sooner, with less effort.

      View all blogs
    • Statistics for 2023 on Mobile App Growth and Usage

      RECENT BLOGS

      Statistics for 2023 on Mobile App Growth and Usage

      Finally, the year 2022 has come to a close. Furthermore, in this post-pandemic context, companies are still trying...

      Read the blog >>
      The Best Hybrid Mobile App Development Frameworks in 2022

      RECENT BLOGS

      The Best Hybrid Mobile App Development Frameworks in 2022

      Having a mobile presence has become essential for businesses to survive and reach a broader audience in today's...

      Read the blog >>
      Top 8 Helpful Web Usability Tips For Web Designers

      RECENT BLOGS

      Top 8 Helpful Web Usability Tips For Web Designers

      Making it simple for users of your website to locate the information they require when they require it is the...

      Read the blog >>
  • Careers
  • Contact Us
    • Link copied

    • Link copied

Contact Us
  • Home
  • Services

    Our Services

    • Professional Services
    • Overview Software Consultancy Team Augmentation & Full Team Outsourcing Enterprise Digital Transformation Application Support & Maintenance, Hosting Devops Services Hosting
    • Custom Software Development Services
    • Overview Android & iOS Mobile App Development React Native Mobile App Development Custom Application Development Web Application Development Product Development for Startups & Established Business Internet of Things (IoT)
    • Industry Expertise
    • Overview Education Technology Data Analytics & Intelligence BigCommerce Shopify
  • Process

    Our Process

    • Fully Outsourced
    • Dedicated Teams
    • Team Augmentation
    • Fixed Scope Projects
    • Time & Material (T&M)
  • Blog
  • Careers
  • More

    More

    • About Us
    • What Makes Us Different?
    • Contact Us
    • Case Studies
Home Blog Top 7 Simple Patterns To Upgrade Your React Native Applications
Blog Post
Matt Long CEO
August 09, 2021

Top 7 Simple Patterns To Upgrade Your React Native Applications

5 min read
Voiced by Amazon Polly
Table of contents show
1. Top 7 Simple Patterns To Upgrade Your React Native Applications
1.1. Keep the majority of your components simple
1.2. Rely on callbacks
1.3. Keep your callbacks chained together
1.4. Keep your reducers simple and declarative
1.5. Keep your navigation stack away from your views
1.6. Keep platform-specific components to a minimum
1.7. Keep business logic out of your Reducers

For any app or product, good performance is crucial. During your work with React Native, you can often face performance problems. This is why you need to focus on best practices and performance improvement for your React Native app in its development, to resolve these problems and to provide end users with a flawless experience.

In this article, we will walk you through 7 useful patterns that may help you when developing your React Native apps.

Top 7 Simple Patterns To Upgrade Your React Native Applications

Keep the majority of your components simple

This applies to any React application. Your views and components should depend on props and callbacks, whereas Container (smart) components should rely on state. I recommend Redux, but in some cases, setState will work nicely. MobX is another excellent option for performance improvement.

Rely on callbacks

You might have been taught to use the delegate pattern to decouple a View from its Behavior when learning how to code iOS apps in Swift. Callbacks can be used to achieve the same effect in React Native. Callbacks are purely Arrow Functions that can be passed to a component. The component is responsible for carrying them out, but it is not required to understand what it is doing.

The majority of components should not have any behavior. Simple callbacks should be exposed; they act as your components’ public API. Reading their names should give you an idea of when they’ll be executed. If you’re creating an e-commerce app, names like onSelectProduct or onProductAddedToShoppingCart are very descriptive.

When deciding whether or not to expose a callback, consider the following:

Is this interaction only important for this component, or can it trigger changes in other parts of the application? If you choose the latter option, you should expose a callback.

Keep your callbacks chained together

A very common pattern is to inject behavior into higher-order components (that’s what the mapStateToProps of Redux does), but many overlook that there can be a public callback in another part of the application (an outer component, for example).

Invoke the actual callback passed on to props every time one of your views expose a callback that may be used in another part of your application (such as mapStateToProps). This allows you to navigate to your screen, for example, and also to collect information to feed the next view.

Groove Technology - Top 7 Simple Patterns To Upgrade Your React Native Applications - 1

As you can see, each realm has its own set of rules: screens know how to navigate, connected views know how to handle redux actions, and views are dumb, stateless, and reliant on their props.

Keep your reducers simple and declarative

Any developer should be able to understand what your reducer is doing by looking at its code. In most cases, having one function for each type of action can improve readability.

Groove Technology - Top 7 Simple Patterns To Upgrade Your React Native Applications - 2

You can gain more flexibility and code reuse by composing your reducer functions with many one-line functions.

Keep your navigation stack away from your views

We were able to migrate this application from React Native’s default Navigator to NavigationExperimental, and then to React Navigation. These modifications required only a few lines of code. The concept is easy:

Screens and Views are not the same thing. Views should not be aware of the Navigation Stack, whereas Screens (or Routes, depending on which name you prefer) must be aware of how to navigate and communicate with the Navigation Bar / TabBar. Your screens will simply wrap the actual Views in navigation-aware things if you take this approach. For example:

Groove Technology - Top 7 Simple Patterns To Upgrade Your React Native Applications - 3

FavoritesView, as you can see, simply exposes an ‘onSelectFavorite’ callback and is unconcerned about what it actually does. That callback is used by FavoritesScreen to instruct the navigator to move to another screen. As a result, you have the flexibility to replace the way your navigation stack works and excellent separation.

Keep platform-specific components to a minimum

Don’t get me wrong: every platform has its own Design/UX language, and in many cases, you must write multiple versions of a component. Remember that the React Native motto is “learn once, write anywhere,” but don’t rush into writing platform-specific components first.

Simple Style changes and conditional operators are sufficient in many cases. I wrote a simple helper function called platformSpecific that allows me to set styles based on a platform.

Groove Technology - Top 7 Simple Patterns To Upgrade Your React Native Applications - 4

Keep business logic out of your Reducers

Your Redux store is not a part of your business model; it is a View Model. Treat it as such. Changes to your reducer should only have an impact on the store, and you should be very confident in them. The less your Reducers know about your business rules, the simpler they will become.

It’s not the best approach, but it’s a better one to put your business logic in action creators, especially if you’re using a middleware like Thunk. Epics and sagas are also fantastic.

Even if you do not use these patterns, it does not matter. The key point that everyone should know is to keep things simple and separated. Performance improvement and easier testing will be the result. Many of these patterns and practices can help you accomplish this.

If you are looking for a technology partner to help you improve your React Native applications, Groove Technology with experienced developers can take your application to the next level. Do not hesitate to contact us via: contact@groovetechnology.com

References

Santiago Ignacio Poli, (2017), 7 Simple Patterns to improve your React Native Experience.

CEO - Matt Long - Groove Techonology - We Build Amazing Software For Your Business CEO - Matt Long - Groove Techonology - We Build Amazing Software For Your Business
Matt Long CEO AT GROOVE TECHNOLOGY
Matt Long is the founder and CEO of Groove Technology. Groove Technology recruit at the top of their market, providing cutting-edge software development services to partners located across the world through a unique, integrated resource model. You can get in touch with him here, or find out more about Groove Technology Services.
Recent Blogs
  • Statistics for 2023 on Mobile App Growth and Usage
    December 15, 2022

    Statistics for 2023 on Mobile App Growth and Usage

  • The Best Hybrid Mobile App Development Frameworks in 2022
    December 1, 2022

    The Best Hybrid Mobile App Development Frameworks in 2022

  • Top 8 Helpful Web Usability Tips For Web Designers
    November 16, 2022

    Top 8 Helpful Web Usability Tips For Web Designers

  • Design-First or API-First: What’s the Best Approach?
    November 12, 2022

    Design-First or API-First: What’s the Best Approach?

  • How to build a cross-platform mobile app?
    November 8, 2022

    How to build a cross-platform mobile app?

What it’s like working at Groove Technology?

View
START YOUR JOURNEY
TO AMAZING SOFTWARE

If you have any questions, our team is happy to support!



START YOUR NEW
CAREER AT GROOVE

If you have any questions, our team is happy to support!

Your Resume

App demo request

If you want to experience this app on iOS, please contact us to be added to the test environment.

Contact us
Refresh Page

Please rotate your screen horizontally for the best experience.

Career Contact
Business Request
X
  • Home
  • Services
  • Process
  • Company
  • Blog
  • Careers
  • Contact Us
Groove Technology - Software Company in Australia - Viet Nam - Singapore - VN Flag
VIETNAM

Floor 18, Havana Tower, 132 Ham Nghi, Ben Thanh Ward, District 1, Ho Chi Minh City, Vietnam.

Groove Technology - Software Company in Australia - Viet Nam - Singapore - AU Flag
AUSTRALIA

Suite 115, 358 Clarendon Street, South Melbourne, Victoria, Australia, 3205.

Groove Technology - Software Company in Australia - Viet Nam - Singapore - HK Flag
HONG KONG

5/F, Yat Chau Building, 262 Des Voeux Road Central, Hong Kong.


Copyright ©2022 Groove Technology. All Rights Reserved.
Security Statement. Modern Slavery Statement.

BACK TO TOP