Benchmark: Classnames vs CLSX vs custom implementation

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@1.2.1/dist/clsx.min.js'></script>

Script Preparation code:

var str = 'style';
var obj = {
    'style-2': true,
    'style-3': false,
    'style-4': true,
}
var arr = ['style-5', 'style-6']

const isArray = (value) => Array.isArray(value)
const isUndefined = (value) => typeof value === "undefined"
const isString = (value) => typeof value === "string"
const isNumber = (value) => !Number.isNaN(value) && typeof value === "number"
const isObject = (value) => !isArray(value) && value !== null && typeof value === "object"

function composeClass(...values) {
    if (!values.length) {
        return
    }

    const classNameStack = []

    for (const value of values) {
        switch (true) {
            case !value: {
                continue
            }
            case isString(value):
            case isNumber(value): {
                classNameStack.push(value)
                continue
            }
            case isArray(value) && value.length > 0: {
                const valueFromArray = Reflect.apply(composeClass, undefined, value)

                if (!isUndefined(valueFromArray)) {
                    classNameStack.push(valueFromArray)
                }
                continue
            }
            case isObject(value): {
                for (const key in value) {
                    if (value[key]) {
                        classNameStack.push(key)
                    }
                }
                continue
            }
        }
    }

    return classNameStack.length > 0 ? classNameStack.join(" ") : undefined
}

Tests:

classnames
let result = window.classNames(str, obj, arr, 'test classname')
clsx
let result = window.clsx(str, obj, arr, 'test classname')
custom implemenatation
let result = composeClass(str, obj, arr, 'test classname')

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
classnames
clsx
custom implemenatation

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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's being tested.

**Benchmark Purpose:**

The benchmark is designed to compare three approaches for generating class names:

1. `classnames`: A popular JavaScript library that takes an array of strings as input and returns a single string containing all the classes.
2. `clsx`: Another JavaScript library that provides a similar functionality, but with some differences in syntax and behavior compared to `classnames`.
3. Custom implementation: The benchmark also includes a custom implementation written by the author, which is used for comparison.

**Options being compared:**

The benchmark compares the performance of three approaches:

* `classnames`
* `clsx`
* Custom implementation

Each approach takes an array of strings (`arr`) and some string literals (`str` and `obj`) as input, and generates a class name by concatenating all the classes. The order of concatenation is determined by the library's logic.

**Pros and Cons:**

Here are some pros and cons for each approach:

* `classnames`:
	+ Pros: Highly optimized for performance, widely used, and well-maintained.
	+ Cons: May have additional dependencies or overhead due to its library nature.
* `clsx`:
	+ Pros: Provides more flexibility in syntax and behavior, may be easier to read and write for some developers.
	+ Cons: May have smaller community support compared to `classnames`, and some users might find the syntax unfamiliar.
* Custom implementation:
	+ Pros: Can be optimized specifically for the author's use case, avoids dependencies on external libraries.
	+ Cons: Requires more manual effort and maintenance, may not be as performant or maintainable as a well-tested library.

**Library explanation (if applicable):**

In this benchmark, two JavaScript libraries are used:

* `classnames`: A popular library developed by Kyle Mathews that provides a simple and efficient way to generate class names. It's widely used in the industry and has good community support.
* `clsx`: A library developed by Alex Strooper that offers more features and flexibility compared to `classnames`. While it's not as widely used, it still has a dedicated user base.

**Special JS feature or syntax:**

The benchmark uses some JavaScript features, such as:

* Arrow functions (`=>`)
* Rest parameters (`...`)

These features are supported by most modern JavaScript engines, but may not be compatible with older browsers or versions of Node.js.

Now that we've gone through the explanation, let's discuss other alternatives. There might be other libraries or approaches available for generating class names in JavaScript, such as:

* `lodashclassnames`: A version of `classnames` maintained by the Lodash library.
* `dom-calc`: Another approach to generate class names using a more declarative syntax.
* Other custom implementations written by individual developers.

Keep in mind that these alternatives might not be as widely used or optimized as the libraries mentioned earlier, but they can still provide good performance and functionality for specific use cases.

Related benchmarks:

Classnames vs CLSX vs custom implementation (version: 0)

Compare CLSX vs Classnames

Comparing performance of: classnames vs clsx vs custom implemenatation

Created: 3 years ago by: Guest

Jump to the latest result

classnames

clsx

custom implemenatation

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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