React
Race Conditionについて
# Race Condition とは
useEffect内で非同期でsetStateを行う際にリクエストが完了した順にsetStateされるので、正しくない順序でsetStateされることをRace Conditionと言います。
上記コードにはfetchはsetTimeoutで最大で12秒間のランダムに遅延させています。 試しにfetch dataボタンを連打してみてください。
# 解決策（その1）
こちらの問題の解決の一つとして、boolaenのフラグを使用してトラッキングする方法があります。
上記、DataDisplayer.tsxのuseEffect内ではlet activeというフラグを持たせています。
ボタンを押下して、再レンダリングがおきる度にクリーンアップ関数で、フラグをfalseにしています。
そうする事で、setStateをスキップするする事ができ、結果的に最後に押下したボタンの結果が表示されます。
# 解決策（その2）
AbortContorollerを使用する方法もあります。
フラグを使った方法と同じように、setStateをスキップしているのですが、
それだけでなく、fetchの処理を中断する事ができるので、ユーザのデバイスに余計な負荷をかけずに済みます。