perf: reduce memo and lazy mount

Author: segunadebayo

.changeset/itchy-planets-provide.md

@@ -0,0 +1,10 @@
+---
+"@chakra-ui/react": patch
+---
+
+- **Styled System:** Boost performance of style resolution by removing
+  `JSON.stringify` in `memo` function and avoid memoizing non-primitive
+  arguments.
+
+- **Menu, Tooltip:** Set `lazyMount` and `unmountOnExit` to `true` in the `Root`
+  component to improve initial rendering performance.

packages/react/__stories__/sandbox.stories.tsx

@@ -69,7 +69,7 @@ export const ColorPalette = () => {
 export const SelfClosing = () => {
   return (
     <Box rounded="full" overflow="hidden" asChild>
-      <img src="https://via.placeholder.com/150" alt="placeholder" />
+      <img src="https://i.pravatar.cc/150?u=1" alt="placeholder" />
     </Box>
   )
 }

packages/react/src/components/menu/menu.ts

@@ -44,7 +44,9 @@ export interface MenuRootProps extends MenuRootBaseProps {
   children: React.ReactNode
 }
 
-export const MenuRoot = withRootProvider<MenuRootProps>(ArkMenu.Root)
+export const MenuRoot = withRootProvider<MenuRootProps>(ArkMenu.Root, {
+  defaultProps: { lazyMount: true, unmountOnExit: true },
+})
 
 ////////////////////////////////////////////////////////////////////////////////////
 

packages/react/src/components/tooltip/tooltip.ts

@@ -44,7 +44,9 @@ export interface TooltipRootProps extends TooltipRootBaseProps {
   children?: React.ReactNode
 }
 
-export const TooltipRoot = withRootProvider<TooltipRootProps>(ArkTooltip.Root)
+export const TooltipRoot = withRootProvider<TooltipRootProps>(ArkTooltip.Root, {
+  defaultProps: { lazyMount: true, unmountOnExit: true },
+})
 
 ////////////////////////////////////////////////////////////////////////////////////
 

packages/react/src/styled-system/css.ts

@@ -3,7 +3,6 @@ import {
   compact,
   isObject,
   isString,
-  memo,
   mergeWith,
   walkObject,
 } from "../utils"
@@ -28,7 +27,7 @@ export function createCssFn(context: CssFnOptions) {
   const { transform, conditions, normalize } = context
   const mergeFn = mergeCss(context)
 
-  return memo((...styleArgs: SystemStyleObject[]) => {
+  return function cssFn(...styleArgs: SystemStyleObject[]) {
     const styles = mergeFn(...styleArgs)
 
     const normalized = normalize(styles)
@@ -58,7 +57,7 @@ export function createCssFn(context: CssFnOptions) {
     })
 
     return sortAtRules(result)
-  })
+  }
 }
 
 function mergeByPath(target: Dict, paths: string[], value: Dict) {
@@ -83,7 +82,7 @@ function mergeCss(ctx: CssFnOptions) {
     if (comp.length === 1) return comp
     return comp.map((style) => ctx.normalize(style))
   }
-  return memo((...styles) => {
+  return function mergeFn(...styles: Dict[]) {
     return mergeWith({}, ...resolve(styles))
-  })
+  }
 }

packages/react/src/styled-system/utility.ts

@@ -159,17 +159,17 @@ export function createUtility(options: Options) {
     return values
   }
 
-  const defaultTransform = memo((prop: string, value: string) => {
+  const defaultTransform = (prop: string, value: string) => {
     return {
       [prop]: prop.startsWith("--") ? tokens.getVar(value, value) : value,
     }
-  })
+  }
 
   const tokenFn = Object.assign(tokens.getVar, {
     raw: (path: string) => tokens.getByName(path),
   })
 
-  const transform = memo((prop: string, raw: any) => {
+  const transform = (prop: string, raw: any) => {
     const key = resolveShorthand(prop)
 
     // skip emotion generated keyframes
@@ -194,7 +194,7 @@ export function createUtility(options: Options) {
       token: tokenFn,
       utils: { colorMix: _colorMix },
     })
-  })
+  }
 
   function build() {
     assignShorthands()
@@ -207,9 +207,9 @@ export function createUtility(options: Options) {
 
   const hasShorthand = shorthands.size > 0
 
-  const resolveShorthand = memo((prop: string) => {
+  const resolveShorthand = (prop: string) => {
     return shorthands.get(prop) ?? prop
-  })
+  }
 
   const keys = () => {
     return [...Array.from(shorthands.keys()), ...Object.keys(configs)]

packages/react/src/utils/memo.ts

@@ -1,7 +1,10 @@
-export const memo = <T extends (...args: any[]) => any>(fn: T): T => {
+export const memo = <T extends (...args: any[]) => any>(
+  fn: T,
+  getKey?: (...args: any[]) => string,
+): T => {
   const cache: Record<string, any> = Object.create(null)
   function get(...args: any[]) {
-    const key = JSON.stringify(args)
+    const key = getKey?.(...args) ?? args.join("|")
     if (cache[key] === undefined) cache[key] = fn(...args)
     return cache[key]
   }