base-ui test case

page.tsx

'use client';

import * as React from 'react';

import { Flex } from '@joy-ui/react';
import { useRenderElement } from '@base-ui-components/react';

import './page.css';

import './perf-test.css'

export default function Home() {
  const [show, setShow] = React.useState(false)
  return (
    <Flex direction='column'>
      <h1>Test</h1>
      <button onClick={() => setShow(!show)}>run</button>
      {show && <Wrapper />}
    </Flex>
  );
}

function Button(props: any) {
  const { render, className, ...otherProps } = props;

  otherProps.className = 'Button'

  const state = React.useMemo(
    () => ({
      open: true,
      side: 'bottom',
      align: 'left',
      uncentered: true,
    }),
    [],
  );

  const element = useRenderElement('button', props, {
    state,
    props: otherProps,
  });

  return element;
}

function Wrapper() {
  return (
    <div>
      {Array.from({ length: 10 }).map((i) =>
        <div key={i as any}>
          <Button>test</Button>
          <Button>test</Button>
          <Button>test</Button>
          <Button>test</Button>
          <Button>test</Button>
          <Button>test</Button>
          <Button>test</Button>
          <Button>test</Button>
          <Button>test</Button>
          <Button>test</Button>
        </div>
      )}
    </div>
  )
}

perf-test.css

.Button {
  &[data-open] {
    color: red;
  }
  &[data-side="bottom"] {
    border: 1px solid red;
  }
  &[data-align="left"] {
    background-color: rgba(255, 0, 0, 0.1);
  }
  &[data-uncentered] {
    border-style: dashed;
  }
}

.Button {
  &.state-open {
    color: red;
  }
  &.state-side--bottom {
    border: 1px solid red;
  }
  &.state-align--left {
    background-color: rgba(255, 0, 0, 0.1);
  }
  &.state-uncentered {
    border-style: dashed;
  }
}