React: How can I efficiently make my component so the entire component doesn't re-render when a prop changes?

Question

My Concern

I built a component PageLayoutSideBar.tsx that takes in two props: sideBar + content . This component will serve as an easy way to insert sideBar and page with the proper styling and sideBar width. If a prop changes in the content , will the entire PageLayoutSideBar component re-render, which would re-render the sideBar ?

Question

How can I efficiently make this component so the entire component doesn't re-render? I want to not re-render the sideBar if a prop or data changes in with ComponentOne , ComponentTwo , and/or ComponentThree .

PageLayoutSideBar.tsx

// Imports: Dependencies
import React from 'react';

// TypeScript Type: Props
interface Props {
  sideBar: JSX.Element,
  content: JSX.Element,
};

// Component: Page Layout (Side Bar)
const PageLayoutSideBar: React.FC<Props> = (props): JSX.Element => {
  return (
    <div id="page-layout-side-bar-container">
      <div id="page-layout-side-bar-side-bar-container">
        <>{props.sideBar}</>
      </div>

      <div id="page-layout-side-bar-content-container">
        <>{props.content}</>
      </div>
    </div>
  );
};

// Exports
export default PageLayoutSideBar;

Account.tsx

// Imports: Dependencies
import React, { useEffect, useState } from 'react';

// Page: Account
const Account: React.FC = (): JSX.Element => {
  return (
    <PageLayoutSideBar
      sideBar={
        <SideBar currenttab="Account" />
      }
      content={
        <>
          <Title title="Account" />
 
          <Row id="account-account-items-container">
            <Col xs={12} sm={12} md={12} lg={6} xl={6}>
              <ComponentOne
                propOne="User"
                propTwo=[1,2,3,4,5]
              />

              <ComponentTwo
                propThree="User"
                propFour=[1,2,3,4,5]
              />

              <ComponentThree
                propFive="User"
                propSix=[1,2,3,4,5]
              />
            </Col>
          </Row>
        </>
      }
    />
  );
};

// Exports
export default Account;

Answer 1

I think a possible solution would use useMemo along with React.memo. here's a working example . I think we can use useMemo to memoize the values returned when calling SideBar or Content/>, then we can pass these memoized values to PageLayoutSideBar where instead of rendering them in Fragments we render them inside Functional Components that have been passed to React.memo.