What is React.memo() in React JS ?

React.memo() is a higher-order component (HOC) that enhances the performance of React applications by memoizing functional components. Memoization is a process where the result of a function is cached based on its inputs so that it doesn't need to re-compute the result if the inputs remain unchanged.

Key Features of React.memo()

Prevents Unnecessary Re-renders

Shallow Comparison:

Custom Comparison Function:

When to Use React.memo()

If your component is "pure" (its output is determined solely by its props and has no side effects), memoization can be beneficial.

Use React.memo() when you know that a component receives props that are unlikely to change frequently. This is especially useful for components that are expensive to render.

In cases where a parent component updates frequently but its child components don't depend on the changing data, React.memo() can help prevent unnecessary updates to the child.