preview > decorators causes: "Rendered more hooks than during the previous render."
See original GitHub issueDescribe the bug
When adding a decorator to .storybook/preview.js
an error occurs: “Rendered more hooks than during the previous render.”
Error
Rendered more hooks than during the previous render.
Call Stack
useHook
vendors~main.iframe.bundle.js:11148:13
useMemoLike
vendors~main.iframe.bundle.js:11175:18
useMemo
vendors~main.iframe.bundle.js:11187:10
withBackground
vendors~main.iframe.bundle.js:3858:106
undefined
vendors~main.iframe.bundle.js:11056:21
undefined
vendors~main.iframe.bundle.js:12992:12
undefined
vendors~main.iframe.bundle.js:12999:14
renderWithHooks
vendors~main.iframe.bundle.js:249128:18
mountIndeterminateComponent
vendors~main.iframe.bundle.js:251954:13
beginWork
vendors~main.iframe.bundle.js:253192:16
![Screen Shot 2021-06-13 at 15 10 48](https://user-images.githubusercontent.com/1148334/121808610-8e826d00-cc59-11eb-8839-46d96675f51c.png)
To Reproduce Repro: TBD
Add the following code to your .storybook/preview.js
export const decorators = [Story => <Story />];
System
System:
OS: macOS 11.4
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Binaries:
Node: 14.16.0 - ~/.nvm/versions/node/v14.16.0/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 6.14.11 - ~/.nvm/versions/node/v14.16.0/bin/npm
Browsers:
Chrome: 91.0.4472.101
Firefox: 87.0
Safari: 14.1.1
npmPackages:
@storybook/addon-actions: ^6.2.9 => 6.2.9
@storybook/addon-essentials: ^6.2.9 => 6.2.9
@storybook/addon-links: ^6.2.9 => 6.2.9
@storybook/react: ^6.2.9 => 6.2.9
Issue Analytics
- State:
- Created 2 years ago
- Reactions:15
- Comments:11 (7 by maintainers)
Top Results From Across the Web
Rendered more hooks than during the previous render
Using addDecorator in Storybook's preview. ts throws Rendered more hooks than during the previous render. Save this question. Show activity on ...
Read more >Using addDecorator in Storybook's preview.ts throws ...
Coding example for the question Using addDecorator in Storybook's preview.ts throws Rendered more hooks than during the previous render-Reactjs.
Read more >Rendered more hooks than during the previous render. - Reddit
length - 1] + 1])}>ADD</button> main> export default App;. Why are they different to React? Why does one cause the number of hooks...
Read more >error: rendered more hooks than during the previous render.
Medium.com > @adebanjosegun589 > react-error-rendered-more-hooks-than-during-the... For some reason, I know not of, returning my component in the form of a ...
Read more >Decorators - Storybook - JS.ORG
A decorator is a way to wrap a story in extra “rendering” functionality. Many addons define decorators to augment your stories with extra...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I encountered this error after enabling strict mode and fast refresh, and was able to resolve it in my decorator function by changing
<Story />
to{Story()}
i.e.
We just ran into this again, only this time it was caused by running storybook through Cypress tests. We have a decorator for our stories that need authentication to prompt to authenticate, and that decorator works fine in storybook alone, but as soon as we try to hit those stories with Cypress tests, then we get the hooks error and those stories fail. So that’s a new wrinkle. I will continue to investigate and see if I can figure out why running inside the Cypress runner iframe causes the rendering and hooks to behave differently when just running normally.
Switching our decorator from
<Story />
to{Story()}
did not help in this case