[perf] Remove theme allocations

[romgrk]

Draft to show how to avoid theme/styling allocations and apply optimizations on top of a stable theme. This is opened here instead of the core repo just to present the changes compared to the perf-system-allocations.

The problem with theme allocations is:

const Button = styled('button', {
  name: 'Button',
})(({ theme }) => /* <----------- this function here */ ({
  color: theme.palette.fg,
  /* lots more styling */
  variants: [
    ...
  ],
}));

That function there runs on every render for every button, and allocates the huge style object for each of them. It's an insane cost, and that style object is completely identical as long as the theme stays constant.

There's a very simple option, it's to add a memoization wrapper around that function when we know it's pure and doesn't need access to props. I've implemented a draft of this approach here, it saves us another 10% runtime cost across the board (so 30% total with the other perf PRs).

[romgrk]

This is an example of optimization that can be unlocked once we know the style is static & shared across all instances of a component. We can speed up matching variant styles by eval-compiling predicate function for their props.

This is independent of the core proposition (removing theme/style allocations on every render) though, it's just here to illustrate how a stable theme makes other things possible.

[romgrk]

Not entirely sure how PigmentCSS works and if this would mess up its extraction logic though.

[siriwatknp]

I think Pigment CSS needs to support this too.

[siriwatknp]

Let's wait @brijeshb42 to confirm if this is possible

[romgrk]

Let's continue the discussion here: mui#43372 (comment)