Benchmark: classNames vs clsx - strings only

HTML Preparation code:

<script src='https://unpkg.com/clsx@2.1.1/dist/clsx.min.js'></script>
<script>
  window.classNames = (...classes) => {
    return classes.filter(Boolean).join(" ");
  };
</script>

Script Preparation code:

var str = 'style';
var condition1 = true ? 'true-string-1' : 'false-string-1';
var condition2 = true && 'true-string-2';
var condition3 = false && 'false-string-3';

Tests:

clsx
let result = window.clsx(str, condition1, condition2, condition3, 'test classname')
classNames
let result = window.classNames(str, condition1, condition2, condition3, 'test classname')

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
clsx
classNames

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; rv:128.0) Gecko/20100101 Firefox/128.0

Browser/OS: Firefox 128 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
clsx	9586835.0 Ops/sec
classNames	4866501.5 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 provided JSON data and explain what's being tested on MeasureThat.net.

**Benchmark Definition**

The benchmark is comparing two JavaScript libraries: `clsx` and `classNames`. The specific comparison is between strings only.

**What are the options being compared?**

1. `clsx`: A library for conditionally joining class names.
2. `classNames`: Another library for conditionally joining class names, with a slightly different approach than `clsx`.

**Pros and Cons of each approach:**

* `clsx`:
	+ Pros:
		- Simple and concise API.
		- Fast performance due to its caching mechanism.
	+ Cons:
		- Limited customization options.
		- May have compatibility issues with older browsers.
* `classNames`:
	+ Pros:
		- More customizable than `clsx`.
		- Supports multiple conditionals (not just the `&&` operator).
	+ Cons:
		- Slightly slower performance compared to `clsx`.

**Library: clsx**

The `clsx` library is a small, lightweight utility for conditionally joining class names. It's designed to be fast and efficient, with a caching mechanism that reduces the number of function calls.

**Special JS feature or syntax: None mentioned in this benchmark**

However, it's worth noting that both libraries use the `Boolean` filter to remove falsy values from the input array, which is a common pattern in JavaScript conditionally joining class names.

**Alternative approaches:**

1. Manual implementation without using a library: This approach would involve writing custom code to join class names based on conditions.
2. Other conditionally joined class name libraries: There are other libraries available that provide similar functionality to `clsx` and `classNames`, such as `react-classnames` or `css-conditionals`.

**Benchmark preparation code**

The script preparation code sets up the `clsx` library by defining a global function `window.clsx` that takes an array of class names and conditions, filters out falsy values, and joins the remaining classes with spaces.

The HTML preparation code includes the `clsx.min.js` file from Unpkg, which loads the `clsx` library.

Related benchmarks:

classNames vs clsx - strings only (version: 2)

classNames vs clsx - strings only

Comparing performance of: clsx vs classNames

Created: one year ago by: Registered User

Jump to the latest result

clsx

classNames

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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