Avoid Unnecessary renders in React

MemoizedChildren.jsx

function Info({ radius }) {
  <div>
    <p>Radius:{radius}</p>
    <p>Area:{(radius * radius * 22) / 7}</p>
  </div>;
}

const MemoizedInfo =   React.memo(Info);

function Circle({ radius, xCenter, yCenter }) {
  <svg height="100%" width="100%">
    <circle cx={xCenter} cy={yCenter} r={radius} />
  </svg>;
}
const MemoizedCircle =   React.memo(Circle);

MemoizedParent.jsx

function Screen({ radius, xCenter, yCenter }) {
  <>
    <MemoizedCircle radius={radius} xCenter={xCenter} yCenter={yCenter} />
    <MemoizedInfo radius={radius} />
  </>;
}
const MemoizedScreen =   React.memo(Screen);

MemoizedParentWithCallback.jsx

function Screen({ radius, xCenter, yCenter }) {
  const onHandleClick = useCallback(() => {
        superClick(radius)
    });
    
  <>
    <MemoizedCircle radius={radius} xCenter={xCenter} yCenter={yCenter} />
    <MemoizedInfo radius={radius} />
    <MemoizedButton handleClick={onHandleClick}/>
  </>;
}

MemoizedWithButtons.jsx

function Button(handleClick) {
  <button onClick={handleClick}>Click me</button>;
}

const MemoizedButton = React.memo(Button) 


function Screen({ radius, xCenter, yCenter }) {
  <>
    <MemoizedCircle radius={radius} xCenter={xCenter} yCenter={yCenter} />
    <MemoizedInfo radius={radius} />
    <MemoizedButton handleClick={() => {superClick(radius)}}/>
  </>;
}

PassingProps.jsx

function Circle({ radius, xCenter, yCenter }) {
 <svg height="100%" width="100%">
 <circle cx={xCenter} cy={yCenter} r={radius} />
 </svg>;
}

function Info({ radius }) {
 <div>
 <p>Radius:{radius}</p>
 <p>Area:{(radius * radius * 22) / 7}</p>
 </div>;
}

function Screen(props) {
 <>
 <Circle {…props} />
 <Info {…props} />
 </>;
}

PassingSpecificProps.jsx

function Screen({ radius, xCenter, yCenter }) {
  <>
    <Circle radius={radius} xCenter={xCenter} yCenter={yCenter} />
    <Info radius={radius} />
  </>;
}