question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

addon-docs: Props doesn't work when using React.memo.

See original GitHub issue

Describe the bug I trying show the props in docs page using <Props of={Component}/> in .mdx file. But i receive this message “No props found for this component”

To Reproduce Steps to reproduce the behavior:

  1. Create Component in React and wrapped this with React.memo
  2. Run Storybook and open docs tab
  3. The prop table does not appear

Screenshots ex1

Code snippets

Button.js

function Button({ label, onClick }) {
  return (
    <ButtonContainer onClick={onClick}>
      <Label> {label} </Label>
    </ButtonContainer>
  );
}

Button.propTypes = {
  label: PropTypes.string.isRequired,
  onClick: PropTypes.func.isRequired,
};

export default React.memo(Button);

button.stories.mdx

# Button

Exemplo do **botão** padrão.

<Preview withToolbar>
  <Story name="Default" height="100px" parameters={{ decorators: [withKnobs] }}>
    <Button 
      labelColor={text("Label Color", theme.colors.white)}
      onClick={() => alert("Button Click")} />
  </Story>
</Preview>

## Props

<Props of={Button} />

System: OS: Linux 4.15 Ubuntu 18.04.3 LTS (Bionic Beaver) CPU: (4) x64 Intel® Core™ i5-3570 CPU @ 3.40GHz Binaries: Node: 10.15.3 - /usr/local/bin/node Yarn: 1.19.1 - /usr/bin/yarn npm: 6.4.1 - /usr/local/bin/npm Browsers: Chrome: 78.0.3904.108 Firefox: 72.0.1 npmPackages: @storybook/addon-actions: 5.3.7 => 5.3.7 @storybook/addon-backgrounds: 5.3.7 => 5.3.7 @storybook/addon-centered: 5.3.7 => 5.3.7 @storybook/addon-docs: 5.3.7 => 5.3.7 @storybook/addon-knobs: 5.3.7 => 5.3.7 @storybook/addon-storysource: 5.3.7 => 5.3.7 @storybook/addon-viewport: 5.3.7 => 5.3.7 @storybook/core: 5.3.7 => 5.3.7 @storybook/react: 5.3.7 => 5.3.7 @storybook/theming: 5.3.7 => 5.3.7 npmGlobalPackages: @storybook/cli: 5.3.4

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:11
  • Comments:34 (16 by maintainers)

github_iconTop GitHub Comments

9reactions
igloudecommented, Apr 28, 2020

FWIW I discovered that <Props of={MemoizedComponent.type} /> will correctly render a props table. No idea what’s going on under the hood there, lol

8reactions
shilmancommented, Jan 21, 2020

Unsatisfying workaround is to also export your pure component and use that for documentation purposes

Read more comments on GitHub >

github_iconTop Results From Across the Web

React Top-Level API
React.memo only checks for prop changes. If your function component wrapped in React.memo has a useState , useReducer or useContext Hook in its...
Read more >
react memo is not getting props - Stack Overflow
my problem is to stop twice rendering using react memo, but memo seems to be not working and the component renders twice with...
Read more >
react-addons-clone-with-props | Yarn - Package Manager
Fast, reliable, and secure dependency management.
Read more >
React Basic Notes | Awesome Notes - Sabertaz Blog
React will recursively render all child components inside of it (because props.children is always a new reference when parent re-rendering). The ...
Read more >
Optimize slow React components with “React Profiler”
This post is a work in progress chapter from “React Performance” book i've started working on and haven't touched for few months.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found