Decorators placed after withRouter are called twice

[eloiqs]

Consider this code sample

export default {
  title: 'Demo',
  component: Demo,
  decorators: [
    (Story) => {
      console.log('Provider');
      return (
        <Provider store={mockStore()}>
          <Story />
        </Provider>
      );
    },
    (...args) => {
      console.log('withRouter');
      return withRouter(...args);
    },
  ],
}

export const Default = {
  decorators: [
    (Story) => {
      console.log('story');
      return <Story />;
    },
  ],
};

Output:

withRouter
Provider
story
Provider
story

Is this how withRouter is supposed to work?

[JesusTheHun]

Have you try the same code outside of storybook to see if it behaves the same way ?

[eloiqs]

No but I'm not sure how that would be relevant as the code outside storybook renders the whole app and doesn't have any storybook decorators, and it is the decorator that is called twice, not the component?

[JesusTheHun]

@eloiqs the array of decorators is just a component tower. The router decorator uses react hooks, therefore in dev mode, they will be called twice, eventually rendering twice.

Can you describe your issue down the line ?

[JesusTheHun]

I'm closing this as no further information has been delivered and no actual issue has been identified. Feel free to re-open this if you have additional information.