[解決済み] ReactのuseEffectでローディング関数を1回だけ呼び出す方法

質問

は useEffect Reactフックは、変更のたびに渡された関数を実行します。これを最適化することで、目的のプロパティが変更されたときだけ呼び出すようにすることができます。

から初期化関数を呼び出したい場合はどうすればよいですか？ componentDidMount で、変更時に再度呼び出さないようにするには？例えば、エンティティをロードしたいが、ロード関数がコンポーネントからのデータを必要としないとします。どのようにすれば useEffect フック

class MyComponent extends React.PureComponent {
    componentDidMount() {
        loadDataOnlyOnce();
    }
    render() { ... }
}

フックを使うと、こんな感じになります。

function MyComponent() {
    useEffect(() => {
        loadDataOnlyOnce(); // this will fire on every change :(
    }, [...???]);
    return (...);
}

解決方法は？

で指定された関数を実行するだけであれば、その関数は不要です。 useEffect 最初のレンダリングの後に、2 番目の引数として空の配列を渡すことができます。

function MyComponent() {
  useEffect(() => {
    loadDataOnlyOnce();
  }, []);

  return <div> {/* ... */} </div>;
}