Benchmark: Stardust memoized

HTML Preparation code:

<script src='https://cdn.jsdelivr.net/npm/react@16.10.1/umd/react.production.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/react-dom@16.10.1/umd/react-dom.production.min.js'></script>

<script src='https://cdn.jsdelivr.net/npm/moize@5.4.4/dist/moize.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>

Script Preparation code:

const _documentRemSize = 16
const pxToRem = (valueInPx, baseRemSize) => {
  const remSize = baseRemSize || _documentRemSize || DEFAULT_REM_SIZE_IN_PX
  const convertedValueInRems = valueInPx / remSize

  return `${_.round(convertedValueInRems, 4)}rem`
}

var rawVariables = siteVars => ({
  padding: `0 ${pxToRem(20)}`,
  height: pxToRem(32),
  minWidth: pxToRem(96),
  loadingMinWidth: pxToRem(118),
  maxWidth: pxToRem(280),
  borderRadius: siteVars.borderRadius,

  contentFontSize: siteVars.fontSizes.medium,
  contentFontWeight: siteVars.fontWeightSemibold,
  contentLineHeight: siteVars.lineHeightMedium,

  color: siteVars.colors.grey[750],
  colorHover: siteVars.colors.grey[750],
  colorFocus: siteVars.colors.grey[750],
  colorDisabled: siteVars.colorScheme.brand.foregroundDisabled,
  backgroundColor: siteVars.colors.white,
  backgroundColorActive: siteVars.colors.grey[200],
  backgroundColorHover: siteVars.colors.grey[50],
  backgroundColorFocus: siteVars.colors.grey[200],
  backgroundColorDisabled: siteVars.colors.grey[150],
  borderColor: siteVars.colors.grey[200],
  borderColorHover: siteVars.colors.grey[250],
  borderColorDisabled: "transparent",

  primaryColor: siteVars.colors.white,
  primaryColorHover: siteVars.colors.white,
  primaryColorFocus: siteVars.colors.white,
  primaryBackgroundColor: siteVars.colors.brand[600],
  primaryBackgroundColorActive: siteVars.colors.brand[900],
  primaryBackgroundColorHover: siteVars.colors.brand[800],
  primaryBackgroundColorFocus: siteVars.colors.brand[800],
  primaryBorderColor: "transparent",

  circularBorderRadius: pxToRem(999),
  circularColor: siteVars.colors.grey[500],
  circularColorActive: siteVars.colors.white,
  circularBackgroundColor: "transparent",
  circularBackgroundColorActive: siteVars.colors.grey[500],
  circularBackgroundColorHover: siteVars.colors.grey[450],
  circularBackgroundColorFocus: siteVars.colors.grey[450],
  circularBorderColor: siteVars.colors.grey[500],
  circularBorderColorHover: "transparent",
  circularBorderColorFocus: "transparent",

  textColor: siteVars.colorScheme.default.foreground1,
  textColorHover: siteVars.colorScheme.brand.foreground1,
  textPrimaryColor: siteVars.colorScheme.brand.foreground,
  textPrimaryColorHover: siteVars.colorScheme.brand.foreground1,
  textColorDisabled: siteVars.colorScheme.brand.foregroundDisabled1,

  boxShadow: siteVars.shadowLevel1,

  loaderBorderSize: pxToRem(2),
  loaderSize: pxToRem(20),
  loaderSvgHeight: pxToRem(1220),
  loaderSvgAnimationHeight: pxToRem(-1200),

  sizeSmallContentFontSize: siteVars.fontSizes.small,
  sizeSmallContentLineHeight: siteVars.lineHeightSmall,
  sizeSmallHeight: pxToRem(24),
  sizeSmallMinWidth: pxToRem(72),
  sizeSmallPadding: `0 ${pxToRem(8)}`,
  sizeSmallLoaderBorderSize: pxToRem(2),
  sizeSmallLoaderSize: pxToRem(15),
  sizeSmallLoaderSvgHeight: pxToRem(895),
  sizeSmallLoaderSvgAnimationHeight: pxToRem(-880)
})
var memoVariables = moize.default(rawVariables);

var siteVariables = {
  colors: {
    brand: {
      "50": "#F4F4FC",
      "100": "#E5E5F1",
      "200": "#E2E2F6",
      "300": "#BDBDE6",
      "400": "#A6A7DC",
      "450": "#9EA2FF",
      "500": "#8B8CC7",
      "600": "#6264A7",
      "700": "#585A96",
      "800": "#464775",
      "900": "#33344A",
      "1000": "#373644"
    },
    grey: {
      "0": "#FFFFFF",
      "25": "#FCFCFB",
      "50": "#FAF9F8",
      "100": "#F3F2F1",
      "150": "#EDEBE9",
      "200": "#E1DFDD",
      "250": "#C8C6C4",
      "300": "#B3B0AD",
      "350": "#979593",
      "400": "#8A8886",
      "450": "#605E5C",
      "500": "#484644",
      "550": "#3B3A39",
      "600": "#323131",
      "650": "#2D2C2C",
      "700": "#292828",
      "750": "#252423",
      "800": "#201F1F",
      "850": "#1B1A1A",
      "900": "#11100F",
      "1000": "#000000"
    },
    orange: {
      "50": "#F9ECEA",
      "100": "#EFDBD3",
      "200": "#EDC2A7",
      "300": "#E97548",
      "400": "#CC4A31",
      "500": "#BD432C",
      "600": "#A33D2A",
      "700": "#833122",
      "800": "#664134",
      "900": "#51332C"
    },
    pink: {
      "50": "#FCF2FA",
      "100": "#F1DFEE",
      "200": "#EC6FAE",
      "300": "#DE569A",
      "400": "#E959D9",
      "500": "#B4009E",
      "600": "#943670",
      "800": "#3E2D3B",
      "900": "#1F191D"
    },
    red: {
      "50": "#FCF4F6",
      "100": "#F3D6D8",
      "200": "#F9526B",
      "300": "#E73550",
      "400": "#C4314B",
      "500": "#A72037",
      "600": "#8E192E",
      "700": "#4F222B",
      "800": "#3E1F25",
      "900": "#1E040A"
    },
    green: {
      "200": "#92C353",
      "300": "#6BB700",
      "400": "#13A40E",
      "600": "#237B4B"
    },
    yellow: {
      "100": "#FBF6D9",
      "300": "#F9EC02",
      "400": "#F8D22A",
      "500": "#FFB900",
      "600": "#FFAA44"
    },
    black: "#000",
    white: "#fff",
    silver: {
      "200": "rgba(255,255,255,0.75)",
      "300": "rgba(255,255,255,0.65)",
      "400": "rgba(255,255,255,0.5)",
      "600": "rgba(255,255,255,0.3)",
      "700": "rgba(255,255,255,0.2)",
      "800": "rgba(255,255,255,0.1)",
      "900": "rgba(255,255,255,0.05)"
    },
    ruby: {
      "500": "rgba(196,49,75,0.9)",
      "600": "rgba(167,32,55,0.9)",
      "700": "rgba(142,25,46,0.9)"
    },
    onyx: {
      "100": "rgba(59,58,57,0.9)",
      "200": "rgba(45,44,44,0.4)",
      "500": "rgba(41,40,40,0.9)",
      "700": "rgba(0,0,0,0.5)",
      "800": "rgba(27,26,26,0.9)",
      "900": "rgba(0,0,0,0.8)"
    },
    amethyst: {
      "400": "rgba(98,100,167,0.75)",
      "500": "rgba(51,52,74,0.5)",
      "600": "rgba(70,71,117,0.4)",
      "700": "rgba(98,100,167,0.15)"
    }
  },
  contextualColors: {
    brand: {
      "50": "#F4F4FC",
      "100": "#E5E5F1",
      "200": "#E2E2F6",
      "300": "#BDBDE6",
      "400": "#A6A7DC",
      "450": "#9EA2FF",
      "500": "#8B8CC7",
      "600": "#6264A7",
      "700": "#585A96",
      "800": "#464775",
      "900": "#33344A",
      "1000": "#373644"
    }
  },
  naturalColors: {
    grey: {
      "0": "#FFFFFF",
      "25": "#FCFCFB",
      "50": "#FAF9F8",
      "100": "#F3F2F1",
      "150": "#EDEBE9",
      "200": "#E1DFDD",
      "250": "#C8C6C4",
      "300": "#B3B0AD",
      "350": "#979593",
      "400": "#8A8886",
      "450": "#605E5C",
      "500": "#484644",
      "550": "#3B3A39",
      "600": "#323131",
      "650": "#2D2C2C",
      "700": "#292828",
      "750": "#252423",
      "800": "#201F1F",
      "850": "#1B1A1A",
      "900": "#11100F",
      "1000": "#000000"
    },
    orange: {
      "50": "#F9ECEA",
      "100": "#EFDBD3",
      "200": "#EDC2A7",
      "300": "#E97548",
      "400": "#CC4A31",
      "500": "#BD432C",
      "600": "#A33D2A",
      "700": "#833122",
      "800": "#664134",
      "900": "#51332C"
    },
    pink: {
      "50": "#FCF2FA",
      "100": "#F1DFEE",
      "200": "#EC6FAE",
      "300": "#DE569A",
      "400": "#E959D9",
      "500": "#B4009E",
      "600": "#943670",
      "800": "#3E2D3B",
      "900": "#1F191D"
    },
    red: {
      "50": "#FCF4F6",
      "100": "#F3D6D8",
      "200": "#F9526B",
      "300": "#E73550",
      "400": "#C4314B",
      "500": "#A72037",
      "600": "#8E192E",
      "700": "#4F222B",
      "800": "#3E1F25",
      "900": "#1E040A"
    },
    green: {
      "200": "#92C353",
      "300": "#6BB700",
      "400": "#13A40E",
      "600": "#237B4B"
    },
    yellow: {
      "100": "#FBF6D9",
      "300": "#F9EC02",
      "400": "#F8D22A",
      "500": "#FFB900",
      "600": "#FFAA44"
    }
  },
  primitiveColors: { black: "#000", white: "#fff" },
  colorScheme: {
    default: {
      foreground: "#252423",
      background: "#fff",
      border: "#E1DFDD",
      shadow: "#000",
      foregroundHover: "#252423",
      backgroundHover: "#F3F2F1",
      borderHover: "#C8C6C4",
      shadowHover: "#000",
      foregroundActive: "#252423",
      backgroundActive: "#F3F2F1",
      borderActive: "#E1DFDD",
      foregroundFocus: "#252423",
      backgroundFocus: "#fff",
      borderFocus: "#000",
      foregroundPressed: "#252423",
      backgroundPressed: "#E1DFDD",
      borderPressed: "#C8C6C4",
      foregroundDisabled: "#C8C6C4",
      backgroundDisabled: "#EDEBE9",
      borderDisabled: "#EDEBE9",
      foreground1: "#484644",
      foreground2: "#605E5C",
      foreground3: "#fff",
      foreground4: "#fff",
      background1: "#FAF9F8",
      background2: "#F3F2F1",
      background3: "#EDEBE9",
      background4: "#F3F2F1",
      border1: "#EDEBE9",
      border2: "#E1DFDD",
      border3: "#EDEBE9",
      foregroundHover1: "#fff",
      backgroundHover1: "#EDEBE9",
      foregroundActive1: "#fff",
      backgroundActive1: "#EDEBE9",
      borderActive1: "#EDEBE9",
      borderActive2: "#E1DFDD",
      borderActive3: "#EDEBE9",
      foregroundFocus1: "#484644",
      foregroundFocus2: "#605E5C",
      foregroundFocus3: "#fff",
      backgroundFocus1: "#FAF9F8",
      backgroundFocus2: "#F3F2F1",
      backgroundFocus3: "#EDEBE9",
      borderFocusWithin: "#fff",
      foregroundDisabled1: "#C8C6C4",
      backgroundDisabled1: "#EDEBE9"
    },
    brand: {
      foreground: "#6264A7",
      background: "#6264A7",
      border: "#E1DFDD",
      shadow: "#000",
      foregroundHover: "#6264A7",
      backgroundHover: "#585A96",
      borderHover: "#BDBDE6",
      shadowHover: "#000",
      foregroundActive: "#6264A7",
      backgroundActive: "#6264A7",
      borderActive: "#E1DFDD",
      foregroundFocus: "#6264A7",
      backgroundFocus: "#6264A7",
      borderFocus: "#000",
      foregroundPressed: "#464775",
      backgroundPressed: "#464775",
      borderPressed: "#BDBDE6",
      foregroundDisabled: "#C8C6C4",
      backgroundDisabled: "#EDEBE9",
      borderDisabled: "#EDEBE9",
      foreground1: "#6264A7",
      foreground2: "#585A96",
      foreground3: "#E2E2F6",
      foreground4: "#fff",
      background1: "#E5E5F1",
      background2: "#33344A",
      background3: "#373644",
      background4: "#464775",
      border1: "#E2E2F6",
      border2: "#BDBDE6",
      foregroundHover1: "#fff",
      foregroundHover2: "#E2E2F6",
      backgroundHover1: "#F4F4FC",
      foregroundPressed1: "#fff",
      foregroundActive1: "#6264A7",
      foregroundActive2: "#E2E2F6",
      backgroundActive1: "#6264A7",
      borderActive1: "#E2E2F6",
      borderActive2: "#BDBDE6",
      foregroundFocus1: "#6264A7",
      foregroundFocus2: "#585A96",
      foregroundFocus3: "#E2E2F6",
      foregroundFocus4: "#fff",
      backgroundFocus1: "#E5E5F1",
      backgroundFocus2: "#33344A",
      backgroundFocus3: "#373644",
      borderFocusWithin: "#fff",
      borderFocus1: "#6264A7",
      foregroundDisabled1: "#C8C6C4",
      backgroundDisabled1: "#EDEBE9"
    },
    black: {
      foreground: "#000",
      background: "#fff",
      border: "#000",
      shadow: "#000",
      foregroundHover: "#fff",
      backgroundHover: "#000",
      borderHover: "#000",
      shadowHover: "#000",
      foregroundActive: "#fff",
      backgroundActive: "#000",
      borderActive: "#000",
      shadowActive: "#000",
      foregroundFocus: "#fff",
      backgroundFocus: "#000",
      borderFocus: "#000",
      shadowFocus: "#000",
      foregroundPressed: "#fff",
      backgroundPressed: "#000",
      borderPressed: "#000",
      shadowPressed: "#000",
      foregroundDisabled: "#fff",
      backgroundDisabled: "#000",
      borderDisabled: "#000",
      shadowDisabled: "#000"
    },
    white: {
      foreground: "#fff",
      background: "#000",
      border: "#fff",
      shadow: "#fff",
      foregroundHover: "#000",
      backgroundHover: "#fff",
      borderHover: "#fff",
      shadowHover: "#fff",
      foregroundActive: "#000",
      backgroundActive: "#fff",
      borderActive: "#fff",
      shadowActive: "#fff",
      foregroundFocus: "#000",
      backgroundFocus: "#fff",
      borderFocus: "#fff",
      shadowFocus: "#fff",
      foregroundPressed: "#000",
      backgroundPressed: "#fff",
      borderPressed: "#fff",
      shadowPressed: "#fff",
      foregroundDisabled: "#000",
      backgroundDisabled: "#fff",
      borderDisabled: "#fff",
      shadowDisabled: "#fff"
    },
    green: {
      foreground: "#237B4B",
      background: "#6BB700",
      foreground1: "#fff",
      foreground2: "#13A40E"
    },
    orange: {
      foreground: "#CC4A31",
      background: "#CC4A31",
      border: "#EDC2A7",
      foreground1: "#E97548"
    },
    pink: {
      foreground: "#943670",
      background: "#FCF2FA",
      border: "#F1DFEE",
      foreground1: "#B4009E"
    },
    red: {
      foreground: "#C4314B",
      background: "#C4314B",
      border: "#F3D6D8",
      foregroundHover: "#fff",
      backgroundHover: "rgba(167,32,55,0.9)",
      foregroundPressed: "#fff",
      backgroundPressed: "rgba(142,25,46,0.9)",
      foreground1: "#fff",
      foreground2: "#fff",
      background1: "#FCF4F6",
      background2: "rgba(196,49,75,0.9)",
      background3: "#C4314B"
    },
    yellow: {
      foreground: "#F9EC02",
      background: "#FFAA44",
      foreground1: "#201F1F",
      foreground2: "#fff",
      background1: "#FBF6D9",
      background2: "#FFB900"
    },
    silver: {
      foreground: "#fff",
      border: "rgba(255,255,255,0.3)",
      backgroundHover: "rgba(255,255,255,0.1)",
      borderHover: "rgba(255,255,255,0.3)",
      backgroundPressed: "rgba(255,255,255,0.2)",
      borderPressed: "rgba(255,255,255,0.3)",
      foregroundDisabled: "rgba(255,255,255,0.3)",
      backgroundDisabled: "rgba(255,255,255,0.05)",
      foreground1: "rgba(255,255,255,0.75)"
    },
    onyx: {
      background: "rgba(41,40,40,0.9)",
      border: "rgba(27,26,26,0.9)",
      background1: "rgba(59,58,57,0.9)",
      background2: "rgba(41,40,40,0.9)",
      border1: "transparent"
    },
    amethyst: {
      background: "rgba(70,71,117,0.4)",
      backgroundHover: "rgba(98,100,167,0.15)",
      backgroundActive: "rgba(98,100,167,0.15)",
      backgroundHover1: "rgba(51,52,74,0.5)"
    },
    grey: {
      foreground: "#252423",
      background: "#fff",
      border: "#E1DFDD",
      shadow: "#000",
      foregroundHover: "#252423",
      backgroundHover: "#F3F2F1",
      borderHover: "#C8C6C4",
      shadowHover: "#000",
      foregroundActive: "#252423",
      backgroundActive: "#F3F2F1",
      borderActive: "#E1DFDD",
      foregroundFocus: "#252423",
      backgroundFocus: "#fff",
      borderFocus: "#000",
      foregroundPressed: "#252423",
      backgroundPressed: "#E1DFDD",
      borderPressed: "#C8C6C4",
      foregroundDisabled: "#C8C6C4",
      backgroundDisabled: "#EDEBE9",
      borderDisabled: "#EDEBE9",
      foreground1: "#484644",
      foreground2: "#605E5C",
      foreground3: "#fff",
      foreground4: "#fff",
      background1: "#FAF9F8",
      background2: "#F3F2F1",
      background3: "#EDEBE9",
      background4: "#F3F2F1",
      border1: "#EDEBE9",
      border2: "#E1DFDD",
      border3: "#EDEBE9",
      foregroundHover1: "#fff",
      backgroundHover1: "#EDEBE9",
      foregroundActive1: "#fff",
      backgroundActive1: "#EDEBE9",
      borderActive1: "#EDEBE9",
      borderActive2: "#E1DFDD",
      borderActive3: "#EDEBE9",
      foregroundFocus1: "#484644",
      foregroundFocus2: "#605E5C",
      foregroundFocus3: "#fff",
      backgroundFocus1: "#FAF9F8",
      backgroundFocus2: "#F3F2F1",
      backgroundFocus3: "#EDEBE9",
      borderFocusWithin: "#fff",
      foregroundDisabled1: "#C8C6C4",
      backgroundDisabled1: "#EDEBE9"
    }
  },
  transparentColors: {
    silver: {
      "200": "rgba(255,255,255,0.75)",
      "300": "rgba(255,255,255,0.65)",
      "400": "rgba(255,255,255,0.5)",
      "600": "rgba(255,255,255,0.3)",
      "700": "rgba(255,255,255,0.2)",
      "800": "rgba(255,255,255,0.1)",
      "900": "rgba(255,255,255,0.05)"
    },
    ruby: {
      "500": "rgba(196,49,75,0.9)",
      "600": "rgba(167,32,55,0.9)",
      "700": "rgba(142,25,46,0.9)"
    },
    onyx: {
      "100": "rgba(59,58,57,0.9)",
      "200": "rgba(45,44,44,0.4)",
      "500": "rgba(41,40,40,0.9)",
      "700": "rgba(0,0,0,0.5)",
      "800": "rgba(27,26,26,0.9)",
      "900": "rgba(0,0,0,0.8)"
    },
    amethyst: {
      "400": "rgba(98,100,167,0.75)",
      "500": "rgba(51,52,74,0.5)",
      "600": "rgba(70,71,117,0.4)",
      "700": "rgba(98,100,167,0.15)"
    }
  },
  categoryColors: {
    redDark: {
      "100": "#FAF6F6",
      "150": "#F2E4E5",
      "200": "#E7CED1",
      "250": "#CF9BA1",
      "300": "#C07B82",
      "350": "#C98289",
      "400": "#A23D48",
      "450": "#A03843",
      "500": "#96232F",
      "550": "#88232E",
      "600": "#861F2A",
      "650": "#721A23",
      "700": "#69232A",
      "750": "#521319",
      "800": "#4D2327",
      "850": "#3D2326",
      "900": "#292424"
    },
    red: {
      "100": "#FCF7F8",
      "150": "#F8E8EA",
      "200": "#F3D7D9",
      "250": "#E7ADB2",
      "300": "#DF9299",
      "350": "#DC8990",
      "400": "#D06069",
      "450": "#CF5B65",
      "500": "#CA4A55",
      "550": "#B6454F",
      "600": "#B6424C",
      "650": "#993840",
      "700": "#883B42",
      "750": "#6E282E",
      "800": "#603135",
      "850": "#492C2E",
      "900": "#2A2425"
    },
    orangeDark: {
      "100": "#FCF7F6",
      "150": "#F8E8E4",
      "200": "#F2D5CD",
      "250": "#E5AA99",
      "300": "#DD8E77",
      "350": "#DA846B",
      "400": "#CD5937",
      "450": "#CC5634",
      "500": "#C7431D",
      "550": "#B33F1E",
      "600": "#B23C1A",
      "650": "#973216",
      "700": "#85361F",
      "750": "#6D240F",
      "800": "#5E2F21",
      "850": "#482A22",
      "900": "#2B2423"
    },
    orange: {
      "100": "#FEF9F7",
      "150": "#FCECE9",
      "200": "#FBDED7",
      "250": "#F7BBAD",
      "300": "#F4A593",
      "350": "#F39D89",
      "400": "#F07A60",
      "450": "#EF785D",
      "500": "#EE694B",
      "550": "#D66046",
      "600": "#D65E43",
      "650": "#B24932",
      "700": "#9C4D3B",
      "750": "#823929",
      "800": "#6D3C32",
      "850": "#51332C",
      "900": "#2D2725"
    },
    orangeLight: {
      "100": "#FEFBF7",
      "150": "#FEF3E8",
      "200": "#FDEAD4",
      "250": "#FCD4A8",
      "300": "#FCC68B",
      "350": "#FBC181",
      "400": "#FAAB54",
      "450": "#FAA950",
      "500": "#FAA03E",
      "550": "#E0903A",
      "600": "#E08F37",
      "650": "#A45D11",
      "700": "#A56F34",
      "750": "#895722",
      "800": "#72502D",
      "850": "#533F29",
      "900": "#2D2925"
    },
    yellowDark: {
      "100": "#FDFBF6",
      "150": "#FBF3E4",
      "200": "#F8EACD",
      "250": "#F1D499",
      "300": "#EDC678",
      "350": "#ECC26E",
      "400": "#E5AC39",
      "450": "#E4AA35",
      "500": "#E2A11F",
      "550": "#CA911F",
      "600": "#CA901B",
      "650": "#92660D",
      "700": "#966E20",
      "750": "#7C5811",
      "800": "#685022",
      "850": "#4E3F22",
      "900": "#2C2924"
    },
    yellow: {
      "100": "#FEFCF5",
      "150": "#FEF6E2",
      "200": "#FEEFCB",
      "250": "#FEDF95",
      "300": "#FDD472",
      "350": "#FDD066",
      "400": "#FDC030",
      "450": "#FDBF2B",
      "500": "#FDB814",
      "550": "#E3A615",
      "600": "#E4A512",
      "650": "#8F680D",
      "700": "#A67D1B",
      "750": "#805E0B",
      "800": "#72581E",
      "850": "#544420",
      "900": "#2D2922"
    },
    brown: {
      "100": "#FBF9F8",
      "150": "#F3EDEA",
      "200": "#E9DDD8",
      "250": "#D3BBAF",
      "300": "#C4A494",
      "350": "#BF9D8C",
      "400": "#A87A63",
      "450": "#A67760",
      "500": "#9D684E",
      "550": "#8E6049",
      "600": "#8C5D46",
      "650": "#764E3B",
      "700": "#6D4C3C",
      "750": "#56392B",
      "800": "#503C33",
      "850": "#3F322D",
      "900": "#292625"
    },
    oliveDark: {
      "100": "#F8F9F7",
      "150": "#EBEEE7",
      "200": "#DBE1D5",
      "250": "#B7C2AA",
      "300": "#9EAD8D",
      "350": "#96A683",
      "400": "#708757",
      "450": "#6D8453",
      "500": "#5E7741",
      "550": "#566C3D",
      "600": "#546B3A",
      "650": "#475A31",
      "700": "#465535",
      "750": "#334123",
      "800": "#38412E",
      "850": "#31362A",
      "900": "#272724"
    },
    olive: {
      "100": "#FAFBF8",
      "150": "#F1F5EC",
      "200": "#E6EDDC",
      "250": "#CCDBB8",
      "300": "#BBD0A1",
      "350": "#B5CC99",
      "400": "#9BBA75",
      "450": "#99B872",
      "500": "#8EB163",
      "550": "#809F5A",
      "600": "#7F9E58",
      "650": "#56742F",
      "700": "#637849",
      "750": "#4E6136",
      "800": "#4B563A",
      "850": "#3C4231",
      "900": "#292926"
    },
    greenDark: {
      "100": "#F5F9F7",
      "150": "#E5EFE9",
      "200": "#CFE1D7",
      "250": "#9EC3AE",
      "300": "#7DAE93",
      "350": "#72A78A",
      "400": "#408861",
      "450": "#3C865D",
      "500": "#27794C",
      "550": "#266E46",
      "600": "#236D44",
      "650": "#1D5C39",
      "700": "#26563B",
      "750": "#154229",
      "800": "#254232",
      "850": "#25362C",
      "900": "#252725"
    },
    green: {
      "100": "#F6FBF9",
      "150": "#E5F5ED",
      "200": "#D1ECDF",
      "250": "#A1DABD",
      "300": "#82CDA8",
      "350": "#78C9A0",
      "400": "#48B67F",
      "450": "#45B57C",
      "500": "#30AD6E",
      "550": "#2F9B64",
      "600": "#2B9B62",
      "650": "#248353",
      "700": "#2B7550",
      "750": "#1A5E3C",
      "800": "#29553E",
      "850": "#274134",
      "900": "#242826"
    },
    tealDark: {
      "100": "#F6F8F9",
      "150": "#E5EBED",
      "200": "#CEDADD",
      "250": "#9BB4BA",
      "300": "#7B9CA3",
      "350": "#7FA3AB",
      "400": "#3D6E79",
      "450": "#386A75",
      "500": "#235A67",
      "550": "#23535E",
      "600": "#1F515C",
      "650": "#1A444E",
      "700": "#24454C",
      "750": "#133138",
      "800": "#23373C",
      "850": "#243033",
      "900": "#252627"
    },
    teal: {
      "100": "#F6F9FA",
      "150": "#E9F0F2",
      "200": "#D6E3E7",
      "250": "#ABC6CE",
      "300": "#8FB3BE",
      "350": "#85ACB8",
      "400": "#5A8F9F",
      "450": "#578D9E",
      "500": "#458193",
      "550": "#417686",
      "600": "#3E7484",
      "650": "#34626F",
      "700": "#375B66",
      "750": "#254650",
      "800": "#2F454C",
      "850": "#2C383C",
      "900": "#262828"
    },
    tealLight: {
      "100": "#F8FCFC",
      "150": "#EBF7F7",
      "200": "#DBF1F1",
      "250": "#B5E3E3",
      "300": "#9DD9DB",
      "350": "#96D6D8",
      "400": "#70C8CA",
      "450": "#6DC7C9",
      "500": "#5DC1C3",
      "550": "#55ADAF",
      "600": "#53AEAF",
      "650": "#37797B",
      "700": "#468183",
      "750": "#33696B",
      "800": "#395B5C",
      "850": "#314646",
      "900": "#272A2A"
    },
    blueDark: {
      "100": "#F5F7FA",
      "150": "#E0E7F2",
      "200": "#C7D4E8",
      "250": "#8CA7D0",
      "300": "#668AC0",
      "350": "#6991CC",
      "400": "#1E53A3",
      "450": "#1A50A1",
      "500": "#003D97",
      "550": "#053988",
      "600": "#003788",
      "650": "#002E72",
      "700": "#0F3268",
      "750": "#002152",
      "800": "#182D4D",
      "850": "#1D293D",
      "900": "#242528"
    },
    blue: {
      "100": "#F6F8FB",
      "150": "#E3EAF3",
      "200": "#CDDAEA",
      "250": "#99B3D4",
      "300": "#779AC6",
      "350": "#7FA3D0",
      "400": "#376BAB",
      "450": "#3469A9",
      "500": "#1D58A0",
      "550": "#1D5190",
      "600": "#1A4F90",
      "650": "#164279",
      "700": "#20426E",
      "750": "#0F3057",
      "800": "#213650",
      "850": "#232F3F",
      "900": "#252629"
    },
    purpleDark: {
      "100": "#F7F6FA",
      "150": "#E8E7F2",
      "200": "#D6D4E8",
      "250": "#ADA8D1",
      "300": "#918AC2",
      "350": "#928BC5",
      "400": "#5D53A5",
      "450": "#5A50A4",
      "500": "#483D9A",
      "550": "#443A8C",
      "600": "#40368A",
      "650": "#362E75",
      "700": "#3A336B",
      "750": "#272154",
      "800": "#312D4E",
      "850": "#2C293D",
      "900": "#262529"
    },
    purple: {
      "100": "#F9F9FB",
      "150": "#EFEDF5",
      "200": "#E2DEED",
      "250": "#C3BDDC",
      "300": "#AFA6D0",
      "350": "#A99FCC",
      "400": "#8B7DBA",
      "450": "#877AB8",
      "500": "#7B6CB1",
      "550": "#70629F",
      "600": "#6E609E",
      "650": "#5D5286",
      "700": "#584E78",
      "750": "#443B61",
      "800": "#443D56",
      "850": "#383342",
      "900": "#282729"
    },
    maroon: {
      "100": "#FBF7F9",
      "150": "#F4E6EE",
      "200": "#EBD3E1",
      "250": "#D6A5C3",
      "300": "#C988AF",
      "350": "#CC87B1",
      "400": "#AF5089",
      "450": "#AD4C87",
      "500": "#A5397A",
      "550": "#953770",
      "600": "#94336D",
      "650": "#7D2B5C",
      "700": "#723057",
      "750": "#5A1F42",
      "800": "#522B42",
      "850": "#412836",
      "900": "#2A2527"
    },
    pink: {
      "100": "#FDF7F9",
      "150": "#FAE7EE",
      "200": "#F5D3DF",
      "250": "#ECA4BE",
      "300": "#E687A8",
      "350": "#E47CA1",
      "400": "#DA4E7F",
      "450": "#DA4A7D",
      "500": "#D6376F",
      "550": "#C03465",
      "600": "#C13164",
      "650": "#A22954",
      "700": "#8F2F50",
      "750": "#751E3C",
      "800": "#642A3E",
      "850": "#4B2834",
      "900": "#2B2426"
    },
    smokeDark: {
      "100": "#F6F6F6",
      "150": "#E8E8E8",
      "200": "#D5D5D5",
      "250": "#AAAAAA",
      "300": "#8E8E8E",
      "350": "#939393",
      "400": "#5A5A5A",
      "450": "#565656",
      "500": "#444444",
      "550": "#404040",
      "600": "#3D3D3D",
      "650": "#333333",
      "700": "#373737",
      "750": "#252525",
      "800": "#2B2A2A",
      "850": "#282828",
      "900": "#262525"
    },
    smokeLight: {
      "100": "#F9F9F9",
      "150": "#EDEDED",
      "200": "#DFDFDF",
      "250": "#BEBEBE",
      "300": "#A9A9A9",
      "350": "#A1A1A1",
      "400": "#818181",
      "450": "#7E7E7E",
      "500": "#707070",
      "550": "#676767",
      "600": "#646464",
      "650": "#555555",
      "700": "#525151",
      "750": "#3D3D3D",
      "800": "#353434",
      "850": "#2E2D2D",
      "900": "#272626"
    },
    steelDark: {
      "100": "#F8F9F9",
      "150": "#ECEEEF",
      "200": "#DDE1E2",
      "250": "#BBC2C4",
      "300": "#A5AEB1",
      "350": "#9DA7AB",
      "400": "#7B898D",
      "450": "#78868B",
      "500": "#69797E",
      "550": "#606E73",
      "600": "#5E6D71",
      "650": "#4F5B5F",
      "700": "#4E5659",
      "750": "#394245",
      "800": "#3D4244",
      "850": "#343637",
      "900": "#272727"
    },
    steelLight: {
      "100": "#FBFBFB",
      "150": "#F3F3F5",
      "200": "#EAEDEE",
      "250": "#D4DADC",
      "300": "#C7C6D0",
      "350": "#C1CACC",
      "400": "#ACABBB",
      "450": "#A9B5B9",
      "500": "#A2A0B2",
      "550": "#919DA1",
      "600": "#8F9C9F",
      "650": "#637074",
      "700": "#6F7678",
      "750": "#585761",
      "800": "#515556",
      "850": "#404243",
      "900": "#292828"
    }
  },
  categoryColorScheme: {
    redDark: {
      foreground: "#521319",
      foreground1: "#A23D48",
      background: "#E7CED1"
    },
    red: {
      foreground: "#6E282E",
      foreground1: "#D06069",
      background: "#F3D7D9"
    },
    orangeDark: {
      foreground: "#6D240F",
      foreground1: "#CD5937",
      background: "#F2D5CD"
    },
    orange: {
      foreground: "#823929",
      foreground1: "#F07A60",
      background: "#FBDED7"
    },
    orangeLight: {
      foreground: "#895722",
      foreground1: "#FAAB54",
      background: "#FDEAD4"
    },
    yellowDark: {
      foreground: "#7C5811",
      foreground1: "#E5AC39",
      background: "#F8EACD"
    },
    yellow: {
      foreground: "#805E0B",
      foreground1: "#FDC030",
      background: "#FEEFCB"
    },
    brown: {
      foreground: "#56392B",
      foreground1: "#A87A63",
      background: "#E9DDD8"
    },
    oliveDark: {
      foreground: "#334123",
      foreground1: "#708757",
      background: "#DBE1D5"
    },
    olive: {
      foreground: "#4E6136",
      foreground1: "#9BBA75",
      background: "#E6EDDC"
    },
    greenDark: {
      foreground: "#154229",
      foreground1: "#408861",
      background: "#CFE1D7"
    },
    green: {
      foreground: "#1A5E3C",
      foreground1: "#48B67F",
      background: "#D1ECDF"
    },
    tealDark: {
      foreground: "#133138",
      foreground1: "#3D6E79",
      background: "#CEDADD"
    },
    teal: {
      foreground: "#254650",
      foreground1: "#5A8F9F",
      background: "#D6E3E7"
    },
    tealLight: {
      foreground: "#33696B",
      foreground1: "#70C8CA",
      background: "#DBF1F1"
    },
    blueDark: {
      foreground: "#002152",
      foreground1: "#1E53A3",
      background: "#C7D4E8"
    },
    blue: {
      foreground: "#0F3057",
      foreground1: "#376BAB",
      background: "#CDDAEA"
    },
    purpleDark: {
      foreground: "#272154",
      foreground1: "#5D53A5",
      background: "#D6D4E8"
    },
    purple: {
      foreground: "#443B61",
      foreground1: "#8B7DBA",
      background: "#E2DEED"
    },
    maroon: {
      foreground: "#5A1F42",
      foreground1: "#AF5089",
      background: "#EBD3E1"
    },
    pink: {
      foreground: "#751E3C",
      foreground1: "#DA4E7F",
      background: "#F5D3DF"
    },
    smokeDark: {
      foreground: "#252525",
      foreground1: "#5A5A5A",
      background: "#D5D5D5"
    },
    smokeLight: {
      foreground: "#3D3D3D",
      foreground1: "#818181",
      background: "#DFDFDF"
    },
    steelDark: {
      foreground: "#394245",
      foreground1: "#7B898D",
      background: "#DDE1E2"
    },
    steelLight: {
      foreground: "#585761",
      foreground1: "#ACABBB",
      background: "#EAEDEE"
    }
  },
  borderWidth: "1px",
  borderRadius: "2px",
  focusInnerBorderColor: "#fff",
  focusOuterBorderColor: "#000",
  shadowLevel1: "0 .2rem .4rem -.075rem rgba(0, 0, 0, .1)",
  shadowLevel2: "0 .4rem .7rem -.1rem rgba(0, 0, 0, .1)",
  shadowLevel3: "0 .8rem 1rem -.2rem rgba(0, 0, 0, .1)",
  shadowLevel4: "0 1.6rem 1.8rem -.4rem rgba(0, 0, 0, .1)",
  shadowLevel1Dark: "0 .2rem .4rem -.075rem rgba(0, 0, 0, .25)",
  shadowLevel1Darker: "0 .2rem .4rem -.075rem rgba(0, 0, 0, .5)",
  fontSizes: {
    smaller: "0.625rem",
    small: "0.75rem",
    medium: "0.875rem",
    large: "1.125rem",
    larger: "1.5rem"
  },
  fontWeightLight: 200,
  fontWeightSemilight: 300,
  fontWeightRegular: 400,
  fontWeightSemibold: 600,
  fontWeightBold: 700,
  lineHeightSmaller: 1.2,
  lineHeightSmall: 1.3333,
  lineHeightMedium: 1.4286,
  lineHeightLarge: 1.3333,
  lineHeightLarger: 1.3333,
  bodyPadding: 0,
  bodyMargin: 0,
  bodyFontFamily:
    '"Segoe UI", "Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji", Helvetica, Arial, sans-serif',
  bodyFontSize: "0.875rem",
  bodyBackground: "#fff",
  bodyColor: "#252423",
  bodyLineHeight: 1.4286
};

Tests:

RAW
rawVariables(siteVariables)
MEMO
memoVariables(siteVariables)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
RAW
MEMO

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

It seems like you're testing React performance benchmarks. I'll break down the provided data and provide some insights:

**Benchmark Data**

The benchmark data is in JSON format, containing three main sections: `siteVariables`, `Html Preparation Code`, and `Individual test cases`.

1. **siteVariables**: An object with various React-related settings, such as font sizes, line heights, border styles, and more.
2. **Html Preparation Code**: A string containing links to external JavaScript libraries (React, React DOM, Moize, and Lodash).
3. **Individual test cases**: Two benchmark definitions with "RAW" and "MEMO" test names.

**Benchmark Definitions**

The two benchmark definitions are:

1. `rawVariables(siteVariables)`: This definition uses the `rawVariables` function to extract variables from the `siteVariables` object.
2. `memoVariables(siteVariables)`: This definition uses the `memoVariables` function to memoize (cache) the extracted variables.

**Benchmark Results**

The latest benchmark results are in JSON format, containing information about two executions:

1. **MEMO**: A Chrome 77 execution on a Windows desktop with high executions per second (6374269).
2. **RAW**: A Chrome 77 execution on a Windows desktop with relatively low executions per second (40898.140625).

**Insights**

The benchmark results suggest that memoizing variables (using `memoVariables`) leads to better performance, likely due to reduced re-renders and improved caching. The `rawVariables` function extracts variables without memoization, resulting in lower performances.

To improve the performance of your React application, consider using memoized variable extraction functions like `memoVariables`. Additionally, ensure that you're properly caching and optimizing other resources to achieve better benchmark results.

Related benchmarks:

Stardust memoized (version: 0)

Comparing performance of: RAW vs MEMO

Created: 6 years ago by: Registered User

Jump to the latest result

RAW

MEMO

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):