Benchmark: Classnames vs clsx with different api 2024

HTML Preparation code:

<script src="https://cdn.jsdelivr.net/npm/classnames@2.5.1/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clsx@2.1.1/dist/clsx.min.js"></script>

Tests:

classnames
window.classNames('uu-foo', { 'uu-foo_bar': true, 'uu-foo_baz': false });
clsx (classnames api)
window.clsx('uu-foo', { 'uu-foo_bar': true, 'uu-foo_baz': false });
clsx (objects)
window.clsx({ 'uu-foo': true, 'uu-foo_bar': true, 'uu-foo_baz': false });
clsx (arguments)
window.clsx('uu-foo', true && 'uu-foo_bar', false && 'uu-foo_baz');
clsx (array)
window.clsx(['uu-foo', true && 'uu-foo_bar', false && 'uu-foo_baz']);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
classnames
clsx (classnames api)
clsx (objects)
clsx (arguments)
clsx (array)

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36 Edg/126.0.0.0

Browser/OS: Chrome 126 on Windows

View result in a separate tab

Test name	Executions per second
classnames	4541000.0 Ops/sec
clsx (classnames api)	4670084.0 Ops/sec
clsx (objects)	4697179.5 Ops/sec
clsx (arguments)	5163801.0 Ops/sec
clsx (array)	4498271.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 provided benchmark and explain what is being tested.

**Benchmark Overview**

The benchmark tests two JavaScript libraries: `classnames` and `clsx`. Both libraries are used to conditionally apply classes to HTML elements, but they differ in their API (Application Programming Interface).

**Library Overview**

1. **classnames**: Developed by Alex Sexton, classnames is a lightweight library that allows you to join an array of classes into a single string, prefixed with the namespace separator `'-'`. The library also supports conditional statements and object iteration.
2. **clsx**: Developed by Jonathan Hallett, clsx is another lightweight library that offers similar functionality to classnames. However, it uses an object notation for conditions instead of conditional statements.

**Options Compared**

The benchmark compares four test cases:

1. `classnames` with the default API (`'-'` prefix)
2. `clsx` with the classnames API (`'-'` prefix)
3. `clsx` with objects
4. `clsx` with arguments

**Pros and Cons of Each Approach**

Here are some pros and cons for each approach:

1. **Classnames (default)**:
	* Pros: Lightweight, easy to use.
	* Cons: Prefixing classes with `'-'` can lead to conflicts if not handled carefully.
2. **Clsx (classnames API)**:
	* Pros: Similar syntax to classnames, easier to learn for existing users.
	* Cons: Might be less efficient due to the additional overhead of using an object notation.
3. **Clsx (objects)**:
	* Pros: More flexible and powerful than the default `clsx` API.
	* Cons: Steeper learning curve due to the object notation.
4. **Clsx (arguments)**:
	* Pros: Allows for dynamic class selection, useful in certain scenarios.
	* Cons: Less intuitive than other approaches.

**Special Consideration**

The benchmark also considers special cases:

1. **Arguments**: `clsx` supports passing arguments as an array of strings. This can be useful when you need to dynamically select classes based on conditions or values.
2. **Objects**: `clsx` allows using objects with string values to conditionally apply classes. This can simplify your code and reduce the need for conditional statements.

**Alternatives**

Other alternatives for conditionally applying classes in JavaScript include:

1. **CSS classes**: Using CSS classes is a widely adopted approach, but it requires HTML changes.
2. **Conditional expressions (ternaries)**: Using ternary operators (`condition ? value_if_true : value_if_false`) can be an alternative to the classnames/clsx libraries.
3. **Custom implementation**: You can write your own custom solution using JavaScript's built-in functions and logic.

I hope this explanation helps!

Related benchmarks:

Classnames vs clsx with different api 2024 (version: 0)

Comparing performance of: classnames vs clsx (classnames api) vs clsx (objects) vs clsx (arguments) vs clsx (array)

Created: one year ago by: Guest

Jump to the latest result

classnames

clsx (classnames api)

clsx (objects)

clsx (arguments)

clsx (array)

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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