message: perf: Improve mount performance of invisible `DisclosureContent` and derivative components
diff: @@ -20,6 +20,21 @@ export type DisclosureContentProps = DisclosureContentOptions &
  type TransitionState = "enter" | "leave" | null;
  +// To improve mounting performance, we're delaying the render of children when
  +// the disclosure content element is initially not visible.
  +function useDelayedChildren(children?: React.ReactNode, visible?: boolean) {
  + const [initialVisible] = React.useState(visible);
  + const [displayChildren, setDisplayChildren] = React.useState(initialVisible);
  +
  + React.useEffect(() => {
  + if (!initialVisible) {
  + setDisplayChildren(true);
  + }
  + }, [initialVisible]);
  +
  + return displayChildren ? children : null;
  +}
  +
  export const useDisclosureContent = createHook<
  DisclosureContentOptions,
  DisclosureContentHTMLProps
  @@ -33,6 +48,7 @@ export const useDisclosureContent = createHook<
  {
  onTransitionEnd: htmlOnTransitionEnd,
  onAnimationEnd: htmlOnAnimationEnd,
  + children: htmlChildren,
  style: htmlStyle,
  ...htmlProps
  }
  @@ -44,6 +60,7 @@ export const useDisclosureContent = createHook<
  const onTransitionEndRef = useLiveRef(htmlOnTransitionEnd);
  const onAnimationEndRef = useLiveRef(htmlOnAnimationEnd);
  const raf = React.useRef(0);
  + const children = useDelayedChildren(htmlChildren, options.visible);
  React.useEffect(() => {
  if (!options.animated) return undefined;
  @@ -101,6 +118,7 @@ export const useDisclosureContent = createHook<
  onAnimationEnd,
  hidden,
  style,
  + children,
  ...htmlProps,
  };
  },
  