diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7734450ab3..da9e12b8f8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,11 +39,12 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add behaviors for `Tree` as list and linked them using childBehaviors @silviuavram ([#1928](https://github.com/stardust-ui/react/pull/1928))
 - Add `notes` icon and update `link` icon in Teams theme @codepretty ([#1953](https://github.com/stardust-ui/react/pull/1953))
 
+### Performance
+- Resolve styles once in `renderComponent()` @layershifter ([#1957](https://github.com/stardust-ui/react/pull/1957))
+
 ### Documentation
 - Remove Usage tab @lucivpav ([#1948](https://github.com/stardust-ui/react/pull/1948))
 - Put props on a single page, fix props links @lucivpav ([#1892](https://github.com/stardust-ui/react/pull/1892))
-
-### Documentation
 - Remove cancel button in a `Dialog` example with a close action @lucivpav ([#1949](https://github.com/stardust-ui/react/pull/1949))
 
 <!--------------------------------[ v0.38.1 ]------------------------------- -->
diff --git a/packages/react/src/components/Design/Design.tsx b/packages/react/src/components/Design/Design.tsx
index d93333dc02..0ecccbf523 100644
--- a/packages/react/src/components/Design/Design.tsx
+++ b/packages/react/src/components/Design/Design.tsx
@@ -22,7 +22,7 @@ function Design<DesignProps>({ config, children }) {
   const theme = React.useContext<ProviderContextPrepared>(ThemeContext)
   const getConfig = React.useCallback(() => config, [config])
 
-  // Heads Up! Keep in sync with getClasses.ts
+  // Heads Up! Keep in sync with renderComponent.tsx
   const styleParam = {
     theme: { direction: theme.rtl ? 'rtl' : 'ltr' },
   }
diff --git a/packages/react/src/lib/getClasses.ts b/packages/react/src/lib/getClasses.ts
deleted file mode 100644
index c497b40335..0000000000
--- a/packages/react/src/lib/getClasses.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import callable from './callable'
-import {
-  ComponentStyleFunctionParam,
-  ComponentSlotClasses,
-  ComponentSlotStylesInput,
-  Renderer,
-} from '../themes/types'
-
-/**
- * Returns a string of HTML classes.
- * Renders one or many component styles (objects of component parts) to the DOM.
- */
-const getClasses = (
-  renderer: Renderer,
-  componentStyles: ComponentSlotStylesInput,
-  styleParam: ComponentStyleFunctionParam,
-): ComponentSlotClasses => {
-  // root, icon, etc.
-  const componentParts: string[] = Object.keys(componentStyles)
-
-  // Fela plugins rely on `direction` param in `theme` prop instead of RTL
-  // Our API should be aligned with it
-  // Heads Up! Keep in sync with Design.tsx render logic
-  const direction = styleParam.rtl ? 'rtl' : 'ltr'
-  const mergedStyleParam = {
-    ...styleParam,
-    theme: { ...styleParam.theme, direction },
-  }
-
-  return componentParts.reduce((classes, partName) => {
-    classes[partName] = renderer.renderRule(callable(componentStyles[partName]), mergedStyleParam)
-
-    return classes
-  }, {})
-}
-
-export default getClasses
diff --git a/packages/react/src/lib/index.ts b/packages/react/src/lib/index.ts
index 9f208eabb0..c89d4ee17b 100644
--- a/packages/react/src/lib/index.ts
+++ b/packages/react/src/lib/index.ts
@@ -13,7 +13,6 @@ export { default as getOrGenerateIdFromShorthand } from './getOrGenerateIdFromSh
 export * from './factories'
 export { default as callable } from './callable'
 export { default as constants } from './constants'
-export { default as getClasses } from './getClasses'
 export { default as getElementType } from './getElementType'
 export { default as getUnhandledProps } from './getUnhandledProps'
 export { default as mergeThemes } from './mergeThemes'
diff --git a/packages/react/src/lib/renderComponent.tsx b/packages/react/src/lib/renderComponent.tsx
index 4542634d6e..0762558d77 100644
--- a/packages/react/src/lib/renderComponent.tsx
+++ b/packages/react/src/lib/renderComponent.tsx
@@ -3,7 +3,6 @@ import * as React from 'react'
 import * as _ from 'lodash'
 
 import callable from './callable'
-import getClasses from './getClasses'
 import getElementType from './getElementType'
 import getUnhandledProps from './getUnhandledProps'
 import logProviderMissingWarning from './providerMissingHandler'
@@ -201,11 +200,25 @@ const renderComponent = <P extends {}>(
     disableAnimations,
   }
 
-  const resolvedStyles: ComponentSlotStylesPrepared = resolveStyles(mergedStyles, styleParam)
+  // Fela plugins rely on `direction` param in `theme` prop instead of RTL
+  // Our API should be aligned with it
+  // Heads Up! Keep in sync with Design.tsx render logic
+  const direction = rtl ? 'rtl' : 'ltr'
+  const felaParam = {
+    theme: { direction },
+  }
+
+  const resolvedStyles: ComponentSlotStylesPrepared = {}
+  const classes: ComponentSlotClasses = {}
+
+  Object.keys(mergedStyles).forEach(slotName => {
+    resolvedStyles[slotName] = callable(mergedStyles[slotName])(styleParam)
+
+    if (renderer) {
+      classes[slotName] = renderer.renderRule(callable(resolvedStyles[slotName]), felaParam)
+    }
+  })
 
-  const classes: ComponentSlotClasses = renderer
-    ? getClasses(renderer, mergedStyles, styleParam)
-    : {}
   classes.root = cx(className, classes.root, props.className)
 
   const resolvedConfig: RenderResultConfig<P> = {