perf(material): avoid double renders

swordev · Apr 18, 2023 · 99a2ff1 · 99a2ff1
1 parent 89f1499
commit 99a2ff1
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 23 deletions.
diff --git a/.changeset/tender-wasps-change.md b/.changeset/tender-wasps-change.md
@@ -0,0 +1,5 @@
+---
+"@suid/material": patch
+---
+
+Improves performance by avoiding double renderings (`Avatar`, `Alert`, `Button`, `Divider`, `ListItem`, `SvgIcon`)
diff --git a/packages/material/src/Alert/Alert.tsx b/packages/material/src/Alert/Alert.tsx
@@ -12,7 +12,7 @@ import alertClasses, { getAlertUtilityClass } from "./alertClasses";
 import createComponentFactory from "@suid/base/createComponentFactory";
 import { darken, lighten } from "@suid/system";
 import clsx from "clsx";
-import { Show } from "solid-js";
+import { Show, createMemo } from "solid-js";
 
 const $ = createComponentFactory<AlertTypeMap>()({
   name: "MuiAlert",
@@ -168,6 +168,8 @@ const Alert = $.component(function Alert({
   otherProps,
   props,
 }) {
+  const icon = createMemo(() => props.icon);
+  const action = createMemo(() => props.action);
   return (
     <AlertRoot
       role={props.role}
@@ -176,20 +178,20 @@ const Alert = $.component(function Alert({
       class={clsx(classes.root, otherProps.class)}
       {...otherProps}
     >
-      <Show when={props.icon !== false}>
+      <Show when={icon() !== false}>
         <AlertIcon ownerState={allProps} class={classes.icon}>
-          {props.icon ||
+          {icon() ||
             props.iconMapping?.[props.severity]?.() ||
             defaultIconMapping[props.severity]?.()}
         </AlertIcon>
       </Show>
       <AlertMessage ownerState={allProps} class={classes.message}>
         {otherProps.children}
       </AlertMessage>
-      <Show when={!!props.action}>
-        <AlertAction class={classes.action}>{props.action}</AlertAction>
+      <Show when={action()}>
+        <AlertAction class={classes.action}>{action()}</AlertAction>
       </Show>
-      <Show when={!props.action && props.onClose}>
+      <Show when={!action() && props.onClose}>
         <AlertAction ownerState={allProps} class={classes.action}>
           <IconButton
             size="small"

diff --git a/packages/material/src/Button/Button.tsx b/packages/material/src/Button/Button.tsx
@@ -354,16 +354,20 @@ const Button = $.component(function Button({
       {...otherProps}
       classes={props.classes}
     >
-      <Show when={!!props.startIcon}>
-        <ButtonStartIcon class={classes.startIcon} ownerState={allProps}>
-          {props.startIcon}
-        </ButtonStartIcon>
+      <Show when={props.startIcon}>
+        {(startIcon) => (
+          <ButtonStartIcon class={classes.startIcon} ownerState={allProps}>
+            {startIcon()}
+          </ButtonStartIcon>
+        )}
       </Show>
       {props.children}
-      <Show when={!!props.endIcon}>
-        <ButtonEndIcon class={classes.endIcon} ownerState={allProps}>
-          {props.endIcon}
-        </ButtonEndIcon>
+      <Show when={props.endIcon}>
+        {(endIcon) => (
+          <ButtonEndIcon class={classes.endIcon} ownerState={allProps}>
+            {endIcon()}
+          </ButtonEndIcon>
+        )}
       </Show>
     </ButtonRoot>
   );

diff --git a/packages/material/src/Divider/Divider.tsx b/packages/material/src/Divider/Divider.tsx
@@ -219,9 +219,11 @@ const Divider = $.component(function Divider({
       class={clsx(classes.root, allProps.class)}
     >
       <Show when={allProps.children}>
-        <DividerWrapper class={classes.wrapper} ownerState={allProps}>
-          {allProps.children}
-        </DividerWrapper>
+        {(children) => (
+          <DividerWrapper class={classes.wrapper} ownerState={allProps}>
+            {children()}
+          </DividerWrapper>
+        )}
       </Show>
     </$DividerRoot>
   );

diff --git a/packages/material/src/ListItem/ListItem.tsx b/packages/material/src/ListItem/ListItem.tsx
@@ -208,10 +208,12 @@ const ListItem = $.component(function ListItem({
         {...componentProps}
       >
         {props.children}
-        <Show when={!!props.secondaryAction}>
-          <ListItemSecondaryAction>
-            {props.secondaryAction}
-          </ListItemSecondaryAction>
+        <Show when={props.secondaryAction}>
+          {(secondaryAction) => (
+            <ListItemSecondaryAction>
+              {secondaryAction()}
+            </ListItemSecondaryAction>
+          )}
         </Show>
       </Dynamic>
     </ListContext.Provider>

diff --git a/packages/material/src/SvgIcon/SvgIcon.tsx b/packages/material/src/SvgIcon/SvgIcon.tsx
@@ -113,8 +113,8 @@ const SvgIcon = $.component(function SvgIcon({
       ownerState={allProps}
     >
       {props.children}
-      <Show when={!!props.titleAccess}>
-        <title>{props.titleAccess}</title>
+      <Show when={props.titleAccess}>
+        {(titleAccess) => <title>{titleAccess()}</title>}
       </Show>
     </SvgIconRoot>
   );