React memo - Performance Optimization

React.memo(Component)

Performance optimization is an important factor in web development.
React.memo as a higher-order component used for optimizing functional components by memoizing their output.
React uses “memoization” as an optimization technique to speed up the rendering process of the components.

• React.memo() was introduced with React 16.6 to avoid unnecessary re-renders in functional components.
• It is a higher-order component that accepts another component as a prop.
• It will only render the component if there is any change in the props.
• Here, the parent renders again anytime I make a change to its state in the parent component. A child is also rendered again. However, there are no modifications or effects for youngsters. Extraneous rework.

GIF

Here, the parent renders again anytime I make a change to its state in the parent component. A child is also rendered again. However, there are no modifications or effects for youngsters. Extraneous rework.

React.memo(ChildComponent)

My child component is wrapped to React.memo (child) in this instance. It is therefore rendered only when my props for this child change.

GIF