What is the least performance impacting approach to wrapping lines in react className attr when using tailwind css?

What is the better way to break lines in the className attribute when using tailwind css?

Based on the examples below, which one will impact performance the least?

If I use an array with the classes and then use the array join method as in example B, will react call the join method on every render, or will the typescript transpile it to a static string as it doesn't contain any dynamic values?

Example A:

export function ExampleA() {
    return (
        <button className={
            'border border-solid border-[#00000026] ' +
            'px-5 py-3 rounded hover:bg-black/10 ' +
            'transition-colors duration-300 ease-out'
        }>
            Sample
        </button>
    );
}

Example B:

export function ExampleB() {
    return (
        <button className={[
            'border border-solid border-[#00000026]',
            'px-5 py-3 rounded hover:bg-black/10',
            'transition-colors duration-300 ease-out'
        ].join(' ')}>
            Sample
        </button>
    );
}

Example C:

import clsx from 'clsx';

export function ExampleC() {
    return (
        <button className={clsx(
            'border border-solid border-[#00000026]',
            'px-5 py-3 rounded hover:bg-black/10',
            'transition-colors duration-300 ease-out',
        )}>
            Sample
        </button>
    );
}

Ideally you want to let tailwind set the order, because they do matter.

It is an annoyance for sure to have a super long line. But not a big deal imo.

That said, I would go with C or A. A will default to a single string at compilation and clsx will do its thing as well.

But the B will always do a concat in an array, which is not big deal in general but should be definitely avoided not only cause it creates and array just to join it. but it also look terrible.

Well it is opiniated question, accroding to me the most efficient solution is probably to use an array containing the classes and then link them using the join() function (as in example B). This is due to the possibility that example A's string concatenation may result in pointless string allocations on each render, which may have an adverse effect on performance if the component is displayed frequently.

And the join() method will not be transpiled by TypeScript into a static string, in response to your query. Every render will use the join() function as the array is dynamic and subject to changes based on component props or state rather than being a static string.

Using a utility library, such as clsx (as in example C), can also be a performant option, since it handles merging several class names and gets rid of any duplication. This is similar to example B. Yet, the additional function call may result in some additional cost.

To summarize, most of the time, the performance impact of these various techniques will probably be insignificant. The selection of an approach that is simple to read and keep is more crucial.