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

Test name	Executions per second
classnames(str)	17754122.0 Ops/sec
classnames(obj)	12050077.0 Ops/sec
classnames(arr)	8238662.5 Ops/sec
clsx(str)	47224320.0 Ops/sec
clsx(obj)	26192550.0 Ops/sec
clsx(arr)	26609652.0 Ops/sec
classcat(str)	111253032.0 Ops/sec
classcat(obj)	35137056.0 Ops/sec
classcat(arr)	30087634.0 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.

Related benchmarks:

classnames - clsx - classcat (version: 0)

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

Jump 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):