lukeed/clsxPublic

A tiny (239B) utility for constructing `className` strings conditionally.

Performance question

LO

lokomass opened 路

Hi. Is it a good practice to use clsx even if I have only one conditionnaly class ?

Exemple

Insteaf of this :

``` const class = (condition) ? 'Myclass' : undefined <div className={class}/> ```

I prefer this approach:

``` <div className={clsx( { 'Myclass': condition } )}/> ```

But in term of performance, is there any impact ?

Thanks for replay

  1. DR
    drwpow(edited)

    > But in term of performance, is there any impact ?

    Technically-speaking, yes. The former has (virtually) no execution time. Whereas `clsx` does have some runtime cost. However, the code you provided runs at ~48M ops/s on my machine. So for all intents and purposes, it鈥檚 negligible perf-wise. If it provides clarity in the code even for one class, it鈥檚 worth it.

    And you have multiple classnames to evaluate, chances are `clsx()` will be faster than any custom code written.

  2. IV
    ivanabovin

    One more option - `clsx(condition && 'MyClass')`

  3. LU
    lukeed

    Thanks @drwpow; PS 馃憢 !!

  4. lukeedclosed2 years ago on GitHub

  5. drwpowmentioned2 years ago on GitHub

  6. drwpowsubscribed2 years ago on GitHub