React memo is a higher-order component (HOC) that is used to optimize the performance of functional components in React. It works by “memoizing” the component, which means that it will only re-render if the props passed to the component have changed. This can greatly improve the performance of your application, especially if you have a lot of components that are re-rendering unnecessarily.
To use React memo, you simply wrap your functional component in the memo function, like so
React memo also takes a second argument, which is a comparison function. This function is used to determine whether or not the props have changed, and if they have, the component will re-render. The default comparison function is a shallow comparison, which checks if the props are the same object. However, you can also pass your own comparison function if you need more control over how the props are compared.
For example, if you have a component that takes an array as a prop, you can use the default shallow comparison to check if the array has changed. However, if the array contains objects, it will not re-render even if the contents of the objects have changed. To fix this, you can pass your own comparison function that checks if the contents of the objects have changed:
In this example, we're comparing the length of the arrays and then checking if each item in the array is the same. If both of these conditions are true, the component will not re-render.
In conclusion, React memo is a powerful tool for optimizing the performance of your React application. By memoizing functional components, you can greatly reduce the number of unnecessary re-renders, which can improve the overall performance of your application. Additionally, by using a custom comparison function, you can have even more control over when your component re-renders. So, it is always recommended to use React memo in your project to improve performance and also to reduce unnecessary re-renders