Memoizing a route component in Hilla file router

[TheCrether]

Describe the bug

When using React's memo() function to wrap a React component that is a route (a .tsx file under the folder views) before exporting, an uncaught error gets thrown that is a bit confusing.

Expected-behavior

I would expect for the routes still to be rendered fine since they do not have any props anyways.

Reproduction

This code should work:

export const config: ViewConfig = {
  menu: { order: 1, icon: 'line-awesome/svg/globe-solid.svg' },
  title: 'MemoTestWithout',
};

export default function MemoTestWithout() {
  const name = useSignal('');

  return (
    <>
      memo test
    </>
  );
}

This code does not work:

export const config: ViewConfig = {
  menu: { order: 1, icon: 'line-awesome/svg/globe-solid.svg' },
  title: 'MemoTestWith',
};

function MemoTestWith() {
  const name = useSignal('');

  return (
    <>
      memo test
    </>
  );
}

export default memo(MemoTestWith);

System Info

• OS version: Windows 10
• Hilla version: 24.4.12
• Browser: Chrome, 129.0.6668.60

[Legioth]

Why do you need to memoize the view component? Note that React Router already takes care of not re-rendering the view even if the parent layout containing the <Outlet> is re-rendered.

As a workaround, you could probably add a dummy component around the view and then exporting this component instead.

function RealView() {
  return <span>Hello</span>
}

const RealMemo = memo(RealView);

export default function RealViewWrapper() {
  return <RealMemo />
}