Benchmark Issue: ReactNative, Twrnc, and Unistyles Tests Have a Smaller vDOM Compared to Others

[ku8ar]

The benchmarks for ReactNative, Twrnc, and Unistyles focus on testing object-based styling libraries. In contrast, the remaining tests assess component-based styling libraries.

Example of component styling:

const StyledView = styled.View` someStyle `;

This type of component is essentially equivalent to:

const StyledView = () => <View style={someStyleTranspiled} />;
StyledView.displayName = 'StyledView'; // This part is automatically added by [babel/preset-react] or the styling library.

The StyledView name is crucial. It represents a new node in the virtual DOM, which enhances debugging and visibility in development tools.

Most styling libraries generate new components because it aligns with React's best practices and real-world use cases.

For React Native, the appropriate test should look like this:

// New node 
const ViewWithStyle = () => <View style={styles.styledView} />;

const Native = () => {
  return (
    <View style={{ display: 'flex', flexDirection: 'row' }}>
      {new Array(COUNT).fill(0).map((_, i) => (
        <ViewWithStyle key={i} />
      ))}
    </View>
  );
};

Adding new components instead of just using <View /> will produce more meaningful and accurate results in testing.