Benchmark: Classnames vs CLSX vs classNamesCurrent

HTML Preparation code:


<script src='https://cdnjs.cloudflare.com/ajax/libs/classnames/2.5.1/index.min.js'></script>
<script src='https://unpkg.com/clsx@2.1.1/dist/clsx.min.js'></script>
<script>
  window.classNamesCurrent = (...classes) => {
    return classes.filter(Boolean).join(" ");
  };
</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
let result = window.classNames(str, obj, arr, 'test classname')
clsx
let result = window.clsx(str, obj, arr, 'test classname')
classNames current
let result = window.classNamesCurrent(str, obj, arr, 'test classname')

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
classnames
clsx
classNames current

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

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

Browser/OS: Chrome 126 on Mac OS X 10.15.7

View result in a separate tab

clsx

4.4M/s

classnames

4.3M/s

classNames current

3.1M/s

View exact numbers

Test name	Executions per second
✓ clsx	4,449,324 Ops/sec
classnames	4,251,026 Ops/sec
classNames current	3,051,614 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the JavaScript microbenchmark: Classnames vs CLSX vs classNamesCurrent.

**What is tested?**

The benchmark compares three different approaches for creating class names in JavaScript:

1. `classnames` (from the `classnames` library)
2. `clsx` (from the `clsx` library)
3. `classNamesCurrent` (a custom implementation, not part of any popular library)

**Options compared:**

* `classnames`: This approach uses a function to take multiple strings and return a new string that includes all the classes from the input arrays, separated by spaces.
* `clsx`: This approach uses a function that takes multiple strings and returns a new string that includes all the classes from the input arrays, but with some additional features (like support for nested class names).
* `classNamesCurrent`: This is a custom implementation that filters out falsy values from the input arrays before joining them into a single string.

**Pros and cons of each approach:**

1. **classnames**:
	* Pros: Simple to implement, easy to read.
	* Cons: Does not handle nested class names or other edge cases well.
2. **clsx**:
	* Pros: Supports nested class names and has some built-in optimizations for performance.
	* Cons: Has a slightly larger footprint due to the additional features.
3. **classNamesCurrent**:
	* Pros: Can be more efficient than `classnames` if only falsy values need to be filtered out.
	* Cons: May not handle edge cases well, and is not part of any popular library.

**Library:**

1. `classnames`: A small, lightweight utility library for working with class names in JavaScript.
2. `clsx`: A more feature-rich alternative to `classnames`, with support for nested class names and some built-in optimizations.

**Special JS feature or syntax:**

None mentioned explicitly.

**Benchmark preparation code explanation:**

The script preparation code sets up the input data (two objects, `obj` and an array, `arr`) that will be used in the benchmark. The HTML preparation code includes links to the `classnames` and `clsx` libraries, as well as a custom implementation of `classNamesCurrent`.

**Benchmark test cases:**

Each test case uses one of the three approaches ( `classnames`, `clsx`, or `classNamesCurrent`) to create a class name string from the input data. The raw UA string is reported for each execution.

**Alternatives:**

Other alternatives to these libraries include:

* `lodash` (which has a `classNames` function)
* `js-csp` (a small library that provides a similar class name functionality)
* Custom implementations like `classNamesCurrent`, but with different optimizations or handling of edge cases.

Classnames vs CLSX vs classNamesCurrent (version: 0)

Compare CLSX vs Classnames vs classNamesCurrent

Comparing performance of: `classnames vs clsx vs classNames current`

Created: 2 years ago by: Registered User

Go to the latest result

classnames

clsx

classNames current

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Classnames vs CLSX vs classNamesCurrent (version: 0)

Compare CLSX vs Classnames vs classNamesCurrent

Comparing performance of: classnames vs clsx vs classNames current

Created: 2 years ago by: Registered User

Go to the latest result

classnames

clsx

classNames current

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 vs clsx vs classNames current`