Performance implications of different patterns for truly-dynamic styles?

[etlovett]

I'm curious if there are known performance differences between the following two patterns for handling styles that are truly dynamic. I realize the answer might even differ across browsers, so there may not be a single "correct" answer. Or perhaps there's another option that's recommended? It's not clear to me from this page of the docs exactly what the recommended solution is for this type of situation.

Imagine that the example snippets below are in the context of a drag-and-drop UI where we want to use CSS transform to visually move a DOM element to follow the mouse cursor during the drag. This same need arises in other scenarios as well, however, such as server-provided values that affect styling.

Option 1:
Put the full CSS into the style prop/attribute, like this:

<div style={{ transform: `translate(${transformX}px, ${transformY}px)` }}>

Option 2:
Define the style in className={css(...)} using CSS variables, then set the CSS variable values in the style prop/attribute, inspired by the example at https://panda-css.com/docs/guides/dynamic-styling#using-token:

<div 
  className={css({ transform: `translate(var(--transform-x), var(--transform-y))` })}
  style={{
    '--transform-x': `${transformX}px`,
    '--transform-y': ${transformY}px`,
  }}
>

Option 1 is simpler code, but option 2 seems "more Panda-y". Is there any clear benefit to either of these from a performance perspective, or any other reason you'd specifically recommend one of them over the other? Or is there another pattern you'd recommend for this sort of situation instead? Thanks!

[manspaniel]

I've done this a bunch! I've never found any performance issues with either approach, but I usually prefer Option 2 if setting with JSX, because I can swap to Framer Motion for spring-based variables later if I need, or reuse the CSS variables on a child element, or scale/offset/disable the transform at different breakpoints using media queries. You can have a pretty complex setup of CSS vars/calcs/transforms without having to worry too much about performance. Option 1 is fine too, if you know it's not going to get any more complex than that.

The only performance issue you're going to hit in the drag-and-drop example you've described is React updating too frequently. If you want to update the transform at 60fps, use Framer Motion to declaratively link up those anims, or update el.style.transform directly in a requestAnimationFrame while dragging if you wanna go custom.

Sorry that it doesn't really answer your question directly! I'd say they're both equivalent until some extreme point.