Failed to render with error "Rendered more hooks than during the previous render."

[Anxhul10]

current loki does not work with storybook 9 , i got the patch from #541
but getting this Failed to render with error "Rendered more hooks than during the previous render."

on my message and DataDisplay/AvailableIcon .

But loki without patch ( oblador's loki) was not throwing this error.

This behaviour seems to be in the storybook 9

[Anxhul10]

The issue was not caused by Loki or the patch itself — it turned out to be related to how I structured the Storybook story when rendering multiple components that use React hooks internally.

Initially, I had the following story setup:

export const ManyItems: StoryFn<typeof Component> = () => (
  <>
    {Array.from({ length: 100 }).map((_, index) => (
      <HookUsingComponent key={index} propA={index} propB={index % 3 !== 0} />
    ))}
  </>
);

This caused the error:

Error: Rendered more hooks than during the previous render.

Solution

When I changed the logic to generate the component list before the return statement, and then used a variable to return them, the error was resolved:

export const ManyItems: StoryFn<typeof Component> = () => {
  const items = Array.from({ length: 100 }).map((_, index) => (
    <HookUsingComponent key={index} propA={index} propB={index % 3 !== 0} />
  ));

  return <>{items}</>;
};