Why does useEffect run in some React Storybook stories but not others, and how can this behavior be fixed?

General Discussions
1

Storybook ignoring useEffect inside some stories but not others

In Storybook with React (MDX), useEffect inside a decorator or wrapper component sometimes doesn’t run for certain stories, even though it works in others. What could cause Storybook to skip running useEffect in some stories, and how can this be fixed?

2

Having worked quite a bit with Storybook, I’ve seen this exact issue Why does useEffect run in some React Storybook stories but not others, and how can this behavior be fixed?

The biggest reason is that Storybook sometimes renders components differently depending on whether it’s in MDX, Docs mode, or Canvas mode. In some of those modes, the component isn’t mounted as a typical React component, so useEffect simply never fires.

A solid fix is to move the useEffect directly inside the story component rather than relying on wrappers or MDX decorators. Something like:

export const MyStory = () => {
  useEffect(() => console.log("runs on mount"), []);
  return <MyComponent />;
};

And avoid placing side-effects inside decorators that only apply in certain modes — that’s where the inconsistency often comes from.

3

Totally agree, and I’ve bumped into Why does useEffect run in some React Storybook stories but not others, and how can this behavior be fixed? quite a few times myself. Building on Netra’s point MDX vs CSF is usually the culprit. The Docs tab uses a static renderer, which doesn’t mount your component the same way as the Canvas tab. So your useEffect might fire in Canvas but silently skip in Docs.

Double-check where you’re viewing the story. If you’re testing from the Docs tab, switch to Canvas that’s the actual interactive environment. Keeping side-effects inside the story function ensures they always run, regardless of MDX.

4

And adding one more practical insight from my Storybook work this Why does useEffect run in some React Storybook stories but not others, and how can this behavior be fixed? issue also happens when decorators are unevenly applied.

If your useEffect depends on props, context, or providers from a decorator, but your MDX story isn’t wrapped with that decorator, React won’t mount the component the same way meaning your useEffect just won’t run.

The best fix is to ensure decorators are applied globally or consistently in all stories. A quick check in React DevTools usually reveals whether your component is actually wrapped the way you think it is.