web-dev-qa-db-ja.com

HoCでリアクションフックを使用する際の警告

コンポーネントにいくつかの追加機能を追加することになっている、より高次のコンポーネントを作成しました。ただし、このコンポーネントで反応フックを使用すると、次のeslint警告が表示されます。

Reactフック "React.useEffect"は、コールバック内で呼び出すことはできません。 ReactフックはReact関数コンポーネントまたはカスタムで呼び出す必要がありますReactフック関数。（react-hooks/rules -フック）

この警告が表示されるのはなぜですか？ HoCでフックを使用することは悪い習慣と考えられていますか？

最小限の例：

const Hello = props => <p>Greetings {props.name}</p>;

const Wrapper = Component => props => {
  React.useEffect(() => {
    // Do something here
  }, []);
  return <Component {...props} />;
};

export default Wrapper(Hello)

codesandbox： https://codesandbox.io/s/proud-tree-5kscc

reactjseslintreact-hooks
7
Stephan Olsen

変換

props => {
  React.useEffect(() => {
    // Do something here
  }, []);
  return <Component {...props} />;
};

関数へのHOC内（react-hooks/rules-of-hooksは、HOCによって返される矢印関数で使用されたときに表示した警告をスローしています）

だから、それを

const Wrapper = Component =>
  function Comp(props) {
    React.useEffect(() => {
      console.log("useEffect");
    }, []);
    return <Component {...props} />;
  };

エフェクトがトリガーされます。

これはcodesandboxの実際の例です

2
s14k51