feat: optimise FontAwesomeIcon by reducing per-render function calls and memory allocations

Author: charles4221

src/components/FontAwesomeIcon.tsx

@@ -1,6 +1,9 @@
 import React, { CSSProperties, RefAttributes, SVGAttributes } from 'react'
 
-import { icon, parse } from '@fortawesome/fontawesome-svg-core'
+import {
+  icon as faIcon,
+  parse as faParse,
+} from '@fortawesome/fontawesome-svg-core'
 import type {
   FaSymbol,
   FlipProp,
@@ -15,7 +18,6 @@ import { convert } from '../converter'
 import { Logger } from '../logger'
 import { getClassListFromProps } from '../utils/get-class-list-from-props'
 import { normalizeIconArgs } from '../utils/normalize-icon-args'
-import { objectWithKey } from '../utils/object-with-key'
 import { typedObjectKeys } from '../utils/typed-object-keys'
 
 const logger = new Logger('FontAwesomeIcon')
@@ -51,6 +53,8 @@ const defaultProps = {
   widthAuto: false,
 }
 
+const EMPTY_OBJECT: Record<string, never> = {}
+
 export interface FontAwesomeIconProps
   extends Omit<SVGAttributes<SVGSVGElement>, 'children' | 'mask' | 'transform'>,
     RefAttributes<SVGSVGElement> {
@@ -155,35 +159,30 @@ export const FontAwesomeIcon = React.forwardRef(
       icon: iconArgs,
       mask: maskArgs,
       symbol,
-      className,
       title,
       titleId,
       maskId,
+      transform,
     } = allProps
 
     const iconLookup = normalizeIconArgs(iconArgs)
 
-    const classes = objectWithKey('classes', [
-      ...getClassListFromProps(allProps),
-      ...(className || '').split(' '),
-    ])
-    const transform = objectWithKey(
-      'transform',
-      typeof allProps.transform === 'string'
-        ? parse.transform(allProps.transform)
-        : allProps.transform,
-    )
-    const mask = objectWithKey('mask', normalizeIconArgs(maskArgs))
-
     if (!iconLookup) {
       logger.error('Icon lookup is undefined', iconArgs)
       return null
     }
 
-    const renderedIcon = icon(iconLookup, {
-      ...classes,
-      ...transform,
-      ...mask,
+    const classList = getClassListFromProps(allProps)
+
+    const transformProps =
+      typeof transform === 'string' ? faParse.transform(transform) : transform
+
+    const normalizedMaskArgs = normalizeIconArgs(maskArgs)
+
+    const renderedIcon = faIcon(iconLookup, {
+      ...(classList.length > 0 ? { classes: classList } : EMPTY_OBJECT),
+      ...(transformProps ? { transform: transformProps } : EMPTY_OBJECT),
+      ...(normalizedMaskArgs ? { mask: normalizedMaskArgs } : EMPTY_OBJECT),
       symbol,
       title,
       titleId,

src/utils/__tests__/get-class-list-from-props.test.ts

@@ -31,7 +31,7 @@ describe('get class list', () => {
     flip: true,
     rotateBy: true,
     widthAuto: true,
-  }
+  } as FontAwesomeIconProps
 
   const classList = getClassListFromProps(props)
   const expectedClasses = [
@@ -78,7 +78,9 @@ describe('get class list', () => {
     '9x',
     '10x',
   ])('size %s', (size) => {
-    expect(getClassListFromProps({ size })).toStrictEqual([`fa-${size}`])
+    expect(
+      getClassListFromProps({ size } as FontAwesomeIconProps),
+    ).toStrictEqual([`fa-${size}`])
   })
 
   test('flip', () => {
@@ -88,19 +90,19 @@ describe('get class list', () => {
 
     const horizontalList = getClassListFromProps({
       flip: 'horizontal',
-    })
+    } as FontAwesomeIconProps)
 
     const verticalList = getClassListFromProps({
       flip: 'vertical',
-    })
+    } as FontAwesomeIconProps)
 
     const bothList = getClassListFromProps({
       flip: 'both',
-    })
+    } as FontAwesomeIconProps)
 
     const flipAnimationOnly = getClassListFromProps({
       flip: true,
-    })
+    } as FontAwesomeIconProps)
 
     expect(horizontalList).toContain(HORIZONTAL)
     expect(verticalList).toContain(VERTICAL)
@@ -113,13 +115,15 @@ describe('get class list', () => {
   })
 
   test.each<RotateProp>([90, 180, 270])('rotation %s', (rotation) => {
-    expect(getClassListFromProps({ rotation })).toStrictEqual([
-      `fa-rotate-${rotation}`,
-    ])
+    expect(
+      getClassListFromProps({ rotation } as FontAwesomeIconProps),
+    ).toStrictEqual([`fa-rotate-${rotation}`])
   })
 
   test.each<PullProp>(['left', 'right'])('pull %s', (pull) => {
-    expect(getClassListFromProps({ pull })).toStrictEqual([`fa-pull-${pull}`])
+    expect(
+      getClassListFromProps({ pull } as FontAwesomeIconProps),
+    ).toStrictEqual([`fa-pull-${pull}`])
   })
 
   test.each<keyof FontAwesomeIconProps>(['pull', 'rotation', 'size'])(
@@ -135,7 +139,7 @@ describe('get class list', () => {
         border: true,
         listItem: true,
         [prop]: null,
-      }
+      } as unknown as FontAwesomeIconProps
 
       expect(getClassListFromProps(props).length).toBe(NUM_CLASSES)
       expect(getClassListFromProps(props)).toStrictEqual([

src/utils/__tests__/object-with-key.test.ts

@@ -26,12 +26,10 @@ const IS_VERSION_7_OR_LATER = semver.gte(
  * Get CSS class list from a props object.
  * This function maps our React props to the corresponding CSS class names from Font Awesome.
  *
- * @param props Partial props object from which to extract CSS classes.
+ * @param props Props object from which to extract CSS classes.
  * @returns An array of CSS class names derived from the props.
  */
-export function getClassListFromProps(
-  props: Partial<FontAwesomeIconProps>,
-): string[] {
+export function getClassListFromProps(props: FontAwesomeIconProps): string[] {
   const {
     beat,
     fade,
@@ -53,11 +51,13 @@ export function getClassListFromProps(
     swapOpacity,
     rotateBy,
     widthAuto,
+    className,
   } = props
 
   const result: string[] = []
 
   // Add classes only if the condition is truthy
+  if (className) result.push(...className.split(' '))
   if (beat) result.push(ANIMATION_CLASSES.beat)
   if (fade) result.push(ANIMATION_CLASSES.fade)
   if (beatFade) result.push(ANIMATION_CLASSES.beatFade)