Как предотвратить повторную визуализацию компонента Link-router-dom Link?

Question

Я пытаюсь ограничить количество компонентов, которые отображаются в моем приложении каждый раз, когда пользователь что-то щелкает. Учитывая, что боковая панель отображается независимо от того, на какой странице находится пользователь, имеет смысл заключить ее в функцию React.memo. Это работает хорошо, и сам компонент боковой панели, похоже, не рендерится. Однако элементы <Link>, которые я импортирую из react-router-dom, выполняют повторную визуализацию, как и SidebarAuthButtons и SidebarCreateButton.

Что я могу сделать, чтобы предотвратить такое поведение?

import React, { memo } from "react";
import { Link } from "react-router-dom";
import {
  SidebarContainer,
  SidebarLogo,
  SidebarNav,
  SidebarMenu,
  SidebarListItem,
  SidebarButton,
} from "../styles/SidebarStyles";

function Sidebar({ auth }) {
  const SidebarAuthButtons = (
    <div>
      <SidebarButton>
        <Link to="/login">Log In</Link>
      </SidebarButton>
      <SidebarButton outlined={true}>
        <Link to="/register">Create Account</Link>
      </SidebarButton>
    </div>
  );

  const SidebarCreateButton = (
    <SidebarButton>
      <Link to="#">Create</Link>
    </SidebarButton>
  );

  return (
    <SidebarContainer>
      <SidebarLogo>React Project</SidebarLogo>
      <SidebarNav>
        <SidebarMenu>
          <SidebarListItem isHeading={true}>Menu</SidebarListItem>
          <SidebarListItem>
            <Link to="/">Explore</Link>
          </SidebarListItem>
          <SidebarListItem>
            <Link to="/blogs">Blogs</Link>
          </SidebarListItem>
          <SidebarListItem>
            <Link to="/podcasts">Podcasts</Link>
          </SidebarListItem>
          <SidebarListItem>
            <Link to="/youtube">Youtube</Link>
          </SidebarListItem>
        </SidebarMenu>
        {auth.isAuthenticated ? SidebarCreateButton : SidebarAuthButtons}
      </SidebarNav>
    </SidebarContainer>
  );
}

export default memo(Sidebar);

Answer 1

Перемещение SidebarAuthButtons и SidebarCreateButton за пределы функционального компонента отображает область видимости, превращая их в компоненты React (в настоящее время они просто сохраняются в переменную jsx). Это должно исправить перерисовки.