React: React Hook useEffectに依存関係がありません： 'xxx'？

これはあなたの質問に答えるはずです：

https://reactjs.org/docs/hooks-faq.html#is -it-safe-to-omit-functions-from-the-list-of-dependencies

これはあなたの質問に答えるはずです：

https://reactjs.org/docs/hooks-faq.html#is -it-safe-to-omit-functions-from-the-list-of-dependencies

@gaearon
私の問題を解決しませんでした、私の問題はより特別です、私の実行functionsetElePositionArrはcomponentDidMountとhandleClickで起動したいのですが、ReactHook関数が私の要件を満たしていないので警告が表示されます。

私の質問は：ReactフックはuseEffectおよび関数コンポーネントの関数をsetState操作に呼び出すことができませんか？

2番目の質問に答えられるように、開いたままにしておきます。

同じESLint警告が表示されますが、私の場合、コンポーネントがマウントされたときに非同期呼び出しを行いたいと思います。

const ManageTagsModalBody: React.FC<IProps> = ({ children, getTags }) => {
  useEffect(() => {
    getTags();
  }, []);

  return <div>{children}</div>;
};

Line 12:  React Hook useEffect has a missing dependency: 'getTags'. Either include it or remove the dependency array. If 'getTags' changes too often, find the parent component that defines it and wrap that definition in useCallback  react-hooks/exhaustive-deps 

ManageTagsModalBodyはデータに依存せず、コンポーネントがレンダリングされるたびにデータをロードするためのラッパーとしてのみ使用されます。 childrenコンポーネントがgetTagsがフェッチしたデータを使用していることは注目に値します。

依存関係のリストに何を追加すればよいかわかりません。

説明にも興味があります。
React Hook useEffectには、依存関係がありません： 'dispatch'。

  useEffect(() => {
    axios.get('http://localhost:8000/api/future-registrations')
      .then((result) => {
        dispatch(initRegistrationsAction(result.data));
      });
  }, []);

ここで同じ問題。 奇妙なルール。

こっちも一緒。 https://github.com/facebook/react/issues/15865#issuecomment -506503377のように簡単です：

  useEffect(() => {
    dispatch(fetchPosts());
  }, []);

この警告を抑制する方法はありますか？

警告メッセージで示唆されているように、あなたはそのようにすることができます

const initFetch = useCallback(() => {
    dispatch(fetchPosts());
  }, [dispatch]);

  useEffect(() => {
    initFetch();
  }, [initFetch]);

@faywayの場合、initFetchとディスパッチ値が変更されると、useEffectのコールバックが実行されます。
彼は一度コールバックを実行したい

@shkyung私の場合、 initFetchは原因（ストア）を変更しません。ディスパッチも変更しません。

多分それはこのようにすることができます

const setCenterPosition = useRef(null)
setCenterPosition.current = useCallback( ()=>{} ,[deps])

effect(()=>{ setCenterPosition.current() },[setCenterPosition,otherDeps])

この変更は、率直に言って、少しばかげて逆効果のようです。 むしろ、以前のバージョンにロールバックして、これを考えさせてください。

同じ問題があります。 componentDidMountでのみフェッチを起動したい。 配列に依存関係を追加すると、エンドポイントに繰り返しヒットします。

React Hook useEffectには、依存関係がありません： 'dispatch'。

const [state, dispatch] = useReducer(reducer, initialState);
const { count, step } = state;

useEffect(() => {
  const id = setInterval(() => {
    dispatch({ type: 'tick' }); // Instead of setCount(c => c + step);
  }, 1000);
  return () => clearInterval(id);
}, [dispatch]);

これは非常に一般的なユースケースのようです。現在のプロジェクトで遭遇したものです。

エフェクトフックを1回だけ実行したいのですが、起動時の状態だけを気にしますが、依存関係があります。 現在使用中
// eslint-disable-next-line react-hooks/exhaustive-deps 、
リンティングルールをオフにしますが、この場合はオフにする必要がないのがいいでしょう。

これは非常に一般的なユースケースのようです。現在のプロジェクトで遭遇したものです。

エフェクトフックを1回だけ実行したいのですが、起動時の状態だけを気にしますが、依存関係があります。 現在使用中
// eslint-disable-next-line react-hooks/exhaustive-deps 、
リンティングルールをオフにしますが、この場合はオフにする必要がないのがいいでしょう。

Lintを閉じることは一時的な解決策にすぎず、この問題の鍵はフックを理解するのに十分ではありません。

ここで同じ問題。 useEffect（）内で関数を1回起動したかったのですが、2番目のパラメーターとして[]を指定すると、必要な処理が実行されますが、この警告が表示され続けます。

新しいプロジェクトで今日まで見たことがないので、このような奇妙な警告。 これは、コンポーネントがマウントされたときに1回だけ呼び出されるというユースケースを台無しにします。 lint警告を無視する以外に、回避策はないようです。

ここに2セント入れたいのですが。 特に、Axiosを使用してネットワークリクエストをキャンセルする場合。 必要に応じて別の問題を作成しますが、この問題が直接自分に影響を与えていると感じました。 だから私のuseApiフックは次のとおりです-

import axios, { AxiosInstance } from "axios";
import axiosRetry from "axios-retry";
import { FetchEnv } from "../../utilities";
import { useStorage } from "../useStorage";

export const useApi = ({ isAuth = false, retries = 3 } = {}) => {
  const cancelToken = axios.CancelToken.source();
  const { getItem } = useStorage();

  const getBaseUrl = () => {
    return FetchEnv({
      defaultValue: "http://api.example.com",
      key: "API_URI"
    });
  };

  const authorizedClient = (client: AxiosInstance) => {
    const session = getItem("SESSION", "sessionStorage");
    const hasAccessToken = Boolean(session.tokens.accessToken);

    if (isAuth && !hasAccessToken) {
      console.error("No access token found to initiate authorized request.");
      return client;
    } else {
      client.defaults.headers[
        "Authorization"
      ] = `Bearer ${session.tokens.accessToken}`;
      return client;
    }
  };

  const buildFetch = (): AxiosInstance => {
    const client = axios.create({
      baseURL: getBaseUrl(),
      cancelToken: cancelToken.token
    });
    axiosRetry(client, { retries });
    return isAuth ? authorizedClient(client) : client;
  };

  return {
    cancelRequest: cancelToken.cancel,
    fetch: buildFetch()
  };
};

コンポーネント内でこのフックを使用するには、以下のように定義するだけで、マウント時、useEffect内、イベントハンドラーの一部などのいずれかで、認証済みと未認証の両方の呼び出しを行うことができます。cancelRequestは、生成された一意のキャンセルトークンです。これは、このコンポーネントに関連する「フェッチ」axiosインスタンスとペアになっています。

const { cancelRequest, fetch } = useApi();

何らかの理由でこのコンポーネントがマウント解除された場合、以下が呼び出されます。

  useEffect(() => {
    return () => {
      cancelRequest("Auth network request cancelled");
    };
  }, []);

現在、完全に機能しています。 ただし、警告が適用されると（cancelRequestをuseEffect依存関係として配置）、fetchメソッドが呼び出されるとすぐにネットワーク要求がキャンセルされます。 任意のアドバイスをいただければ幸いですが、現時点での唯一の解決策は、ts-lintでこれを無効にすることです...

ここでの問題は、フックについての考え方かもしれないと思います。 @luojinghuiのコメントは、これには目に見える以上のものがあることを示唆しています。 おそらく私たちは別の考え方をする必要がありますか？ いくつかのリファクタリングを使用して、フックの1つでこの問題を取り除くことができました。 その結果、コードがより明確になります。

このすぐ上の@ Stoner609の例では、タイミングコードをuseCallbackフックに含める必要があるのではないかと思いました。 ただし、依存関係として関数（静的である必要があります）を持つことはまだ奇妙です。

この場合はある種の例外だと思います

コンポーネントのロード時に関数を1回だけ実行し、パラメーターを取り込む場合は、useRefを使用して警告を回避できます。 このようなものが機能します：

  const InitialPropA= useRef(propA);
  useEffect(() => {
    myFunction(InitialPropA.current);
  }, [myFunction, InitialPropA]);

警告メッセージで示唆されているように、あなたはそのようにすることができます

const initFetch = useCallback(() => {
    dispatch(fetchPosts());
  }, [dispatch]);

  useEffect(() => {
    initFetch();
  }, [initFetch]);

私がこの機知に富んだ返信を気に入っている限り、これは通常私のコードで起こることです。
ディスパッチが行方不明になるという厄介な警告をすべて受けたくありません。

その謎の配列で何が、なぜ起こるのかを正確に知りたいです:)

警告メッセージで示唆されているように、あなたはそのようにすることができます

const initFetch = useCallback(() => {
    dispatch(fetchPosts());
  }, [dispatch]);

  useEffect(() => {
    initFetch();
  }, [initFetch]);

これはまた、APIのようなものの場合にメモリリークを引き起こす可能性があり、無限ループで呼び出しを行います。

本当にこれを修正する必要があります。 useEffect()内で関数を一度だけ起動したい場合は、エラーが発生し続け、解決方法がわかりません。

同じエラーに直面している-

React Hook useEffectには、依存関係がありません： 'props'。 しかし、「小道具」ので好ましい修正がuseEffectコールの「小道具」オブジェクトの外側をdestructureとuseEffect内のそれらの特定の小道具反応-フック/網羅-DEPSを参照することで、任意のときにプロペラの変更を変更します

コード-

  useEffect(() => {
    props.dispatch(searchMediaAction("rain"));
  }, []);

@luojinghui ：lintエラーを解決したかどうか教えてください

同じエラー

同じ問題。 componentDidMountの動作を模倣したい。 警告には興味がありません。 何かが変わったときにフックを再実行したくない

useEffect()の2番目の引数が[]場合、この警告を表示しないことを提案します。その場合、開発者はこの効果が1回だけ実行されることを知っているため、使用したい初期のprop値であり、後続のレンダリングでpropが変更されてもかまいません。

ケース1：
初期化時、および指定されたパラメーターの値が変更されたとき（lint警告が示すように）に関数を実行する場合は、それらのパラメーターを配列に渡します。

ケース2：
関数を初期化時に1回だけ実行する場合は、空の配列を使用して、効果が1回だけトリガーされるようにします。

ケース2では、基本的にReactHookのドキュメント仕様に従ってcomponentDidMountイベントをリッスンしています。 lintエラーは、ReactHookのドキュメントおよび開発者の期待と一致していません。

なぜこれが閉鎖されているのですか？

解決策はありますか？

@kennylbj

さまざまな提案を試した後、これが最終的に私にとってうまくいったことです。 初心者のためにコードを比較的単純に保つように努めながら、eslint-disableを使用しないことを好みました。 このアプローチにより、useCallback内でディスパッチ関数を呼び出さずにディスパッチ関数を渡すことができます。 お役に立てれば。

`` `javascript
// ...関数コンポーネント内
const {dispatchFunc} = customHook（）;
const memoizeDispatchFunc = useCallback（dispatchFunc、[]）;

useEffect（（）=> {
memoizeDispatchFunc（）;
}、[memoizeDispatchFunc]）;
「」

空の配列を削除できますか？ そうすることはうまくいくようです（コードはまだ期待どおりに実行され、警告は消えます）が、そのようにすべきではない理由があるかどうかはわかりません。

useEffect(()=>{ myFunc(); } )

@robthedevGreateソリューション。
reduxを使用すると、コードを単純化することもできます。

const dispatch = useDispatch();

// redux can guarantee that the dispatch function will not change between renders.
// so we don't need to wrap it with useCallback for now.
useEffect(() => {
  dispatch(actions());
}, [dispatch]);

ダンのこの記事は私を大いに助けてくれます。

この問題の解決策は、依存関係を削除することではありません。代わりに、コンポーネントの外部で小道具や状態を必要としない関数を持ち上げるか、定義されているuseCallbackにラップすることができます。

@kennylbj

さまざまな提案を試した後、これが最終的に私にとってうまくいったことです。 初心者のためにコードを比較的単純に保つように努めながら、eslint-disableを使用しないことを好みました。 このアプローチにより、useCallback内でディスパッチ関数を呼び出さずにディスパッチ関数を渡すことができます。 お役に立てれば。

// ... inside function component
const { dispatchFunc } = customHook();
const memoizeDispatchFunc = useCallback(dispatchFunc, []);

useEffect(() => {
  memoizeDispatchFunc();
}, [memoizeDispatchFunc]);

私の場合、上記の例は機能しません。

このエラーを取得します：
TypeError: Cannot destructure property 'dispatchFunc' of 'componentDidMount(...)' as it is undefined.

@ react-team：ハッピーボイラープレートコード。 :)論理的で、もう一度読みやすくすることはできますか...イベントは簡単に使用できる必要があります...関数を呼び出すためだけに5行以上のロジックを記述する必要はありません。

私の場合、エラーは次の状況で発生しました。

  useEffect(() => {
    props.getTasks()
  }, [])

私はそれを次のように修正しました：

const { getTasks } = props
  useEffect(() => {
    getTasks()
  }, [getTasks])

何千人もの開発者がこれと同じ問題に直面し、React開発チームがスレッドを閉じて全員を無視した場合：

私の問題はこのスレッドの他の問題とは異なっていたので、他の貧しい魂がウサギの穴に落ちた場合に備えて共有します私はちょうど1時間半ダウンしています

function hydrate( _state, _errors=false) {
    console.log('hydrate()');
    setState({...state,..._state});
    if(_errors){
        setErrors({...errors,..._errors});
    }
}

ユーザーは、次のように状態を調整するために、これをuseEffect()で使用する必要があります。

useEffect(()=>{
    hydrate({
        name:'Garrett',
        email:'[email protected]',
        newsletter: 'yes'
    });
},[hydrate]); //unfortunately, this causes an infinite render, because hydrate will always change

だからこれを解決するために、私はハイドレート関数をuseCallback()でラップするように変更しました、今ではすべてのレンダリングで変更されていません（私は推測します）、そしておそらくこれはパフォーマンスにとってより良いです、それが本当なら私はカスタムフックから返されたすべてのヘルパー関数にこれを実装します。

const hydrate = useCallback(( _state, _errors=false )=> {
    console.log('hydrate()');
    setState({...state,..._state});
    if(_errors){
        setErrors({...errors,..._errors});
    }
},[]);

誰かがこれが本当かどうかを確認できますか？ useCallbackはレンダリングでhydrateが変更されるのを防いでいるので、パフォーマンスを向上させるためにそのようなすべての関数をuseCallbackでラップする方がおそらく良いでしょう？

redux can guarantee that the dispatch function will not change between renders.

よろしいですか？
それがそう言っているドキュメントへのリンクをお願いします。

詳細についてはhttps://overreacted.io/a-complete-guide-to-useeffect/#decouple-updates-from-actionsを確認するか、実装の詳細についてはuseEffectソースコードを確認してください。

ここで私はダンが言ったことを参照します：

答えは、Reactは、ディスパッチ関数がコンポーネントの存続期間を通じて一定であることを保証するということです。 したがって、上記の例では、間隔を再サブスクライブする必要はありません。

ディスパッチ機能が一定であることを保証します

かっこいい、ありがとう！

何千人もの開発者がこれと同じ問題に直面し、React開発チームがスレッドを閉じて全員を無視した場合：

ほぼこれ。 ここで私はフックを試してみましたが、この警告が表示されましたが、これは意味がなく、公式ドキュメントのいずれにも含まれていません。 「このエフェクトを1回だけ実行してください」などの基本的なユースケースでこれほど多くの問題が発生した場合、フックが本格的な作業の準備ができているかどうか本当に疑問に思います。

まあ、スレッドが閉じているという事実を除けば、言うことはあまりありません。

同じ問題に直面しています！

解決、
（それは私のために働いた）：

const onInit = function(){ 
    console.log('initiated', Date.now());
}

useEffect(onInit, []);

リンティング側で問題を修正したいのですが、ちょっと...

@ ra30r素晴らしい回避策ですが、副作用が発生する可能性があるかどうか疑問に思っていますか？ ：考え：

まだ何もありませんか？ 😔

Udemyのコースからフォーム検証エラーをトリガーすることを学んだケースがありました。

これにより、依存関係の欠落した「ディスパッチ」がトリガーされましたが、それでも機能しました。

  useEffect(() => {
    if (state.business_name.value) {
      const delay = setTimeout(() => dispatch({ type: "businessNameAfterDelay" }), 1000)
      return () => clearTimeout(delay)
    }
  }, [state.business_name.value])

@ ra30rの例を使用して、エラーをクリアするためにこれに変更しました。

  const businessNameAfterDelay = function () {
    if (state.business_name.value) {
      const delay = setTimeout(() => dispatch({ type: "businessNameAfterDelay" }), 1000)
      return () => clearTimeout(delay)
    }
  }

  useEffect(businessNameAfterDelay, [state.business_name.value])

なぜこれが閉鎖されているのですか？

私は答えがどこかに与えられたと信じています..笑..とにかく..解決策は次のようにすることです：
useEffect(() => { dispatch(); }, [dispatch]);

お役に立てれば！！

なぜこれが閉鎖されているのですか？

私は答えがどこかに与えられたと信じています..笑..とにかく..解決策は次のようにすることです：
useEffect(() => { dispatch(); }, [dispatch]);

お役に立てれば！！

はい、その回避策は機能します、 @ kennylbjは少し前にここで言いました。
なぜ問題は解決されたのですか？ ここにもそれについてのミームがあります... xd

私の問題はこのようなものです（サンプルコード）：

  const [userStatus, setUserStatus]: any = React.useState([]);
  const [userData, setUserData]: any = React.useState([]);

  useEffect(() => {
    setUserStatus(!userStatus);
    return () => {};
  }, [userData]);

したがって、コードのように、 userData変更があったときにuserStatus値を変更します。この場合、 userStatus値を確認する場合は、それをdepsに追加します。

  const [userStatus, setUserStatus]: any = React.useState([]);
  const [userData, setUserData]: any = React.useState([]);

  useEffect(() => {
    setUserStatus(!userStatus);
    return () => {};
  }, [userData, userStatus]);

このシナリオでは、無限ループになります

@spmsupun
useStateのコールバックスタイルを使用して、useEffectの依存関係配列にuserStatus変数が導入されないようにすることができます。

 useEffect(() => {
    setUserStatus(prevState => !prevState);
    return () => {};
  }, [userData]);

そして、これはいわゆる機能更新です。

解決策->依存関係のために最後にディスパッチを追加するだけ
React Hook useEffectには、依存関係がありません： 'dispatch'。

  useEffect(() => {
    axios.get('http://localhost:8000/api/future-registrations')
      .then((result) => {
        dispatch(initRegistrationsAction(result.data));
      });
**  }, [dispatch]);**

@kennylbjこれは、1つの状態を扱う場合に適しています。私の実際のシナリオは、小道具を使用する場合です。 親から小道具を送信していますが、2回変更されるため、usereffectは2回呼び出しますが、その中でリスナーを実行していると、2回リッスンします。

@spmsupunしかし、依存関係配列の変数が変更されるたびに、前のリスナーの登録を解除して新しいリスナーを登録するのはごく普通のことだと思います（たとえば、propsのuserIdが変更された場合、リスナーも変更する必要がありました）。 そして、この振る舞いは、reactが期待するものです。

それでもリスナーを2回呼び出させたくない場合は、渡される小道具にもっと注意を払い、レンダリング中に変更されないようにする必要があると思います。

@kennylbjよく私は登録を解除しますが、それでもそれは良い習慣ではありません

リスナークラスからこれを処理する必要があると思いますが、

ソケットIDが同じであっても、リスナーが2回呼び出されているようです。

次の状況が発生した場合、これは発生しないと思います。

ts // call useEffect if and only if sockeId changed. useEffect(() => { const unregister = register(socketId); return () => unregister(socketId); }, [socketId])

異なるレンダリング中に変更された依存関係配列の他の変数があり、この動作を引き起こしますか？

ええ3つの依存関係ですが、私はそれをいくつかの異なる方法で理解しています

ぴえん

警告メッセージで示唆されているように、あなたはそのようにすることができます

const initFetch = useCallback(() => {
    dispatch(fetchPosts());
  }, [dispatch]);

  useEffect(() => {
    initFetch();
  }, [initFetch]);

うわー、非常感谢你🙏

🚀以下のコードスニペットは私にとって本当にうまく機能します

コンポーネントにマウントしました

const onInit = () => getUsers()
useEffect(onInit, [])

パラメータ変更時

const onInit = () => getUser(id)
useEffect(onInit, [id])

最善の回避策：react-hooks / exhaustive-deps： "off"
このeslint機能が役立つとは思っていません。 これまで。

🚀以下のコードスニペットは私にとって本当にうまく機能します

コンポーネントにマウントしました

const onInit = () => getUsers()
useEffect(onInit, [])

パラメータ変更時

const onInit = () => getUser(id)
useEffect(onInit, [id])

よくやった。

私は、reactドキュメントが@luojinghuiのユースケースを完全にカバーしているとは思いません。これも私が持っているものと同じです。

特定の関数を呼び出す方法は複数あります。つまり、 setCenterPosition()です。 状態の変化（ useEffectを介して接続）、クリックハンドラー（直接呼び出される）などを監視することで呼び出すことができます。

反応ドキュメントは示唆しています

これが、通常、その内部のエフェクトに必要な関数を宣言したい理由

しかし、通常、実際の例では、クラスコンポーネント（ this.setCenterPosition(...) ）のインスタンスメソッドで通常行うように関数を再利用する必要があり、フックが実際に機能いっぱいに適しているかどうか疑問に思い始めています。複雑なコンポーネント。

実際にはわかりませんが、おそらく解決策はuseCallback

const setCenterPosition = useCallback(() => {
  ...
}, [Stage, elePositionArr, setElePositionArr]);

useEffect() => {
  ...
}, [stageRef, Stage, currentIndex, setCenterPosition]);

...しかし、それは私にはちょっとひどいです、そして私はもっときれいな方法があることを望んでいます。 たぶん@gaearonは確認できますか？

同じ問題に直面している私はuseEffect // eslint-disable-next-line react-hooks/exhaustive-depsの終わりにこの行を使用して警告buを無効にすることができますが、私はそれを使いたくありません

これが私のコードです

`const [items、setItems] = useState（[
{{
名前：「テスト1」、
id：1
}、
{{
名前：「テスト2」、
id：2
}、
{{
名前：「テスト3」、
id：3
}、
{{
名前：「テスト4」、
id：4
}、
{{
名前：「テスト5」、
id：5
}
]）;

useEffect（（）=> {
const intervalId = setInterval（（）=> {
setItems（shuffleArray（items））;
}、1000）;
return（）=> {
clearInterval（intervalId）;
};
// eslint-disable-next-line react-hooks / exhaustive-deps
}、[]）;

この問題に対する私の解決策は、これらの場合にReactフックの使用を単に停止することでした。 コンポーネントにcomponentDidMountような多くの状態ロジックとライフサイクルイベントが必要な場合は、クラスコンポーネントを使用するだけで、頭痛の種を減らすことができます。 クラスコンポーネントは完全に問題ありません。このスレッドで何かが証明された場合、複雑な状態ロジックまたはライフサイクルイベントが必要な場合、React Hooksはそれらを完全に置き換える準備ができていません（これらのほとんどの場合、利点をもたらすこともありません-あなたのコードは_本当に_ですReact Hooksを使用した方がはるかに優れていますか？）

私自身のReactHooksの使用を、ブールフラグなどを設定するためのuseStateような単純なものに制限します。 コンポーネントが複雑になり、 useEffectが必要になった場合は、クラスコンポーネントの方が適している可能性があることを示す兆候として扱います。

（わかりやすくするために編集）。

これは今のところ私の解決策です：

const mounted = () => {
  dispatch(something());
}

useEffect(mounted, []);

ありがとう@ ra30r react / issues / 15865＃issuecomment-651254164