useSelector에서 성능 최적화

useSelector는 Redux의 상태값 조회를 위해서 사용하였던 기존의 connect를 좀 더 간결하게 사용하기 위해서 나왔다. 훨씬 간결하며 가독성을 상승시킨다.

 

하지만, useSelector를 무분별하게 사용할 경우, 과도한 rendering 유발해서 성능 이슈가 생길 위험이 있다. 

 

(저 같은 경우, 거래소를 만드는 과정에서, 무분별한 redux 사용 및 rendering 최적화를 고려하지 않아서, React에 많은 부담을 준 경험이 있습니다)

 

예를 들어보자

 

const { count, prevCount } = useSelector((state: RootState) => ({
    count : state.countReducer.count,
    prevCount: state.countReducer.prevCount,
  }));

 

위의 코드를 보면, count 와 prevCount를 조회할때 다시 객체를 생성하는 방식으로 선언하였기 때문에, React에서는 상태 변화 유무를 판단하기가 어려워, 무조건 ReRendering을 시킨다.

 

해결법

1. 독립 선언

const count= useSelector((state: RootState) => state.countReducer.count);
const prevCount= useSelector((state: RootState) => state.countReducer.prevCount);

useSelector을 독립적으로 선언할 경우, prevCount를 조회하는 과정에서 count는 아무런 영향을 안 받기 때문에, ReRendering 과정이 안 일어난다.

 

2. equalityFn

const result: any = useSelector(selector: Function, equalityFn?: Function)

// equalityFn?: (prev: any, next: any) => boolean

useSelector 문서를 보면, 두 번째 param으로 equalityFn가 존재한다. 기존의 값과 다음 값을 비교하여 같은면 true가 반환되어 ReRendering이 안 일어난다.

  const { count, prevCount } = useSelector((state: RootState) => ({
    count : state.countReducer.count,
    prevCount: state.countReducer.prevCount,
  }),(prev, next) => {
    return prev.count === next.count && prev.prevCount === next.prevCount;
  });

 

3. shallowEqual

equalityFn의 경우, 조회하는 값이 많아 질 경우 손이 피곤해질 수 있다. 그러기에 redux에서는 shallowEqual라는 함수를 제공해준다. selector로 선언한 값의 최상위 값들을 비교하여 ReRendering을 판단한다. 기억해둬야 하는 것은 shallowEqual이기 때문에 객체 내부의 값의 변경에 대해서는 알 수 없다.

  const { count, prevCount } = useSelector((state: RootState) => ({
    count : state.countReducer.count,
    prevCount: state.countReducer.prevCount,
  }),shallowEqual);