Pure classnames VS helper

Benchmark created on

Preparation HTML

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

Setup

function formatClassName(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);
    };
}

const BASE_CLASS = 'base-class'
const format = formatClassName(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
helper
format(props, 'customClass')
ready
pure helper
format({...props}, 'customClass')
ready
interpolation
classNames(BASE_CLASS, {
	[`${BASE_CLASS}--error`]: props.error,
	[`${BASE_CLASS}--inline`]: props.inline
}, 'customClass')
ready

Revisions

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