When App Re-renders, Main Also Re-renders.

App.jsx

const Main = ({userName}) => {
  const content = heavyCalculation({userName});
  return (
    <div className="Main">
      {content}
    </div>
  );
}

export default function App({userName}) {
  return (
    <div className="App">
      <Header />
      <Main userName={userName} />
    </div>
  );
}