서버 데이터와 비동기

// 처음: 간단해 보입니다
const [orders, setOrders] = useState([]);

useEffect(() => {
  fetchOrders().then(setOrders);
}, []);

// 실제로 필요한 것들
const [orders, setOrders] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
  let ignore = false;
  setIsLoading(true);
  setError(null);

  fetchOrders(keyword)
    .then((data) => { if (!ignore) setOrders(data); })
    .catch((err) => { if (!ignore) setError(err); })
    .finally(() => { if (!ignore) setIsLoading(false); });

  return () => { ignore = true; };
}, [keyword]);

여기까지 와도 캐시, 재요청, 중복 요청 제거, 화면 복귀 시 갱신은 아직 없습니다. 화면마다 이 코드를 반복하게 되는 것이 진짜 문제입니다.