Styled props are ~30% slower at render than cva or css

[kris-ellery]

Hello friends!

As we refactor our design system components to use TS and Panda, we are also running performance benchmarks. Recently, I tested the 100 Button components and noticed poor render results. After some investigation, I found the culprit: the styled props.

Panda offers two ways to create styled props: either via styled.button or via the splitCssProps hook that separates styled props from the rest.

// via styled.button
export const Button: FC<ButtonProps> = (props) => {
  return <styled.button {...props} />;
};

// via splitCssProps
export const Button: FC<ButtonProps> = (props) => {
  const [cssProps, restProps] = splitCssProps(props);
  const { css: cssProp, ...styleProps } = cssProps;
  return <button className={css(styleProps, cssProp)} {...restProps} />;
};

Both examples allow consumers to pass styled props that generate atomic utility class names.

<Button marginBottom="30px" marginTop={{ base: '10px', lg: '30px' }} />
<Flex display="flex" gap="10px" flexDirection={{ base: 'column', lg: 'row' }} />
<Text textAlign={{ base: 'center', lg: 'left' }} />

Both approaches use the same splitProps method. This operation is costly and, for our performance test of 100 Buttons, it has increased the mount time by 30% and re-render by 40% in a Next 14 and React 18 environment.

Clearly, we're not happy about this and wonder if leveraging the css prop and skipping splitCssProps altogether is the way to go.

Here is an example of using the css prop rather than individual styled props from the previous example:

<Button css={{ marginBottom: '30px', marginTop: { base: '10px', lg: '30px' } }} />
<Flex css={{ display: 'flex', gap: '10px', flexDirection: { base: 'column', lg: 'row' } }} />
<Text css={{ textAlign: { base: 'center', lg: 'left' } }} />

This issue does not seem specific to Panda; it's something every static CSS library deals with — the mapping of props and their values to the correct class names.

So the question is, can we make styled props faster or do we have to use css prop to maximize performance? Note, we had zero success with unplugging and removing Panda's runtime in our setup.

[mverissimo]

How do you measure this benchmark? Could share some reproduction?

[kris-ellery]

I run a Next.js app with 100 buttons, each with random variants (size, tone, disabled, etc), then measure render times with React Profiler for mount and update. I do this in dev and prod environments.

Here is an example comparing Button, SplitCssButton, and StyledButton. See console log for mount and re-render metrics.

https://codesandbox.io/p/devbox/panda-button-render-performance-forked-vydk8r

The differences in this example aren't as significant due to low complexity. However, once you start adding Button.Label and Button.Icon subcomponents things start to add up.

[kris-ellery]

I might try automated testing next with https://github.com/callstack/reassure

[omridevk]

@kris-ellery I personally use the CSS prop to use less runtime as possible

[Emiliano-Bucci]

Ah ok thanks for the clarification, didn't know about that :/

[Emiliano-Bucci]

@astahmer Just a clarification, is there any performance difference between these two code snippets?:

import { splitCssProps, styled } from '../styled-system/jsx'
import type { HTMLStyledProps } from '../styled-system/types'
 
export function Component(props: HTMLStyledProps<'div'>) {
  const [cssProps, restProps] = splitCssProps(props)
  const { css: cssProp, ...styleProps } = cssProps
 
  const className = css(
    { display: 'flex', height: '20', width: '20' },
    styleProps,
    cssProp
  )
 
  return <div {...restProps} className={className} />
}
 
// Usage
function App() {
  return <Component w="2">Click me</Component>
}

import { styled } from '../styled-system/jsx'
import type { JsxStyleProps } from '../styled-system/types'
 
interface ButtonProps {
  color?: JsxStyleProps['color']
}
 
const Button = (props: ButtonProps) => {
  return <styled.button {...props}>
}

Or why should I prefer one instead of another one?
I remember that using css()/css`` inside the render (when using emotion for example) wasn't the optimal thing to do because of the recreation of the styles every time on every render. The same thing can be applied to panda?

[kris-ellery]

@Emiliano-Bucci from my testing, both have the same performance drawbacks, even with jsxStyleProps set to minimal.

[Emiliano-Bucci]

So basically to get the best performances while keeping composition we should do this?

const styles = css({
  // ...
});

function Component({ children, className, ...rest }) {
  return (
    // import cs from 'classNames'
    <div {...rest} className={cs(styles, className)}>
      {children}
    </div>
  );
}

or also this is just fine?

import { css } from "../styled-system/css";

const styles = {
  bg: "red",
  p: "24px",
};
const styles2 = {
  bg: "orange",
  p: "32px",
};

function App() {
  return <div className={css(styles, styles2)}>Example</div>;
}

export default App;

[astahmer]

both are fine, it shouldnt matter much in most cases
in the few perf-sensitive cases where this would matter, pre-computing the class name (from the JS style object) will always be faster than doing it over and over in the component render phase

// the matching CSS is extracted/generated at build-time
const App = () => <div className={css({ ... })} /> // but the className is computed (object style to class string) every render

const className = css({ ... }) // this will just be computed once

const App = () => <div className={className} />

if you're at the point where you need to optimize the performance of components using inline css calls, you most likely have bigger issues

---

anyway, this can still be optmized using a bundler plugin [like this one ](https://github.com/astahmer/pandabox?tab=readme-ov-file#optimizejs-option

[astahmer]

So the question is, can we make styled props faster or do we have to use css prop to maximize performance?

I think it's quite fast already, given the constraints (if it can be improved we'd be happy to merge that in)
but yes I totally agree, in perf sensitive cases (rendering hundreds of times a component, it shouldnt matter in most cases), a super simple solution is to:

• either use css(xxx) instead of styled
• or if that happens with css(xxx), extract the css(xxx) call outside of the component render cycle so that it doesnt have to re-compute the same thing over and over

---

Note, we had zero success with unplugging and removing Panda's runtime in our setup.

I didnt understand this part, can you explain ?

[kris-ellery]

We have tried to add additional PostCSS plugins, like postcss-prune-var or postcss-css-variables, but there is no difference in static CSS output. Tried before and after Panda plugin in postcss.config.js

We have also tried the pandabox plugins with mixed results. We have not been able to inline class names at build time. I think certain conditions had to be met between design system, consuming app, etc.

Side note, we have noticed issues with hashing. When design system builds a manifest file panda.buildinfo.json with hashing turned off, and the consuming app turns on the hashing, the styles in CSS are hashed, but not in DOM.

I love using Panda, but the integrations and custom build solutions are a bottleneck.

[segunadebayo]

To improve the performance here, I would recommend taking a look at the split props implementation in the styled-system folder, and try to write a faster implementation.

Once you figure it out, you can contribute back my opening a PR.