Story controls are not working when using withRouter on Storybook 7

[marcosdiasdev]

I'm using Storybook 7 on a project and just noticed that changing props values in the Controls tab won't re-render the story, even though the args are being added to the URL.

Refreshing the page with the added args does the job. So it seems to me that there might be a problem with the router added by withRouter.

My preview.tsx looks somewhat like this:

import * as React from 'react';
import { Preview } from '@storybook/react';
import { withRouter } from 'storybook-addon-react-router-v6';
import {  ThemeProvider } from 'mycomponentslib';

const preview: Preview = {
  decorators: [
    (Story) => (
      <ThemeProvider>
          <Story />
      </ThemeProvider>
    ),
    withRouter
  ],
}

export default preview;

It's not a problem with my stories. I tried CSF, MDX and TSX stories with StoryFn. It works without the withRouter HOC.

[JesusTheHun]

Hello @marcosdiasdev , Can you check if you are using the latest version, released today ?

Also, this add-on is not (yet!) compatible with SB 7. You can try the canary version and tell me if it works :

npm i storybook-addon-react-router-v6@1.3.6--canary.ffa6de3.0

If I have positive feedbacks, I will release a stable version for SB7 ;)

[marcosdiasdev]

Hey, @JesusTheHun ! It seems like version 0.3.6 fixes the problem. Just installed it here and the controls are working again.

Thank you!

[marcosdiasdev]

I just realized the story becomes very slow to re-render after changing controls repetitively. It doesn't happen when not using withRouter.

[JesusTheHun]

Can you create a separate issue for the performance issue ?