useEffect hook causing infinite renders in story

[manojsatya]

Describe the bug I was trying mock the fetch using useEffect within a story but the hooks renders infinitely

To Reproduce To help understand the problem I have pasted sample snippets to reproduce this problem

Expected behavior Should not render after initial render. In the browser (tested in Chrome and safari), same component doesn't re-render.

Screenshots

Code snippets

// Reducers
export const testInit = {
  list: [],
};

export const testReducer = (state, action) => {
  switch (action.type) {
    case 'FETCH_LIST': {
      const { list } = action.payload;
      return { ...state, list };
    }
    default:
      return state;
  }
};

// Store
import { createContext } from 'react';
const TestStore = createContext();
export { TestStore };

// Stories
import React, { useReducer, useContext, useEffect } from 'react';
import { testInit, testReducer } from 'reducers';
import { TestStore } from 'contexts/Store';

const mockList = [
  {
    name: 'name1',
    id: 1,
  },
  {
    name: 'name2',
    id: 2,
  },
];

const getMockedList = () =>
  new Promise((resolve) => {
    setTimeout(() => {
      resolve(mockList);
    }, 1000);
  });

export default {
  title: 'MockFetch',
  decorators: [
    (StoryFn) => {
      const [testState, dispatchTest] = useReducer(testReducer, testInit);
      return (
        <TestStore.Provider value={{ state: testState, dispatch: dispatchTest }}>
          <StoryFn />
        </TestStore.Provider>
      );
    },
  ],
};

export const MockFetch = () => {
  const Context = useContext(TestStore);

  const { dispatch } = Context;

  useEffect(() => {
    console.log('renders');
    getMockedList().then((response) => dispatch({ type: 'FETCH_LIST', payload: { list: response } }));
  }, []);
  return <p>Mock fetch</p>;
};

System:

Environment Info:

  System:
    OS: macOS 10.15.6
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
  Binaries:
    Node: 14.3.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.8 - ~/Documents/Backend/client/node_modules/.bin/npm
  Browsers:
    Chrome: 85.0.4183.83
    Firefox: 78.0.2
    Safari: 13.1.2
  npmPackages:
    @storybook/addon-actions: ^6.0.21 => 6.0.20 
    @storybook/addon-docs: ^6.0.21 => 6.0.20 
    @storybook/addon-links: ^6.0.21 => 6.0.20 
    @storybook/addon-storyshots: ^6.0.21 => 6.0.20 
    @storybook/addon-storysource: ^6.0.21 => 6.0.20 
    @storybook/addon-viewport: ^6.0.21 => 6.0.20 
    @storybook/addons: ^5.3.21 => 5.3.21 
    @storybook/preset-create-react-app: ^3.1.4 => 3.1.4 
    @storybook/react: ^6.0.21 => 6.0.20 
    @storybook/theming: ^5.3.21 => 5.3.21 

Additional context Not seeing this problem in the browser

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[Sawtaytoes]

I think your issue is because of adding a custom decorators to preview.js.

I created an issue on the topic: https://github.com/storybookjs/storybook/issues/14475

There's a possible fix here: https://github.com/storybookjs/storybook/pull/13049