☰

React useEffect で読み込み関数を 1 回だけ呼び出す方法 質問する

tag-icon • tag-icon javascript reactjs react-hooks use-effect
React useEffect で読み込み関数を 1 回だけ呼び出す方法 質問する

の使用効果React フックは、変更のたびに渡された関数を実行します。これは、必要なプロパティが変更された場合にのみ呼び出されるように最適化できます。

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

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

フックを使用すると次のようになります。

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

ベストアンサー1

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

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

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

おすすめ記事