useEffect 덜어내기

최근 리팩토링 도중 useEffect가 남발하는 코드를 보여 이걸 해결해 나가아가는 과정을 글로 적어 보려고 합니다.

1. 먼저 예제를 보자

아래 예제에서 item, filter 둘 중 하나의 데이터만 변경되더라도 ui가 업데이트 되어야 하기 때문에 visibleItems가 변경되어야 한다. 그래서 useEffect를 통해 ui 관련 state를 업데이트 시켰었다.

function ItemList({ item, filter }) {
  const [newItem, setNewItem] = useState('');
  const [visibleItems, setVisibleItems] = useState([]);
  
  useEffect(() => {
    setVisibleItems(getFilteredItems(item, filter));
  }, [item, filter]);

}

하지만 이렇게 되면 불필요한 리렌더링을 발생시킨다. 굳이 setVisibleItems을 useEffect에 호출 할 필요가 없습니다.

2. 리팩토링을 해보자

function ItemList({ item, filter }) {
  const [newItem, setNewItem] = useState('');
  
  const visibleItems = getFilteredItems(item, filter));
}

이렇게 리팩토링이 가능하다.
최신 데이터가 반영이 안되는게 아니라는 의문을 가질수도 있지만,
컴포넌트가 리렌더링 될 때마다 ui가 의존하고 있는 visibleItems가 업데이트 되기 때문에 ui는 최신 데이터 반영을 보장할 수 있습니다.

3. 렌더링 성능을 높여보자

만약 getFilteredItems가 비싼 연산이면 어떨까요?

import { useMemo,useState } from "react"

function ItemList({ item, filter }) {
  const [newItem, setNewItem] = useState('');
  
  const visibleItems = useMemo(()=> getFilteredItems(item, filter),[item,filter]);
}

이럴때는 useMemo를 사용해 연산한 값을 재사용하여 성능 최적화를 할수 있습니다.

후기

최근 성능 최적화에 대한 중요성을 느끼게 되었고 작은것 하나하나부터 습관을 들여야겠다.

Reference

https://ko.reactjs.org/docs/hooks-reference.html#usememo
https://gusrb3164.github.io/web/2021/12/29/less-use-useeffect/