React : Comparison method (React.memo: shallow , _isEqual: deep)

React.memo

To fix the comparison method used by React.memo for prop comparison, you can provide a custom comparison function as the second argument to React.memo. This custom comparison function determines whether the component should be re-rendered by comparing the previous props with the next props.

 

The custom comparison function receives two arguments: prevProps and nextProps. It should return true if the props are considered equal and the component should not be re-rendered, or false if the props are considered different and the component should be re-rendered.

 

Here's an example of how to provide a custom comparison function to React.memo:

import React from 'react';

const arePropsEqual = (prevProps, nextProps) => {
  // Custom prop comparison logic
  // Return true if the props are equal, false otherwise
};

const MyComponent = React.memo(({ prop1, prop2 }) => {
  // Component logic and rendering
}, arePropsEqual);

export default MyComponent;

In this example, the arePropsEqual function is a custom comparison function that you provide as the second argument to React.memo. Inside arePropsEqual, you can implement your own comparison logic based on the specific requirements of your component's props.

 

 isEqual

For example, if your props are objects and you want to compare their properties deeply, you can use the isEqual function from a utility library like Lodash or implement your own deep comparison logic.

import React from 'react';
import _isEqual from 'lodash/isEqual';

const arePropsEqual = (prevProps, nextProps) => {
  // Deep comparison of props using Lodash's isEqual
  return _isEqual(prevProps, nextProps);
};

const MyComponent = React.memo(({ prop1, prop2 }) => {
  // Component logic and rendering
}, arePropsEqual);

export default MyComponent;

By providing a custom comparison function, you have control over how the props are compared, allowing you to fine-tune the memoization behavior of your component and ensure that it re-renders only when necessary.

 

Difference between '_isEqual' and 'React.memo'

 

_isEqual 

_isEqual is a utility function provided by Lodash that performs a deep comparison between two values to determine if they are equivalent. It recursively checks the properties of objects and elements of arrays to compare their values. It's a powerful tool for comparing complex data structures and is often used to implement custom comparison logic.

 

React.memo :

On the other hand, the comparison method used by React.memo is a shallow prop comparison method provided by React itself. By default, it performs a shallow equality check on the props using the Object.is method. This means that if the prop values are primitive types (like numbers or strings), React.memo will compare them by their values. If the prop values are objects or arrays, React.memo will compare the references to those objects or arrays.

 

When you provide a custom comparison function to React.memo, you have the opportunity to override the default shallow comparison behavior. The custom comparison function can implement a different comparison logic based on your specific needs. For example, you can use isEqual from Lodash to perform a deep comparison of the props or implement your own custom comparison logic.

 

In summary, _isEqual from Lodash is a separate utility function for deep value comparison, while the comparison method used by React.memo is a built-in mechanism in React for determining when a component should be re-rendered based on the props it receives. You can use _isEqual or other comparison techniques within a custom comparison function provided to React.memo to achieve more specific and custom prop comparisons if needed.