useNavigate를 추가한 순간 리렌더 범위가 확장된 건에 대하여..

문제를 직감하게 된 계기

🧐 리렌더 범위가 다른 것이 보이십니까

1번 코드

const Header = (): ReactElement => {
  const [login, setUserLogin] = useAtom(loginStateAtom);

  return (
    <Wrapper>
      <FlexGrow3>
        <Button context={<img src={LongLogo} />} />
      </FlexGrow3>
      {!login && (
        <Button
          context={<Text text={'Sign in'} fontFamily="roboto" />}
          onClick={() => setUserLogin(!login)}
          margin={'0 3vw 0 0'}
        />
      )}
      {!login && <Button context={<Text text={'Sign up'} fontFamily="roboto" />} />}
      {login && (
        <Button context={<Text text={'Sign out'} fontFamily="roboto" />} onClick={() => setUserLogin(!login)} />
      )}
    </Wrapper>
  );
};

2번 코드

const Header = (): ReactElement => {
  const [login, setUserLogin] = useAtom(loginStateAtom);
  const navigate = useNavigate();

  return (
    <Wrapper>
      <FlexGrow3>
        <Button context={<img src={LongLogo} />}/>
      </FlexGrow3>
      {!login && (
        <Button
          context={<Text text={'Sign in'} fontFamily="roboto" />}
          onClick={() => setUserLogin(!login)}
          margin={'0 3vw 0 0'}
        />
      )}
      {!login && <Button context={<Text text={'Sign up'} fontFamily="roboto" />} />}
      {login && (
        <Button context={<Text text={'Sign out'} fontFamily="roboto" />} onClick={() => setUserLogin(!login)} />
      )}
    </Wrapper>
  );
};

차이가 보이시나요..?

• const navigate = useNavigate(); 코드를 추가한 순간부터 리렌더 범위가 확장되었습니다.
  • Header 컴포넌트 내부가 리렌더되지 않았는데, 갑자기 Header 컴포넌트가 리렌더 되기 시작했다.

이유를 아시는 분 제보 부탁드립니다..