web-dev-qa-db-ja.com

マウントでのuseEffectの実行を停止する

依存関係リストが変更されたときにのみuseEffectを実行し、コンポーネントがマウントされるたびに実行されるようにしたいのですが、マウント時に起動しない方法はありますか？

Reactに、再レンダリング間で特定の値が変更されていない場合、エフェクトの適用をスキップするように指示できます。

私は当初、それが後続のマウントで再レンダリングされないことを意味すると思っていましたが、 この質問はそれをクリアしました。

レコードのリストをマスター「ページ」（react-router）に表示しています。ユーザーは単一のレコードを選択して詳細ページに移動してからマスターページに戻ることができるため、マスターリストコンポーネントは完全にマウント解除されます/そのシナリオでマウントされます。そして、「マスターページ」を読み込むたびに、フェッチされているデータが表示されます。これは、依存関係の1つが変更されたときにのみ発生します。これらの依存関係とデータ自体はReduxに保存されるため、グローバルです。

UseEffectまたは別のフックを作成して、依存関係が変更されたときにのみ起動するようにできますか？

const {page, pageSize, search, sorts} = useSelector(getFilters);
const data = useSelector(getData);

useEffect(() => {

  console.log("fetching");
  dispatch(fetchData(page, pageSize, search, sorts));

}, [page, pageSize, search, sorts]);
reactjsreact-reduxreact-hooksuse-effect
5
user210757

すぐに構成することはできません。

しかし、一般的なパターンは次のようにisMountedフラグを使用することです：

const useFetchNotOnMount = () => {
  const { page, pageSize, search, sorts } = useSelector(getFilters);
  const dispatch = useDispatch();
  const data = useSelector(getData);

  const isMounted = useRef(false);

  useEffect(() => {
    if (isMounted.current) {
      console.log('fetching');
      dispatch(fetchData(page, pageSize, search, sorts));
    } else {
      isMounted.current = true;
    }
  }, [page, pageSize, search, sorts]);
};
5
Dennis Vash