storybook/examples/official-storybook/stories/addon-docs/container-override.stories.mdx

import { useRef } from 'react';
import { Meta, DocsContainer, Story, ArgsTable } from '@storybook/addon-docs';

<Meta
  title="Addons/Docs/container-override"
  parameters={{
    docs: {
      // eslint-disable-next-line react/prop-types
      container: ({ children, context }) => {
        const countRef = useRef();
        countRef.current = (countRef.current || 0) + 1;
        return (
          <DocsContainer context={context}>
            <div style={{ border: '5px solid red' }}>{children}</div>
            <p>Container rendered {countRef.current} times</p>
            <p>Try changing:</p>
            <ul>
              <li>the arg - story should rerender but container should not</li>
              <li>a global (eg theme) - both should rerender</li>
            </ul>
          </DocsContainer>
        );
      },
    },
  }}
/>

export const Component = () => {
  const countRef = useRef();
  countRef.current = (countRef.current || 0) + 1;
  return <div>Story rendered {countRef.current} times</div>;
};

<Story name="dummy" parameters={{ layout: 'fullscreen' }}>
  <Component />
</Story>

<ArgsTable story="." />