☰

ReactのuseEffectフックを初期レンダリング時に実行しないようにする 質問する

tag-icon • tag-icon javascript reactjs react-hooks
ReactのuseEffectフックを初期レンダリング時に実行しないようにする 質問する

ドキュメントによると:

componentDidUpdate()更新が発生した直後に呼び出されます。このメソッドは最初のレンダリングでは呼び出されません。

新しいuseEffect()フックを使用して をシミュレートできますcomponentDidUpdate()が、初回であってもレンダリングのたびに が実行されているようですuseEffect()。最初のレンダリングで実行されないようにするにはどうすればよいですか?

以下の例でわかるように、componentDidUpdateFunctionは初期レンダリング時に印刷されますが、componentDidUpdateClass初期レンダリング時には印刷されませんでした。

function ComponentDidUpdateFunction() {
  const [count, setCount] = React.useState(0);
  React.useEffect(() => {
    console.log("componentDidUpdateFunction");
  });

  return (
    <div>
      <p>componentDidUpdateFunction: {count} times</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Click Me
      </button>
    </div>
  );
}

class ComponentDidUpdateClass extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  componentDidUpdate() {
    console.log("componentDidUpdateClass");
  }

  render() {
    return (
      <div>
        <p>componentDidUpdateClass: {this.state.count} times</p>
        <button
          onClick={() => {
            this.setState({ count: this.state.count + 1 });
          }}
        >
          Click Me
        </button>
      </div>
    );
  }
}

ReactDOM.render(
  <div>
    <ComponentDidUpdateFunction />
    <ComponentDidUpdateClass />
  </div>,
  document.querySelector("#app")
);
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<div id="app"></div>

ベストアンサー1

フックを使用してuseRef任意の可変値を保存できますなので、これを使用して、関数が初めてuseEffect実行されるかどうかを追跡できます。

同じフェーズでエフェクトを実行したい場合はcomponentDidUpdate、次のようにします。useLayoutEffectその代わり。

例

const { useState, useRef, useLayoutEffect } = React;

function ComponentDidUpdateFunction() {
  const [count, setCount] = useState(0);

  const firstUpdate = useRef(true);
  useLayoutEffect(() => {
    if (firstUpdate.current) {
      firstUpdate.current = false;
      return;
    }

    console.log("componentDidUpdateFunction");
  });

  return (
    <div>
      <p>componentDidUpdateFunction: {count} times</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Click Me
      </button>
    </div>
  );
}

ReactDOM.render(
  <ComponentDidUpdateFunction />,
  document.getElementById("app")
);
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<div id="app"></div>

おすすめ記事