React Memo In React

In React, React.memo is a higher-order component in React that's used for optimizing functional components by preventing unnecessary re-renders.

It's similar to the `PureComponent` for class components. When we wrap a component with `React.memo`, it will only re-render if its props have changed.

When a component is wrapped with a `React.memo` Higher-order Component it receives new props, It compares the new props with the previous props. If the props are the same (shallow comparison), It reuses the memoized render result, skipping the rendering process and improving the performance by preventing unnecessary re-renders.

Use cases of React.memo() Function In React:

Optimizing Expensive Computations: If a component performs expensive computations or calculations, wrapping it with `React.memo` can prevent those computations from being repeated when the component re-renders with the same props.
Rendering Large Lists: When rendering large lists of items, using `React.memo` can optimize the rendering process by avoiding unnecessary re-renders of list items when the list itself or its item props haven't changed.
Performance Optimization: Memoization can significantly improve the performance of our React application by preventing unnecessary re-renders, especially for components that render frequently with the same props.

Example: React Memo

import React, { memo } from 'react';

// Regular functional component
const YourComponent = ({ firstName, lastName }) => {
  console.log('Rendering YourComponent...');
  return (
    <div>
      <p>First Name: {firstName}</p>
      <p>Last Name: {lastName}</p>
    </div>
  );
};

// Wrap YourComponent with React.memo
const MemoizedYourComponent = memo(YourComponent);

export default MemoizedYourComponent;

"YourComponent" is a regular functional component that takes "firstName" and "lastName" as props.
`React.memo` is applied to YourComponent using memo(YourComponent).
MemoizedYourComponent is the memoized version of YourComponent.

Now, when we can use `MemoizedYourComponent` in a parent component, it will only re-render if the "firstName" or "lastName" props change.

If the props remain the same, React will skip the rendering process, resulting in performance improvements.

Example: In Parent Component

import React, { useState } from 'react';
import MemoizedYourComponent from './YourComponent';

const YourParentComponent = () => {
  const [person, setPerson] = useState({ firstName: 'Alice 123', lastName: 'Collin' });
  const [count, setCount] = useState(0);

  const updateProfile = () => {
    setPerson({ firstName: 'Edward', lastName: 'Williams' });
  };

  const incrementCount = () => {
    setCount((prev) => prev + 1);
  };

  return (
    <div>
      <MemoizedYourComponent firstName={person.firstName} lastName={person.lastName} />
      <div>
       <button onClick={() => updateProfile()}>Update Profile</button>
      </div> 
      <div>
       Count: {count}
       <button onClick={() => incrementCount()}>Count + </button>
      </div>
    </div>
  );
};
 export default YourParentComponent;

Clicking the "Update Profile" button will update the person's state, triggering a re-render of `MemoizedYourComponent` only if the `firstName` or `lastName` props change.

After updating profile data, update the `incrementCount()` function it will update the re-render parent component, but it will prevent the child component from re-rendering

Without `React.memo`, the component would re-render on every state update, even if the props remain the same.

<-- React Forms