당신은 (아마도) 그 useState + useEffect가 필요하지 않습니다

useState 및 useEffect 후크는 React 커뮤니티에 대한 신의 선물이었습니다. 그러나 다른 도구와 마찬가지로 이러한 도구도 쉽게 남용될 수 있습니다.

다음은 소프트웨어 개발자로 재직하는 동안 많이 보아온 오용의 예입니다.

const MyAwesomeComponent = () => {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState();
  // ---- PROBLEMATIC HOOKS: ----
  const [items, setItems] = useState([]);
  const [itemsLength, setItemsLength] = useState(0);

  useEffect(() => {
    someAsyncApiCall().then(res => {
      setData(res.data);
      setLoading(false);
    });
  }, [setData, setLoading]);

  // ---- UNNECESSARY USAGE OF HOOKS: ----
  // anytime data changes, update the items & the itemsLength
  useEffect(() => {
    setItems(data.items);
    setItemsLength(data.items.length || 0);
  }, [data, setItems, setItemsLength]);

  return (
    // ...JSX
  );
};

위의 사용 사례의 문제는 일부 중복 상태, 특히 items 및 itemsLength 를 추적하고 있다는 것입니다. 대신 이러한 데이터 조각은 data 에서 기능적으로 파생될 수 있습니다.

더 나은 방법:

다른 데이터에서 파생될 수 있는 모든 데이터는 순수 함수를 사용하여 추상화하고 다시 작성할 수 있습니다.

이것은 실제로 매우 간단합니다. 여기에 한 가지 예가 있습니다.

const getItems = (data) => {
  // I always like to protect against bad/unexpected data
  if (!data || !data.items) return [];

  return data.items;
};

const getItemsLength = (data) => {
  return getItems(data).length;
};

그런 다음 구성 요소는 다음과 같이 단순화됩니다.

const MyAwesomeComponent = () => {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState();

  // DERIVED DATA - no need to keep track using state:
  const items = getItems(data);
  const itemsLength = getItemsLength(data);

  useEffect(() => {
    someAsyncApiCall().then(res => {
      setData(res.data);
      setLoading(false);
    });
  }, [setData, setLoading]);

  return (
    // ...JSX
  );
};

테이크아웃

이 패턴의 멋진 점은 getItems와 getItemsLength가 주어진 입력에 대해 출력이 항상 동일하기 때문에 단위 테스트를 작성하기가 매우 쉽다는 것입니다.

위의 예는 약간 인위적인 것일 수도 있지만 이것은 확실히 지난 몇 년 동안 많은 코드베이스에서 본 패턴입니다.

앱이 확장됨에 따라 기술적 부채를 피하기 위해 가능한 모든 곳에서 복잡성을 줄이는 것이 중요합니다.

박사:

useState 및 useEffect 후크를 사용하는 것은 종종 불가피하지만 가능하다면 순수 함수를 사용하여 다른 데이터에서 파생될 수 있는 모든 데이터를 추상화하십시오. 그 혜택은 앞으로 엄청난 결과를 가져올 수 있습니다.

배너 사진Lautaro Andreani on Unsplash