How to add performance boost to functional component in Reactjs


Perhaps you already learn what Pure Component stands for. Here is link to the post.

Components that render with change in Reactjs - Components that render only when a change is occurred in Reactjs

A pure component only render when the content changes even if the parent re-render all its components. In big data application this type of component produce performance boost. This is a class component only feature.

So what we do when some functional component need to be render with change? This what a Memo stands for.

Memo is functional component feature which can be added to a component as follows

import React from 'react'

function MemoComp({name}) {
   console.log('Rendering Memo Comp');
   return (
       <div>
          {name}
       </div>
  )
}
export default React.memo( MemoComp)

Using the memo keyword in export statement , we can specify the component as memo.

The above component only render for the first time when the component mounted and then it render when the name changes only.

Published by

Manoj

A developer,teacher and a blogger obsessed with Python,Dart and open source world from India

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.