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されない

正しい例

 const App = () => {
   try {
     useEffect(() => {
       try {
         throw new Error('My Error');
       } catch (e) {
         console.log('DEBUG2: ' + e.message);
       }
     });
   } catch (e) {
     console.log('DEBUG: ' + e.message);
   }
   return <div>My App</div>;
 };

• このように書くとuseEffectの中の例外がcatchされて DEBUG2: My Error のログを確認できる