This has literally no effect

Okay will abandon this diff, but before I do, I want to really make sure that I understand why memoization is not necessary here so that I don't make any mistakes with memoization in the future. From what I understand after doing some more reading, the reason we don't need to memoize here is because both Header and Footer are components composed primarily of static content (they don't deal with any state management, don't have any effects, deal with any expensive calculations, or take in any props). There is also no deep component hierarchy with both of these components, meaning that there are not many nested components within both of these components so rendering both of these components are not considered expensive and memoization is unnecessary here

No, that's not it. The issue is that the children prop you're passing to <div className={css.innerContainer}> will get recreated anyways every time as <>{header}{activePage}{footer}{modals}</>. You're not successfully memoizing any prop passed to any component, so there is no benefit here. You would have to memoize the entirety of <>{header}{activePage}{footer}{modals}</> for it to have any effect.

No, that's not it. The issue is that the children prop you're passing to <div className={css.innerContainer}> will get recreated anyways every time as <>{header}{activePage}{footer}{modals}</>. You're not successfully memoizing any prop passed to any component, so there is no benefit here. You would have to memoize the entirety of <>{header}{activePage}{footer}{modals}</> for it to have any effect.

Okay thank you for taking the time to explain this. I just created D7781 and left a comment where I wrote some memoization code. In this case, I would want to memoize since I am passing down props, and I can realize the benefits of memoization by memoizing the props that get passed to MobileNav. Here is the blurb of code for some context:

const mobileNav = React.useMemo(
  () => (
    <MobileNav
      showMobileNav={showMobileNav}
      setShowMobileNav={setShowMobileNav}
    />
  ),
  [showMobileNav, setShowMobileNav],
);

I may have misread the following from (https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/#component-render-optimization-techniques) and misled @ginsu here:

@ashoat will abandon this diff and fix the memoization concern in D7781, but let's talk more about this in our next 1on1

To revisit this after recently re-reading https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/#component-render-optimization-techniques and going through the performance optimization work, I do think this would have been marginally beneficial. Header and Footer are fairly simple so probably doesn't make a noticeable difference though

Just to verify my understanding, here's a before/after:

Before:

After (just memoized header as done here):

Ah, my bad. It looks like @atul is right... this change would have been marginally beneficial. Sorry @ginsu!