Benchmark: classnames - clsx - classcat

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/classnames/2.3.2/index.min.js'></script>
<script src='https://unpkg.com/clsx@latest/dist/clsx.min.js'></script>
<script type="module">
    import classcat from "https://unpkg.com/classcat?module"
    window.classcat = classcat
</script>

Script Preparation code:

var str = 'style';
var obj = {
 	 'style-2': true,
  	 'style-3': false,
 	 'style-4': true,
}
var arr = ['style-5', 'style-6']

Tests:

classnames(str)
let result = window.classNames(str, 'test classname')
classnames(obj)
let result = window.classNames(obj, 'test classname')
classnames(arr)
let result = window.classNames(arr, 'test classname')
clsx(str)
let result = window.clsx(str, 'test classname')
clsx(obj)
let result = window.clsx(obj, 'test classname')
clsx(arr)
let result = window.clsx(arr, 'test classname')
classcat(str)
let result = window.classcat(str, 'test classname')
classcat(obj)
let result = window.classcat(obj, 'test classname')
classcat(arr)
let result = window.classcat(arr, 'test classname')

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
classnames(str)
classnames(obj)
classnames(arr)
clsx(str)
clsx(obj)
clsx(arr)
classcat(str)
classcat(obj)
classcat(arr)

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36

Browser/OS: Chrome 132 on Mac OS X 10.15.7

View result in a separate tab

classcat(str)

111.3M/s

clsx(str)

47.2M/s

classcat(obj)

35.1M/s

classcat(arr)

30.1M/s

clsx(arr)

26.6M/s

clsx(obj)

26.2M/s

classnames(str)

17.8M/s

classnames(obj)

12.1M/s

classnames(arr)

8.2M/s

View exact numbers

Test name	Executions per second
✓ classcat(str)	111,253,032 Ops/sec
clsx(str)	47,224,320 Ops/sec
classcat(obj)	35,137,056 Ops/sec
classcat(arr)	30,087,634 Ops/sec
clsx(arr)	26,609,652 Ops/sec
clsx(obj)	26,192,550 Ops/sec
classnames(str)	17,754,122 Ops/sec
classnames(obj)	12,050,077 Ops/sec
classnames(arr)	8,238,662 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what is being tested, compared, and some pros and cons of each approach.

**Benchmark Overview**

The benchmark tests four JavaScript libraries: `classcat`, `clsx`, `classnames`, and their purpose is to concatenate or conditionally apply classes to HTML elements. The test cases compare the performance of these libraries when applied to different types of data: strings, objects, and arrays.

**Library Descriptions**

1. **Classnames (classnames)**: A lightweight library for conditionally applying CSS class names to DOM elements.
2. **Clsx (clsx)**: Another lightweight library for conditionally applying CSS class names to DOM elements, with a different API than `classnames`.
3. **Classcat**: A utility function that concatenates classes into a single string, similar to `classnames`.

**Test Case Analysis**

Each test case measures the execution speed of the respective library when applied to different types of data:

*   Strings: The libraries are called with a single string argument (`str`, `arr`) and the expected output is to apply only one class.
*   Objects: The libraries are called with an object argument (`obj`) that contains multiple properties, each corresponding to a CSS class. The expected output is to conditionally apply classes based on the object's properties.
*   Arrays: Similar to objects, but the array arguments contain multiple values.

**Performance Comparison**

The benchmark results show that:

*   `classcat` performs well when applied to arrays and strings.
*   `clsx` has better performance than `classnames` in most cases, especially for object inputs.
*   `classnames` is still a viable option but outperforms other libraries in only two test cases (arrays with specific string values).

**Pros and Cons**

Each library has its strengths:

*   **Classnames (classnames)**: Lightweight, easy to use, and supports conditionally applying CSS class names. However, it may not be as performant as other libraries for large datasets.
*   **Clsx**: Offers a different API than `classnames`, which might make it more convenient for some developers. Its performance is generally better than `classnames`.
*   **Classcat**: Simple and efficient, but its functionality is limited to concatenating classes.

**Recommendation**

Based on the benchmark results, if you prioritize performance, `clsx` seems to be a good choice. However, if you prefer a more lightweight solution with an easier API, `classnames` might still be suitable for many use cases.

Ultimately, the best library depends on your specific requirements and preferences. Take some time to evaluate each option and choose the one that best fits your project's needs.

classnames - clsx - classcat (version: 0) Benchmark.js

Comparing performance of: `classnames(str) vs classnames(obj) vs classnames(arr) vs clsx(str) vs clsx(obj) vs clsx(arr) vs classcat(str) vs classcat(obj) vs classcat(arr)`

Created: 3 years ago by: Guest

Go to the latest result

classnames(str)

classnames(obj)

classnames(arr)

clsx(str)

clsx(obj)

clsx(arr)

classcat(str)

classcat(obj)

classcat(arr)

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

classnames - clsx - classcat (version: 0) Benchmark.js

Comparing performance of: classnames(str) vs classnames(obj) vs classnames(arr) vs clsx(str) vs clsx(obj) vs clsx(arr) vs classcat(str) vs classcat(obj) vs classcat(arr)

Created: 3 years ago by: Guest

Go to the latest result

classnames(str)

classnames(obj)

classnames(arr)

clsx(str)

clsx(obj)

clsx(arr)

classcat(str)

classcat(obj)

classcat(arr)

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Related benchmarks

Comparing performance of: `classnames(str) vs classnames(obj) vs classnames(arr) vs clsx(str) vs clsx(obj) vs clsx(arr) vs classcat(str) vs classcat(obj) vs classcat(arr)`