useEffectとtry-catchの例外処理

try-catchの中でuseEffectを使う

 const App = () => {
   try {
     useEffect(() => {
       throw new Error('My Error');
     });
   } catch (e) {
     console.log('DEBUG: ' + e.message);
   }
   return <div>My App</div>;
 };
  • 上の例ではcatchの中は実行されない
  • なぜなら、useEffectの中の処理はコンポーネントがレンダーされた後に実行されるから
  • つまり、Appコンポーネントがマウント（レンダー）されると、tryの中のuseEffectは実行されるが中の処理が実行されることなく（例外がthrowされることなく）、returnの行まで処理が進み、My Appがレンダーされる
  • レンダーされた後に、useEffectの中が実行されて例外がthrowされるが、この例外はcatchされない
トップ   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS