withRouter decorator prevents component from re-render inside custom render function

[artaommahe]

Having this component

export const Counter = ({ value, onClick }) => {
  return <button onClick={onClick}>current value: {value}</button>;
};

and this story with custom render function

import { useState } from 'react';
import { withRouter } from 'storybook-addon-react-router-v6';

import { Counter } from './Counter';

export const Default = {
  render: () => {
    const [value, setValue] = useState(0);

    return <Counter value={value} onClick={() => setValue(value + 1)} />;
  },
};

export default {
  component: Counter,
  decorators: [withRouter],
};

The component will not be re-rendered on button clicks if withRouter decorator is used. Removing decorator fixes the issue.

Reproduction - https://stackblitz.com/edit/storybook-addon-react-router-usestate-issue?file=src%2FCounter.stories.jsx

Libraries

    "@storybook/addon-essentials": "^7.0.27",
    "@storybook/addon-interactions": "^7.0.27",
    "@storybook/addon-links": "^7.0.27",
    "@storybook/blocks": "^7.0.27",
    "@storybook/react": "^7.0.27",
    "@storybook/react-vite": "^7.0.27",
    "@storybook/testing-library": "^0.0.14-next.2",
    "storybook": "^7.0.27",
    "storybook-addon-react-router-v6": "^1.0.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"

[JesusTheHun]

I'm aware of this behaviour. I'm working on a v2 that will fix that issue. For now, as a workaround, you can declare your component outside the story object:

function DefaultComponent() {
  const [value, setValue] = useState(0);
  return <Counter value={value} onClick={() => setValue(value + 1)} />;
}

export const Default = {
  render: () => <DefaultComponent />
}

[JesusTheHun]

@artaommahe I have published a RC for the v2, can you give it a try ?

https://github.com/JesusTheHun/storybook-addon-react-router-v6/releases/tag/v2.0.0-rc.0

[artaommahe]

@JesusTheHun it works!