What is React.memo? Can you wrap the entire application in memo? Why is it bad to use memoization everywhere?

React.memo is a higher-order component that optimizes functional components by preventing re-rendering if the props haven't changed. It compares the current and previous props and re-renders the component only when they differ.

Technically, you can wrap the entire application in React.memo, but it's not advisable. Memoization is usually useful for components that frequently receive the same props and are expensive to render.

Reasons why using memoization everywhere is bad:

• The overhead of comparing props may outweigh the benefits of skipping a render.
• Memoization complicates logic and debugging.
• Not all components benefit from memoization, especially simple and fast ones.

Example of using React.memo:

const MyComponent = React.memo(function MyComponent(props) {
  // the component will only re-render when props change
  return <div>{props.value}</div>;
});