APIリクエストの重複を防ぐ

 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()が実行される

参考

https://react.dev/reference/react/useEffect#fetching-data-with-effects