useEffect 바로 쓰기

// 문제: options는 렌더링마다 새 객체입니다
const options = { status: "PAID" };

useEffect(() => {
  fetchOrders(options).then(setOrders);
}, [options]);   // 매번 다른 값으로 인식 -> 계속 실행

// 해결 1: 원시값만 의존성에 둡니다
const status = "PAID";
useEffect(() => {
  fetchOrders({ status }).then(setOrders);
}, [status]);

// 해결 2: 객체 생성을 이펙트 안으로 옮깁니다
useEffect(() => {
  const options = { status: "PAID" };
  fetchOrders(options).then(setOrders);
}, []);

의존성 문제 대부분은 객체와 함수를 의존성에 넣으면서 생깁니다. 가능하면 원시값 단위로 쪼개서 넣습니다.

useEffect(() => {
  const handleResize = () => setWidth(window.innerWidth);
  window.addEventListener("resize", handleResize);

  return () => {
    window.removeEventListener("resize", handleResize);
  };
}, []);

useEffect(() => {
  const timer = setInterval(tick, 1000);
  return () => clearInterval(timer);
}, []);

// 문제: 빠르게 검색어를 바꾸면 이전 요청 결과가 나중에 도착해
// 최신 결과를 덮어쓸 수 있습니다
useEffect(() => {
  let ignore = false;

  fetchOrders(keyword).then((data) => {
    if (!ignore) {
      setOrders(data);   // 최신 요청의 결과만 반영합니다
    }
  });

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

이 문제를 매번 직접 처리하는 것은 번거롭습니다. 서버 데이터 전용 도구를 쓰는 이유 중 하나이며 Part 9에서 다룹니다.

// 불필요한 이펙트: 렌더링이 두 번 일어납니다
const [orders, setOrders] = useState([]);
const [visibleOrders, setVisibleOrders] = useState([]);

useEffect(() => {
  setVisibleOrders(orders.filter((o) => o.status === filter));
}, [orders, filter]);

// 수정: 렌더링 중에 계산합니다
const [orders, setOrders] = useState([]);
const visibleOrders = orders.filter((o) => o.status === filter);

Part 3에서 다룬 '계산 가능한 값을 state로 두지 않는다'와 같은 원칙입니다. 이펙트로 상태를 만들어 내는 코드를 보면 대부분 이 경우입니다.