useEffect を使用して非同期タスクをクリーンかつ安全に実行する

APIを呼び出してタイムアウト遅延を設定することから、React フックを使用するときにそれを適切に行う方法をすでに疑問に思っていると思いますuseEffect。それがまだぼやけているように聞こえる場合は、この記事が役に立ちます。そうでない場合は、少なくとも仕事を成し遂げるための別のアプローチを学ぶか、仕事をしているときに自信を持てるようになるかもしれません.

安全できれいに行うための3つの方法を紹介します。しかし、最初に、してはいけないことを示したいと思います。

してはいけないこと❌

非同期タスクを useEffect で直接実行しないでください。代わりに、常に非同期タスクを関数にラップし、useEffect からのみ呼び出します。

してはいけないことの例を次に示します。

useEffect(async () => {
   await getData();
},[]);

また、この BAD の例が示すように実行すると、React エラーが発生します。

効果のコールバックは、競合状態を防ぐために同期されます。

よし、これで安心してグッドプラクティスに進むことができます ⬇️

1. フック内で async 関数を定義する

非同期タスクを実行する場合、たとえば API からデータを取得し、コンポーネントの読み込み状態を更新する場合は、フック内で関数を定義して呼び出す必要があります。

useEffect(() => {
async function getData() {
    setLoading(false);
    const reponse = await myApi.getSomeGoodData()
    setLoading(true);
   }
getData();
},[]);

2. フックの外で async 関数を定義する

定義した非同期関数を再利用する場合は、関数コンポーネント本体で定義し、useCallbackフックでラップすることをお勧めします。見てみな：

const getData = useCallback(() => {
    setLoading(false);
    const reponse = await myApi.getSomeGoodData()
    setLoading(true);
}, [])
useEffect(() => {
getData()
},[getData])

3. 間隔またはタイムアウトの設定

前の 2 つの例は、主にデータの取得とコンポーネントの状態の更新に焦点を当てていました。これは、間隔またはタイムアウトを設定している useEffect 内の非同期タスクの一般的なシナリオも示すことです。

そのための秘訣は、で設定されたタイムアウトと間隔を常にクリアするuseEffectことです。

タイムアウトの設定

useEffect(() => {
const timeout = setTimeout(() => {
     // do something
   }, 100)
return () => {
      clearTimeout(timeout);
   }
},[])

useEffect(() => {
const interval = setInterval(() => {
       // do something
  }, 100)
return () => {
      clearInterval(interval);
  }
},[])

上記の例は、React の開発中に遭遇する可能性のある非同期の状況の 99.99% をカバーします。効果の依存関係に注意することを忘れないでください。以下の例であなたのケースが見つからない場合は、コメントをドロップしてください。調査します。

読んでくれてありがとう

—-フェルナンド・アボラフィオ