<aside> ♻️ 시리즈

1. 네?? Component를 memoization해도 리렌더링이 발생한다구요..?? 💦 (feat. context)
2. Provider에 전달할 value를 memo하기
3. React.memo의 2번째 인자를 아시나요? </aside>

개요

현재 Sidebar 코드는 다음과 같아요.

function Sidebar({ workspace }: SidebarProps) {
  const { selectedMom, setSelectedMom } = useSelectedMomContext();

  return (
    <div className={style['sidebar-container']}>
      <Header name={workspace.name} />
      <div className={style['sidebar-container__scrollable']}>
        <MemberList members={workspace.members} />
        <MomList
          moms={workspace.moms}
          selectedMom={selectedMom}
          setSelectedMom={setSelectedMom}
        />
      </div>
      <MeetingButton />
    </div>
  );
}

memo는 이전 글에서 다 끝난줄 알았는데..!

문제 상황

이 PR 이후 MomList에 selectedMom이라는 props가 추가되었어요.

Feat/#372-K: 회의록 제목 변경 MomList에 반영 by se030 · Pull Request #373 · boostcampwm-2022/web27-Wabinar

그래서 회의록을 선택할 때 MomList가 다시 리렌더링 되기 시작했어요.

해결

첫번째 글을 작성하면서 알게되었던 React.memo의 2번째 인자를 적용해봐요.

https://user-images.githubusercontent.com/65100540/207810273-b312ad24-85bb-455c-ac02-deafa8809043.mov

아래의 isMemoized 함수를 선언해 props중 moms가 바뀌었을 때 다시 memo 하라고 알려줘요.

const isMemoized = (prevProps: MomListProps, nextProps: MomListProps) => {
  return prevProps.moms === nextProps.moms;
};

이전 moms와 현재 moms가 같다면 memo되어 있는 컴포넌트를 사용해 리렌더링을 뛰어넘어요.