fix(stack): prevent crashing when there's a lot of children (#6684)

Co-authored-by: Segun Adebayo <joseshegs@gmail.com>

.changeset/funny-lies-switch.md

@@ -0,0 +1,8 @@
+---
+"@chakra-ui/layout": patch
+---
+
+Prevent Stack from crashing when there's a lot of children
+
+NB: This does not help improve loading and refresh performance otherwise,
+libraries like `react-virtualized` should be used to handle large lists.

packages/components/layout/src/stack/stack.tsx

@@ -98,32 +98,43 @@ export const Stack = forwardRef<StackProps, "div">((props, ref) => {
   const hasDivider = !!divider
   const shouldUseChildren = !shouldWrapChildren && !hasDivider
 
-  const validChildren = getValidChildren(children)
-
-  const clones = shouldUseChildren
-    ? validChildren
-    : validChildren.map((child, index) => {
-        // Prefer provided child key, fallback to index
-        const key = typeof child.key !== "undefined" ? child.key : index
-        const isLast = index + 1 === validChildren.length
-        const wrappedChild = <StackItem key={key}>{child}</StackItem>
-        const _child = shouldWrapChildren ? wrappedChild : child
-
-        if (!hasDivider) return _child
-
-        const clonedDivider = cloneElement(divider as React.ReactElement<any>, {
-          __css: dividerStyle,
+  const clones = useMemo(() => {
+    const validChildren = getValidChildren(children)
+    return shouldUseChildren
+      ? validChildren
+      : validChildren.map((child, index) => {
+          // Prefer provided child key, fallback to index
+          const key = typeof child.key !== "undefined" ? child.key : index
+          const isLast = index + 1 === validChildren.length
+          const wrappedChild = <StackItem key={key}>{child}</StackItem>
+          const _child = shouldWrapChildren ? wrappedChild : child
+
+          if (!hasDivider) return _child
+
+          const clonedDivider = cloneElement(
+            divider as React.ReactElement<any>,
+            {
+              __css: dividerStyle,
+            },
+          )
+
+          const _divider = isLast ? null : clonedDivider
+
+          return (
+            <Fragment key={key}>
+              {_child}
+              {_divider}
+            </Fragment>
+          )
         })
-
-        const _divider = isLast ? null : clonedDivider
-
-        return (
-          <Fragment key={key}>
-            {_child}
-            {_divider}
-          </Fragment>
-        )
-      })
+  }, [
+    divider,
+    dividerStyle,
+    hasDivider,
+    shouldUseChildren,
+    shouldWrapChildren,
+    children,
+  ])
 
   const _className = cx("chakra-stack", className)
 

packages/components/layout/src/wrap.tsx

@@ -101,11 +101,15 @@ export const Wrap = forwardRef<WrapProps, "div">(function Wrap(props, ref) {
     }
   }, [spacing, spacingX, spacingY, justify, align, direction])
 
-  const childrenToRender = shouldWrapChildren
-    ? Children.map(children, (child, index) => (
-        <WrapItem key={index}>{child}</WrapItem>
-      ))
-    : children
+  const childrenToRender = useMemo(
+    () =>
+      shouldWrapChildren
+        ? Children.map(children, (child, index) => (
+            <WrapItem key={index}>{child}</WrapItem>
+          ))
+        : children,
+    [children, shouldWrapChildren],
+  )
 
   return (
     <chakra.div