Benchmark: Classnames vs clsx with different api

HTML Preparation code:

<script src="https://cdn.jsdelivr.net/npm/classnames@2.3.1/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clsx@1.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: 6 months 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	3059318.8 Ops/sec
clsx (classnames api)	4519157.0 Ops/sec
clsx (objects)	4569702.5 Ops/sec
clsx (arguments)	4985847.0 Ops/sec
clsx (array)	4564981.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided benchmark compares the performance of two JavaScript libraries, Classnames and clsx, in different use cases. The benchmark tests how fast each library can execute its API.

**Classnames and clsx Libraries**

*   **Classnames**: A lightweight utility library for class manipulation. It provides a simple way to conditionally apply classes to elements.
*   **clsx**: Another utility library that offers similar functionality to Classnames but with additional features like object notation support and a more extensive API.

**Options Compared in the Benchmark**

1.  **Classnames API (simple string-based)**: The most straightforward way to use Classnames, where you pass class names as strings.
2.  **clsx API (simple string-based)**: Similar to Classnames but uses a different notation for conditionally applying classes.
3.  **clsx Objects**: Uses object notation to specify the classes and their conditions.
4.  **clsx Arguments**: Takes advantage of the optional chaining operator (`?.`) in modern JavaScript to pass arguments as values that may or may not be present.

**Pros and Cons**

*   **Classnames API (simple string-based)**:
    *   Pros: Simple, widely supported by browsers.
    *   Cons: May be less efficient due to the overhead of parsing strings at runtime.
*   **clsx API (simple string-based)**:
    *   Pros: Similar performance characteristics to Classnames but with additional features like optional chaining.
    *   Cons: Requires support for modern JavaScript syntax, which might not be present in older browsers.
*   **clsx Objects**:
    *   Pros: Allows for more flexible and expressive configuration.
    *   Cons: May be less familiar to developers without prior experience with object notation.
*   **clsx Arguments**:
    *   Pros: Utilizes the optional chaining operator, which is a modern JavaScript feature, but doesn't require changes to existing codebases.
    *   Cons: Requires support for the optional chaining operator in browsers and may be less readable for developers unfamiliar with it.

**Other Considerations**

*   Performance differences are usually negligible unless running this benchmark on very large datasets or under high-performance conditions. 
*   Classnames has better browser coverage due to its simplicity, whereas clsx benefits from more modern JavaScript features.
*   The choice of library should be based on project requirements and the familiarity of the team with each library.

**Alternatives**

1.  **UglifyJS**: A popular JavaScript minifier that could potentially provide performance improvements by reducing runtime overhead associated with parsing and string operations in Classnames and clsx APIs. However, it requires manual configuration to achieve optimal results.
2.  Other libraries like Lodash or Ramda can also be considered for complex data manipulation tasks; however, they might introduce additional dependencies and may not offer performance benefits over Classnames and clsx.

For most use cases, choosing between Classnames and clsx would depend on familiarity with each library, the need for specific features, and potential compatibility issues.

Related benchmarks:

Classnames vs clsx with different api (version: 0)

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

Created: 3 years ago by: Guest

Jump to the latest result

classnames

clsx (classnames api)

clsx (objects)

clsx (arguments)

clsx (array)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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