MaterialUI makeStyles callback

Benchmark created on

Preparation HTML

<script>
window.iterationCount = 0;
function makeStyles(callbackOrObject) {
	return () => {
	    if (typeof callbackOrObject === 'function') {
		    return callbackOrObject();
	    } else {
	    	return callbackOrObject;
	    }
	}
}

function createStyles(input) {
	return input
}
</script>

Teardown

window.iterationCount = 0;

Test runner

Ready to run.

Testing in
TestOps/sec
Un-needed callback
const currentIteration = window.iterationCount++;
const useStyles = makeStyles(_ =>
  createStyles({
    container: {
      padding: currentIteration,
      '&$disableMargin': {
        padding: 0,
      },
      '&$disableMarginBottom': {
        paddingBottom: 0,
      },
    },
    disableBorderBottomRadius: {},
    disableMargin: {},
    disableMarginBottom: {},
    disablePadding: {},
    backgroundAndElevation: {},
    element: {
      borderRadius: '8px',
      overflow: 'hidden',
      padding: 4,
      '&$backgroundAndElevation': {
        background: 'red',
      },
      '&$disablePadding': {
        padding: 0,
      },
      '&$disableBorderBottomRadius': {
        borderBottomLeftRadius: 0,
        borderBottomRightRadius: 0,
      },
    },
    fitContainerCommon: {
      height: '100%',
      width: '100%',
    },
    fitContainerContainer: {
      borderRadius: `8px 8px 0 0`,
    },
    scrollable: {
      overflowX: 'auto',
    },
  })
);
ready
Object style
const currentIteration = window.iterationCount++;
const useStyles = makeStyles(createStyles({
    container: {
      padding: currentIteration,
      '&$disableMargin': {
        padding: 0,
      },
      '&$disableMarginBottom': {
        paddingBottom: 0,
      },
    },
    disableBorderBottomRadius: {},
    disableMargin: {},
    disableMarginBottom: {},
    disablePadding: {},
    backgroundAndElevation: {},
    element: {
      borderRadius: '8px',
      overflow: 'hidden',
      padding: 4,
      '&$backgroundAndElevation': {
        background: 'red',
      },
      '&$disablePadding': {
        padding: 0,
      },
      '&$disableBorderBottomRadius': {
        borderBottomLeftRadius: 0,
        borderBottomRightRadius: 0,
      },
    },
    fitContainerCommon: {
      height: '100%',
      width: '100%',
    },
    fitContainerContainer: {
      borderRadius: `8px 8px 0 0`,
    },
    scrollable: {
      overflowX: 'auto',
    },
  })
);
ready

Revisions

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