環境

Storybook 7.5.3
React 18.2.0
eslint 8.53.0

エラー内容

Storybookでplay関数を使用してインタラクションテストを書く際に、render内でuseStateを使用するコードを書いたら、ESLintのreact-hooks/rules-of-hooksに関するエラーが出た。

React Hook "React.useState" is called in function "render" that is neither a React function component nor a custom React Hook function. 
React component names must start with an uppercase letter. React Hook names must start with the word "use".eslint

発生したときのStorybookのコードは以下の通り。


export const ClickTest: Story = {
    render: () => {
        // ESLintのエラー
        const [open, setOpen] = React.useState(false)
        ...
    },
    play: async ({ canvasElement }) => {
    ....
    },
};

解決方法

以下のGitHubのissueを参考に、アロー関数からfunctionに書き換えるとESLintのエラーが解消。

export const ClickTest: Story = {
    render: function Render() {
        const [open, setOpen] = React.useState(false)
        ...
    },
    play: async ({ canvasElement }) => {
    ....
    },
};