old_contents: import * as React from 'react';
  import PropTypes from 'prop-types';
  
  import InitialCodeBlock from '@theme-init/CodeBlock';
  
  import { CodeOutput } from './CodeOutput';
  
  const styles = {
    container: {},
    output: {
      position: 'relative',
      padding: '1.25em 1em 0em 1em'
    }
  };
  
  export default function CodeBlock(props) {
    const { children, showOutput, reverse = false, open = true } = props;
  
    let content = [];
    content.push(<InitialCodeBlock {...props} key="code" />);
  
    if (showOutput) {
      let outputContent = <CodeOutput code={children} key="output" />;
      if (typeof open === 'string') {
        // TODO: to improve performance, render content only when open is yes.
        outputContent = (
          <details key="output" open={open === 'yes'}>
            <summary>
              <strong>Show Output</strong>
            </summary>
            {outputContent}
          </details>
        );
      }
      content.push(outputContent);
    }
    if (reverse) content = content.reverse();
    return content;
  }
  
new_contents: import * as React from 'react';
  
  import InitialCodeBlock from '@theme-init/CodeBlock';
  
  import { CodeOutput } from './CodeOutput';
  
  const styles = {
    container: {},
    output: {
      position: 'relative',
      padding: '1.25em 1em 0em 1em'
    }
  };
  
  export default function CodeBlock(props) {
    const { children, showOutput, reverse = false, open } = props;
    const [isMounted, setMount] = React.useState(false);
    const [detailsOpen, toggleOpen] = React.useState(open === 'yes');
    React.useEffect(() => {
      setMount(true);
    }, []);
    let content = [];
    content.push(<InitialCodeBlock {...props} key="code" />);
    if (showOutput) {
      const handleToggle = () => {
        toggleOpen((prevOpen) => !prevOpen);
      };
      let outputContent = <CodeOutput code={children} key="output" />;
      if (typeof open === 'string') {
        outputContent = (
          <details
            key="output"
            open={detailsOpen}
            onToggle={isMounted ? handleToggle : undefined}
          >
            <summary>
              <strong>Show Output</strong>
            </summary>
            {detailsOpen && <CodeOutput code={children} key="output" />}
          </details>
        );
        content.push(outputContent);
      } else {
        content.push(<CodeOutput code={children} key="output" />);
      }
    }
    if (reverse) content = content.reverse();
    return content;
  }
  
subject: Update CodeBlock to not render output