Pure classnames VS helper (v3)

Revision 3 of this benchmark created on

Preparation HTML

<script src="
https://cdn.jsdelivr.net/npm/classnames@2.5.1/index.min.js
"></script>

Setup

function formatInterpolationClassName(baseClass) {
    return (classObj, customClass) => {
        const modifiers = Object.keys(classObj);
        const additionalClasses = modifiers.reduce((memo, mod) => ({
            ...memo,
            [`${baseClass}--${mod}`]: classObj[mod]
        }), {});

        return classNames(baseClass, customClass, additionalClasses);
    };
}

function formatConcatinationClassName(baseClass) {
    return (classObj, customClass) => {
        const modifiers = Object.keys(classObj);
        const additionalClasses = modifiers.reduce((memo, mod) => ({
            ...memo,
            [baseClass + '--' + mod]: classObj[mod]
        }), {});

        return classNames(baseClass, customClass, additionalClasses);
    };
}

function formatMutationClassName(baseClass) {
    return (classObj, customClass) => {
    	let additionalClasses = {};
    	for(const mod in classObj) {
    		additionalClasses[baseClass + '--' + mod] = classObj[mod];
    	}
        return classNames(baseClass, customClass, additionalClasses);
    };
}

const BASE_CLASS = 'base-class'
const formatInterpolation = formatInterpolationClassName(BASE_CLASS);
const formatConcatination = formatConcatinationClassName(BASE_CLASS);
const formatMutation = formatMutationClassName(BASE_CLASS);
const props = {error: true, inline: false}

Test runner

Ready to run.

Testing in
TestOps/sec
pure classnames
classNames(BASE_CLASS, {
	'base-class--error': props.error,
	'base-class--inline': props.inline
}, 'customClass')
ready
interpolation

classNames(BASE_CLASS, {
	[`${BASE_CLASS}--error`]: props.error,
	[`${BASE_CLASS}--inline`]: props.inline
}, 'customClass')
ready
concat
classNames(BASE_CLASS, {
	[BASE_CLASS + '--error']: props.error,
	[BASE_CLASS + '--inline']: props.inline
}, 'customClass')
ready
join
classNames(BASE_CLASS, {
	[[BASE_CLASS + 'error'].join('--')]: props.error,
	[[BASE_CLASS + 'inline'].join('--')]: props.inline
}, 'customClass')
ready
interpolation helper
formatInterpolation({...props}, 'customClass')
ready
concat heler
formatConcatination({...props}, 'customClass')
ready
mutation
formatMutation({...props}, 'customClass')
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.