Где хранить линки в реакт?

Question

[gaming_shark]

interface SidebarProps {}

export const Sidebar = (props: SidebarProps) => {
  const sidebarItems = useMemo(() => {
    return [
      {
        path: RoutePath.home,
        text: "Home",
        Icon: HomeIcon,
      },
    ];
  }, []);
  return (
    <menu className={styles.Sidebar}>
      <div className={styles.logo}>
        <Logo icon={bookIcon} />
      </div>
      <nav className={styles.navigation}>
        {sidebarItems.map((item) => (
          <SidebarItem key={item.path} item={item} />
        ))}
      </nav>
    </menu>
  );
};

Есть дефолтный хедер и в нем отрисовывается навигация. Куда можно вынести массив sidebarItems и как его правильно мемоизировать, он ведь явно не в компоненте должен храниться?

Comments

[WbICHA]

Ну вынеси его за пределы компонента, в чём проблема, если он константа?

Answer 1

[Антон Иванов]

Собственно, а почему нет? Можно, и многие именно так и делают. Можно также использовать кастомный хук, например useSidebarItems, или функцию высшего порядка HOC withSidebarItems.