Bacancy Bacancy
  • Customers

      Fortune 500 Clients

      Verizon
      Verizon
      The Container Store
      The Container Store
      KPMG
      KPMG
      Academy Sports & Outdoors
      Academy Sports & Outdoors
      Bangkok Bank Ltd
      Bangkok Bank Ltd
      The Children's Place
      The Children's Place
      Edward Jones
      Edward Jones
      Franklin Templeton
      Franklin Templeton
      AdviceWorks
      AdviceWorks
      NatWest Markets
      NatWest Markets
      Bridgestone
      Bridgestone
      United Parcel Service
      United Parcel Service

      Technologies

      React JS VueJS Angular JS React Native Flutter Full Stack
      Ruby on Rails Node JS Golang PHP AI & ML Java
      Python Salesforce DevOps Block Chain Mobile App Embedded & Hardware
      Explore All
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
  • what we do

      Experience

      Digital Workplace Services Product Enhancement

      Insights

      AI & Automation Data Analytics

      Innovate

      Blockchain Software Engineering Services Internet of Things (IoT) Data Science Artificial Intelligence Machine Learning

      Accelerate

      Agile & DevOps Cloud - Bacancy Combalt Digital Process Automation Open Source Microsoft Dynamics Salesforce

      Assure

      Quality Assurance IT Staff Augmentation

      Embedded & Hardware

      Product Engineering Analog Design Services FPGA Engineering Service Wireless Design Embedded Software Design

      not list

      Hardware Engineering Power Engineering IoT Hardware
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
  • who we work with

      Industries

      Banking Financial services & Insurance Startups Oil & Gas

      not list

      Healthcare Life Science Real Estate & Construction Logistics
      bacancy

      Let’s grow together Partner with us

      get quote
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
  • about us

      Culture

      Agile Mindset Bacancy Values Bacancy Culture

      About Company

      About Us Leadership Team Awards & Recognition Infrastructure

      not list

      Customer Reviews Our Locations Partnership Media Coverage

      WE ARE

      GREAT PLACE TO WORK - CERTIFIEDTM

      Building and sustaining High-Trust, High-Performance CultureTM

      Bacancy Great Place to Work
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
  • technology

      Front End

      Angular Reactjs Vue.js UI/UX

      Platforms

      MS Dynamics Salesforce

      Back End

      Ruby on Rails Node.js Golang Laravel .NET Java Python

      Mobile

      React Native Flutter Android iOS

      Cloud

      AWS DevOps

      QA

      Automation Testing Software Testing

      Embedded & Hardware

      Embedded
      bacancy

      World-class expertise,Delivered

      get quote
      Explore All
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
  • PRODUCTS

      EV Products

      Battery Management System Motor Controller DC Charger CCS2 Controller Explore All

      not list

      BMS Manufacturers and Suppliers
      bacancy

      Let’s grow together Partner with us

      get quote
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
Get Quote

Bacancy

Bacancy represents the connected world, offering innovative and customer-centric information technology experiences, enabling Enterprises, Associates and the Society to Rise™.

12+

Countries where we have happy customers

800+

Agile enabled employees

06

World wide offices

10+

Years of Experience

05

Agile Coaches

14

Certified Scrum Masters

1000+

Clients projects

1458

Happy customers

  • Customers
      Technologies
      • React JS
      • Angular JS
      • Vue JS
      • Node JS
      • AI & ML
      • Explore All
      Fortune 500 Clients
      • Verizon
      • The Container Store
      • KPMG
      • Academy Sports & Outdoors
      • Bangkok Bank Ltd
      • The Children's Place
      • Edward Jones
      • Franklin Templeton
      • AdviceWorks
      • NatWest Markets
      • Bridgestone
      • United Parcel Service
  • What we do
      Experience
      • Digital Workplace Services
      • Product Enhancement
      Insights
      • AI & Automation
      • Data Analytics
      Innovate
      • Blockchain
      • Software Engineering Services
      • Internet of Things (IoT)
      Accelerate
      • Agile & DevOps
      • Cloud - Bacancy Combalt
      • Digital Process Automation
      • Open Source
      • Microsoft Dynamics
      • Salesforce
      • Service Experience Transformation
      Assure
      • Testing
      • Resource Augmentation
      Embedded & Hardware
      • Product Engineering
      • Analog Design Services
      • FPGA Engineering Service
      • Wireless Design
      • Embedded Software Design
      • Hardware Engineering
      • Power Engineering
      • IoT Hardware
      • AL/ML
  • who we work with
      Industries
      • Banking Financial services & Insurance
      • Startups
      • Oil & Gas
      • Healthcare Life Science
      • Real Estate & Construction
      • Logistics
  • About Us
      About Company
      • About Us
      • Leadership Team
      • Awards & Recognition
      • Infrastructure
      • Our Locations
      • Partnership
      Culture
      • Agile Mindset
      • Bacancy Values
      • Bacancy Culture
  • Technology
      Front End
      • Angular
      • Reactjs
      • Vue.js
      • UI/UX
      Platforms
      • MS Dynamics
      • Salesforce
      Back End
      • Ruby on Rails
      • Node.js
      • Golang
      • Laravel
      • .NET
      • Java
      • Python
      Mobile
      • React Native
      • Flutter
      • Android
      • iOS
      Cloud
      • AWS
      • DevOps
      QA
      • Automation Testing
      • Software Testing
      Embedded & Hardware
      • Embedded
      Explore All
  • Products
    • Battery Management System
    • Motor Controller
    • DC Charger CCS2 Controller
    • BMS Manufacturers and Suppliers
    • Explore All
  • Careers
  • Work @ Bacancy
  • Blogs
  • Resources
  • Customer Reviews
  • Contact
  • Get Quote
reactjs development

React.memo: Sure Shot Approach to Improve the Performance of Your React Application

Archita Nayak
Archita Nayak Technical Writer
Last Updated on September 24, 2021
June 13, 2019 4 min read

So, we all got excited when React came up with blast in React version 16.6. And why don’t we? Any dedicated React developer would obviously be on cloud nine when the news of version 16.6 spilled out.

React showed up with various skilled features to improve the performance of React app and to make React better than before. Boom! They succeeded! Cheers!
In this article, we would be focussing on a basic overview of how to work with react memo, not useMemo! People often get confused between these two because of their names. Further, we would discuss its impact on the performance of React app.

Let’s get started.

reactjs GIF

Okay, now what the heck is React.Memo?

We all are aware of the heaviness of render method in a react application. Aren’t we? We know the consequences of rendering the component without any major changes. So, consider a scenario in which you are rendering a class component even when your input props are the same. Is it appropriate? Obviously, it’s not! Why the heck will you call such a heavy render method when input props are constant. In this particular case, you ought to use PureComponent or shouldComponentUpdate( ). Wait, this was the scenario of class component, what about functional (stateless ) component? Don’t worry; there’s a solution for it too: React.Memo.

React.memo: High Order Component.

In case, your functional component renders exact same result, because it receives the same input props, you can wrap into React.memo for boosting the performance. This means that the react will compare the last render with the current one, and if no changes are noticed, then it will skip rendering the component. This will help in increasing the performance of react app.

You can wrap your functional component into React.memo, as shown below:

const MyExampleOfMemo = React.memo(function MyComponent(props) {
  /* render using props */
});

If you choose not to pass any second argument, react will compare using its default behavior: shallow comparison of complex objects in the props object. But, if you decide to pass the second argument, then you are given control over the comparison (i.e. you can make your custom comparison function)

function MyExampleComponent(props) {
  /* render using props */
}
function equalOrNot(prevProps, nextProps) {
  /*
  It will return true if nextProps to render would return
  the same result as prevProps to render,
  otherwise return false
  */
}
export default React.memo(MyExampleComponent, equalOrNot);

Be careful, while using React.memo. As it can generate bugs.

React.Memo to the rescue, Phew!

Let’s take a simple example, to make the need of React.Memo clear.

Let’s make a small app that make use of setState( ) every second: that calls render every second. I know this is not feasible, but this is just to clear that why do we need React.memo.

class App extends Component {
  cities = ["Mumbai", "Banglore", "Delhi"];
  state = { city: "Anonymous" };

  componentDidMount() {
    setInterval(() => {
      const city = this.generateCity();
      this.setState({ city });
    }, 1000);
  }

  generateCity = () =>
    this.cities[Math.floor(Math.random() * this.cities.length)];

  render() {
    return < View city="Kolkata" />;
  }
}

Here, we can see that we called a function named setInterval in componentDidMount(). Which indeed sets the city name from the array of cities, for that we have another function called generateCity( ).

A thing to keep in mind is that the setState( ) will be called every second, and because of this is the component will be re-rendered every second. Therefore, our View component gets render too, no matter the city is hard coded. Is it feasible? Of course not.

const View = ({ city }) => `City name :: ${city}`;

This doesn’t make sense. Why would we re-render a component (here View component) if the props remain same?

Now, as we are aware of the concept of memoization from the content mentioned above. We can use React.memo to restrict the render of the component if the value of props doesn’t change.

Let’s wrap < View / > component in a memo.

import { memo } from 'React';

const View = memo(({ city }) => `City name :: ${city}`);

Now, we can notice that the < View / > component will only render one time because the value of prop city doesn’t change.

This was the scenario when the prop was hardcoded. Let’s see what will happen if we choose to replace the hardcoded value with state value.

In the function generateCity( ), the value of the city is randomly chosen from the array of cities.

So, whenever the same value is assigned to the city, the < View / > component won’t render, because of city prop will consequently hold the same value.

Memoization!!

Don’t get confused between React.memo and useMemo.

Don’t go on their names; they have their different functionality.

We can say that both React.memo and useMemo uses the concept of Memoization but still both hold their individualities.

React.memo optimizes the performance of react app by controlling the render of various components. You can have control over a whole component: whether to render it or not.

On the other hand, useMemo doesn’t provide such vast control. It is used for more general purpose and intends to return memoized value. useMemo is a hook and has general usage rules.

Conclusion

So, a long journey isn’t it?

But we finally reached our destination.

The bottom line is, React.memo optimize the react application by avoiding those renders where prop doesn’t change. But be careful while optimizing the performance, as it could generate bugs. To get it done in a smooth and hassle-free way leverage our top-of-the-line React development services and hire ReactJS developer from us to save your valuable time and cost.

Happy Reading!


Expand Your Digital Horizons With Us.

Start a new project or take an existing one to the next level. Get in touch to start small, scale-up, and go Agile.


Or
E-mail us : [email protected]

Your Success Is Guaranteed !

Related Articles

React Alternatives
Paridhi Wadhwani

May 2, 2022

React JS

React Alternatives Frameworks- Lightweight Javascript Libraries

By : Paridhi Wadhwani

Quick Summary: The blog covers a list of React alternatives - JS web frameworks that help you create flawless frontends for your web application. I...

17 Minute Read
Read More
React Static Site Generators
Mrinal Saraswat
Paridhi Wadhwani

March 24, 2022

React JS

Top React Static Site Generators for 2022

By : Mrinal Saraswat & Paridhi Wadhwani

Quick Summary: Static Site generators are generally used to create static contentful websites that make your content easy for consumption. Using SSGs, you create HTML...

7 Minute Read
Read More
Why use React
Paridhi Wadhwani

March 11, 2022

React JS

Why Use React Js: A Complete Guide

By : Paridhi Wadhwani

Quick Summary: This blog sheds light on the perks of why use React for frontend development and why you should outsource ReactJs development services. It...

4 Minute Read
Read More

How Can We Help You?

india India (HQ)

1207-1210, Time Square, Thaltej-Shilaj Road, Ahmedabad

USA USA

4995 NW 72nd Ave, Suite 307 Miami, FL 33166

canada Canada

71 Dawes Road, Brampton, On L6X 5N9, Toronto

australia-flag Australia

351A Hampstead Rd, Northfield SA 5085

UAE UAE

1608 Clover Bay, Business Bay, Dubai, UAE. PO Box 62049

sweden Sweden

Junkergatan 4, 126 53 Hagersten


Great Place to Work

Get in Touch

call-yellow-icon

Contact Number

+1 347 441 4161

gmail-icon

Email Us

[email protected]


  • Brochure
  • Quality Assurance
  • Resources
  • FAQs
  • Customer Reviews
  • Tutorials
  • Privacy Policy
  • Sitemap
  • Contact Us
  • Employee
  • bacancy google review 4.6
    bacancy google review
    bacancy glassdoor review 4.5
    bacancy glassdoor review
    bacancy clutch review 4.8
    bacancy clutch review
    bacancy goodfirms review 4.5
    bacancy goodfirms review
    X

    Get Our Newsletter

    Be The First To Get The Latest Updates And Tutorials.

    Request A Free Consultation