React Performance question

[jdolinski1]

Hello,
is it safe to use this lib all over my React application consisting of like 500 UI components (that might eventually call twMerge on every render) without any performance issues? Are there any limits i should keep in mind? Or this lib has any sort of caching that is avoiding this.

Thanks.

[dcastil]

Hey @jdolinski1! 👋

TLDR: Yes, you can call twMerge during render of many components without expecting performance issues. I built tailwind-merge exactly for this use case. But you should only call it when you actually need it because extreme usage might cause issues.

Long version here 👇

I build tailwind-merge so you can use it like this within React components:

function MyInput({ className, someBool, someOtherBool, ...props }) {
    return (
        <input
            {...props}
            className={twMerge(
                '…',
                someBool && '…',
                someOtherBool ? '…' : '…',
                someGlobalBool && '…',
                className,
            )}
        />
    )
}

The merging mechanism within twMerge is quite fast, but there is still a lot going on, so it would be wasteful to run it on every render although none of the inputs to twMerge changed. Therefore twMerge has a built-in cache and stores the last 500 inputs and corresponding outputs by default (the amount can be configured).

This means that when MyInput gets re-rendered with props it was rendered with at least once before, twMerge only retrieves the cached result and returns it. This also works if twMere was called with the same inputs in a different component.

Note that with input I don't mean the exact amount and types of arguments to twMerge but the final string I get by concatenating all the truthy arguments together and putting a space between them. E.g. these calls all have the same input from the cache's perspective:

twMerge('1 2 3 4 5') // runs merging logic
twMerge('1 2', '3 4 5') // returns cached result
twMerge('1 2', false && 'nope', '3', null, '4 5', '') // returns cached result
twMerge('1 2', true ? '3' : 'nope', ['4', true && '5', false && '6']) // returns cached result

In the first production app I used tailwind-merge in, almost all design system components called twMerge during render, sometimes for multiple DOM nodes. On some initial page renders that resulted in hundreds of calls to twMerge during the first render. I did some basic benchmarking and found out that all those hundreds of twMerge calls on initial render (meaning no cached items, twMerge not initialized yet) resulted in less than 10ms compute time (which means no dropped frames at 60 FPS) with 6x CPU slowdown on my laptop back then. On a second render of the entire page (meaning all calls being cached) the time went to below 1ms (don't know how much below because of timer resolution). For me that meant that it's good enough, but shouldn't be over-used.

I think twMerge is performant enough to be used whenever you want to merge Tailwind classes with another unknown Tailwind class string (e.g. by getting it via props). But I wouldn't put it in a framework that calls it on every className prop of every DOM node without verifying that it will work at scale.

function MyComponent(props) {
    // ✅ This is fine
    return <div className={twMerge('…', props.className)} />
    
    // ❌ This is not necessary…
    return <div className={twMerge('h-2 bg-red-500', props.hasBlueBg && 'bg-blue-500')} />
    
    // ✅ …do this instead (in v1.7.0 and earlier, the function is called `join`)
    return <div className={twJoin('h-2', props.hasBlueBg ? 'bg-blue-500' : 'bg-red-500')} />
    
    // ❌ Please don't do this
    return <div className={twMerge('h-2 bg-red-500')} />
}

Hope this clears things up a little. Let me know if you want to go more into specifics somewhere. 😊

[jdolinski1]

🤯 Thanks!