Using React.memo causes issues with Storybook Info Addon

[JKirkYuan]

Describe the bug
Wrapping a functional component with React.memo causes the Info Addon to display the Story Source as <Unknown /> and causes all the Prop Types to disappear

To Reproduce
Steps to reproduce the behavior:

1. Wrap your functional component with React.memo
2. Click on 'showInfo'
3. We can see that the JSX is wrong and has no Prop Types

Screenshots

• With React.memo
  
• Without React.memo
  

Code snippets

webpack.config.js

const path = require('path');
module.exports = ({ config, mode }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    use: [
      {
        loader: require.resolve('babel-loader'),
	options: {
	  presets: [require.resolve('babel-preset-react-app')]
	}
      },
      {
        loader: require.resolve('react-docgen-typescript-loader'),
      },
    ]
  });
  config.resolve.extensions.push('.ts', '.tsx');
  return config;
};

story

storiesOf("InputField", module)
  .addParameters({
    info: {
      inline: false,
    }
  })
  .add(
    "Search", () => (
      <FieldDay onChange={action('change')}/>
    )
  );

System:

• OS: Windows10
• Browser: Chrome
• Framework: React 16.8.4 (TypeScript)
• Addons: addon-info
• Version: 5.0.5 & 5.1.0-alpha.17

[shilman]

Ermahgerd!! I just released https://github.com/storybooks/storybook/releases/tag/v5.1.0-alpha.25 containing PR #6347 that references this issue. Upgrade today to try it out!

Because it's a pre-release you can find it on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[kzinevych]

@shilman Hi, thx for the updates. In @next version (5.1.0-rc.3) using react memo, have same story with memo components (in JSX tab). <[object Object] /> instead component name <Modal />

[shilman]

@ConstRep Can you file an issue on addon-jsx repo for that? I don't maintain that package.

[ButuzGOL]

in ^5.1.1 have
still issue

// @flow

import React, { memo } from 'react';
import classnames from 'classnames';

type Props = {
  /**
   * Type default, shade, inverse
   */
  type?: 'default' | 'shade' | 'inverse',
  /**
   * Label text
   */
  label?: string,
  /**
   * Class name
   */
  className?: string,
  /**
   * Childern nodes
   */
  children?: any,
};

const Badge = memo<Props>(({ children, type, className, label }: Props) => {
  const typeClassName = type ? `slds-theme_${type}` : null;
  const classNames = classnames('slds-badge', typeClassName, className);

  return <span className={classNames}>{label || children}</span>;
});

Badge.displayName = 'Badge';

export default Badge;

[shilman]

FYI this should be fixed in SB docs, which displays the actual source code. See the 5.1 release post for more info on how to kick the tires: https://medium.com/storybookjs/storybook-5-1-50afd02b5bbb

[ButuzGOL]

i have checked in 5.2.0-beta.38 still have issue
Prop Types
"Unknown" Component

const Badge = memo<Props>(({ children, type, className, label }: Props) => {
  const typeClassName = type ? `slds-theme_${type}` : null;
  const classNames = classnames('slds-badge', typeClassName, className);

  return <span className={classNames}>{label || children}</span>;
});

Badge.displayName = 'Badge';

export default Badge;

[shilman]

DocsPage is replacing addon-info. Announcement here: https://medium.com/storybookjs/storybook-docspage-e185bc3622bf

[Lighttree]

Still an issue in

"@storybook/react": "^5.2.3",
"@storybook/addon-docs": "^5.3.0-alpha.15"

As soon as I wrap my component in React.memo I start to have:
"No props found for this component" in <Props />

[shilman]

Will fix: #8361

[Chill-Studio]

Yup still happening in the last version 6.3.6

My solution is to export a version of the component without the memo and one with the memo and use the one without in storybook

const Component =  (p :  BlablaProps) : JSX.Element => {
    return (
       <div>Blabla</div>
    );
})

export const BlablaStoryBook  = Component
export const Blabla = memo(Component)

In the story

import { ComponentMeta, ComponentStory } from '@storybook/react';
import { BlablaStoryBook } from './';

export default {
  title: 'SomeSection/Blabla',
  component: BlablaStoryBook,
  argTypes: {
  
  },
} as ComponentMeta<typeof BlablaStoryBook>;

const Template: ComponentStory<typeof BlablaStoryBook> = (args) => <BlablaStoryBook {...args} />;

export const Primary = Template.bind({});
Primary.args = {

};