JavaScript/React/useEffect/APIリクエストの重複を防ぐの変更点

追加された行はこの色です。
削除された行はこの色です。
JavaScript/React/useEffect/APIリクエストの重複を防ぐへ行く。
JavaScript/React/useEffect/APIリクエストの重複を防ぐの差分を削除

#author("2023-09-09T17:49:38+09:00","default:ryuichi","ryuichi")
#author("2023-09-09T17:50:20+09:00","default:ryuichi","ryuichi")
* APIリクエストの重複を防ぐ [#ze671910]



 import { useState, useEffect } from 'react';
 import { fetchBio } from './api.js';
 
 export default function Page() {
   const [person, setPerson] = useState('Alice');
   const [bio, setBio] = useState(null);
 
   useEffect(() => {
     let ignore = false;
     setBio(null);
     fetchBio(person).then(result => {
       if (!ignore) {
         setBio(result);
       }
     });
     return () => {
       ignore = true;
     };
   }, [person]);

- React公式より https://react.dev/reference/react/useEffect#fetching-data-with-effects
- 上のコードでuseEffect()のfetchBio()のAPIリクエストが終了する前にもう一度useEffect()が呼ばれたら、
- 1回目のfetchBio()のsetBio()は実行されず、
- 2回目のfetchBio()のsetBio()が実行される

** 参考 [#b415e8ae]
https://react.dev/reference/react/useEffect#fetching-data-with-effects